Images play a crucial role on a website, but it can sometimes be difficult to determine the correct file sizes and image dimensions and to figure out how to crop images. This article presents best practices for using images in ChurchDesk templates and provides general tips and tricks for using images on a website. Basic information about the Image Module can be found here.

On this page:

1. Image size and file size (general)
2. Why is width important?
3. What to consider regarding height?
4. File size of your images
5. Cropping images: Using multiple images in one row

Image size and file size (general)

Image size and file size are not just a matter of what is recommended for our designer, but also a matter of the specific visual expression you are aiming for on your websites. Our recommendations for pixels and dimensions primarily refer to image width, as width is important for a responsive website design, while height is primarily a matter of design preference.

Why is width important?

Using images with a certain minimum width ensures that they always look good on responsive websites, regardless of the visitor's screen size. We therefore recommend an image width of 2600 pixels or more for cover images that occupy an entire row. You should also keep the number 2600 in mind if you have more than one image in the same row, as the total width of all images combined should be 2600 pixels.

Using a template with a fixed row layout naturally changes the requirements for image dimensions, as the width of a fixed row is 1140 pixels for the columns. Don't worry, you can still use the same images as with your fluid rows with 2600 pixels or more. Insert the image with 2600 pixels, and the Designer will automatically create an optimized version for your fixed rows once you publish your website.

What to consider regarding height?

The height of your images is also an important dimension, but this is more a matter of appearance and taste than of your website's responsiveness. The most important thing when setting a height for your images is that it is the same for all images you want to place immediately next to each other. Read the "Using two, three or more images" section below for more information on image height.

Note that the appearance of the row changes depending on the image height, as this determines the height of the column in which the image module is placed. If the image is embedded as a row or column background, the height of the image is determined by the spacing settings of the row/column. If you want to display more of your selected image, add more spacing to the row or column.

File size of your images

The file size of your images is important for page load speed. The Designer automatically compresses your images so that your website loads faster. However, we recommend that you upload images with a size of no more than 200 KB.

Cropping images - using multiple images in one row

Our templates often use two or three images in a row to promote products or services or to introduce employees. The requirements for image size change when using such layouts. The Editor has an integrated image editor that you can use to ensure that your images have the correct image size without having to use third-party applications for cropping and resizing. The image editor is easy to use and has size presets that allow you to save your images in a specific size/format (e.g., square or 16:9). To access the editor, click the Image Module -> Edit -> Content -> General -> Edit.

If you ensure that the total width of your images is at least 2600 pixels, the responsiveness of the website will be optimized. If the width is less than 2600 pixels, the appearance on a large desktop screen may change and include unwanted spacing between the images. The specific width depends on the number of images (columns) you have in one row. So, if you have three adjacent images, each image should be at least 2600/3 = 866 pixels. For four adjacent images, each image should be at least 2600/4 = 650 pixels.

Secondly, you should make sure that your images have the same height to ensure a consistent and streamlined appearance.

Keywords: Images, Image size, File size, Website, ChurchDesk, Image optimization, Cropping, Responsive design, Templates, Image editor, Alt-texts, Design, WebP, Media, Pictures, Picture size, Picture optimization

Updated on: 30/07/2025