Images: Image sizes and image dimensions

How to use sizes and cropping

On this page:

Image size and file size (general)
Why is width important?
Width for fixed rows
What about height?
File size of your images
Cropping images: use multiple images in one row
Using two, three or more images

Please note: Please note that the following are only recommendations based on what we think works best in ChurchDesk Designer - they are not definitive answers that must be followed to the letter in all cases.

Images play a crucial role on a website, but it can sometimes be difficult to figure out the right file sizes, image size specifications and how to crop your images. This article highlights what we consider best practices when using images with ChurchDesk templates and gives you general tips and tricks on how to use images on a website.

Image size and file size (general)

Image sizes and image dimensions are not only a matter of what is recommended for our Designer, but also the specific visual expression you are aiming for on your websites. Our recommendations for image sizes and dimensions are therefore primarily based on image width, as width is important for a responsive website, while height is primarily a matter of design preferences.

Why is width important?

Using images with a certain minimum width ensures that they always look good on responsive websites, no matter what screen size the visitor has. We therefore recommend an image width of 2600 pixels or more for cover images that take up an entire row. In fact, 2600 is also a good number to keep 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.

Width for fixed rows

If you are using a fixed row template, this obviously changes the requirements for your 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 on your floating rows with 2600 pixels or higher. Include the image you have in 2600 pixels and the designer will automatically generate an optimized version for your fixed rows when you publish your website.

What about height?

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


Please note that the appearance of the row changes depending on the image height, as it dictates the height of the column in which the image module is placed. If the image is included as a row or column background, the height of the image is determined by the row/column spacing settings. If you want to show 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 editor automatically compresses your images to help your website load faster, but we still recommend that you do not upload images larger than 200 kb in size.

So: Prioritize using images that do not exceed 200 kb.

Cropping images: using multiple images in one row

Our templates often use two or three images in a row to promote products, services or introduce employees. When using such layouts, the requirements for image sizes change. The designer has an integrated image editor, which is a great tool to ensure your images are the correct pixel size without having to use third-party programs to crop and resize. The image editor is easy to use and comes with size settings to help you save your images in a specific size/format.

Using two, three or more images

When using either two, three or more images in a row, the requirements for the images are the same as above. We recommend that you adhere to the following two rules:

Firstly, make sure the total width of your images is 2600 pixels or more to optimize for responsiveness. If the width is less than 2600 pixels, the appearance may change on a large desktop screen and include unwanted space between images. The specific width dimension depends on the number of images (columns) you have in a row. So if you have three images next to each other, each image should be at least 2600/3 = 866 pixels. If you have four images next to each other, each image should be at least 2600/4=650 pixels.

Secondly, make sure your images are the same height to ensure they have a consistent and streamlined look.


We recommend the 380 x 214 size for images to be displayed in both blog posts and slideshows

Updated on: 12/03/2024