Images play a crucial role on a website but it can sometimes be difficult to figure out proper file sizes, pixels and how to crop your images. This article highlights best practices when using images on your website.
Recommendations
Please note that the following are only recommendations based on what we think works best in the Editor - they're not final answers that must be followed to the point.
Pixels and file size (general)
Pixels and image dimensions are not only a question of what is recommended for the Editor but also of the specific visual expression you're aiming for on your websites. The recommendations for pixels and dimensions are therefore primarily based on image width as width is important for a website with responsive design whereas height is primarily a question of design preference.
Why is width important?
Using images with a certain minimum width ensures that they will always look good on responsive websites, regardless of the visitor's screen size. It's therefore recommend to use an image width of 2600 pixels or more for cover images that take up an entire row. In fact, the number 2600 is good to keep in mind also if you have more than one image in the same row as the total width of all the images combined should add up to 2600 pixels.
Pixels when using several images in a row
For example, if you have three images next to each other, each image should be at least 866 pixels wide (as 866*3 = approx. 2600).
Recommended pixel width: 2600 pixels or higher (72 dpi)
Width for fixed rows
Having a website with fixed row layout 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 fluid rows with 2600 pixels or higher. Include the image you have in 2600 pixels and the Editor will automatically generate an optimized version for your fixed rows once you publish your website.
What about height?
The height of your images are also an important dimension but this is more a question of appearance and taste than responsive behavior. The most important thing to keep in mind when settling on a height for your images is that it's the same for all images you're planning to place immediately next to each other. Read the section "using two, three or more images" below to get more information about image height.
Be aware that the look and feel of the row changes according to your image height as it dictates the height of the column the image module is placed within. If the image is included 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.
Cropping images: using several images in a row
The Editor boasts an integrated Image Editor which is a great tool for making sure your images come in the correct pixel sizes without having to use third-party applications for cropping and resizing. The Image Editor is simple to use and comes with size presets that help you save your images in a specific size/format.
Using two, three or more images
Recommendations
Please notice that the following recommendations are based on images that are used on fluid row layout without any spacing added between them.
When using either two, three or more images on a row, the requirements for images are the same as above. We recommend that you adhere to the following two rules:
-
First, make sure that the total width of your images are 2600 pixels or more to optimize for responsiveness. If the width is less than 2600 pixels, the appearance might change on a large desktop screen and include unwanted space between the images. The specific width dimension depends on the number of images (columns) you have in a row. So, if you have three adjacent images, each image should at least be 2600/3 = 866 pixels. If you have four adjacent images, each one should at least be 2600/4=650 pixels.
-
Second, make sure that your images are the same height to ensure that they have a consistent and streamlined look.
File size of your image
The file size of your images is important for page loading speed. The Editor automatically compresses your images to help your website load faster but we still recommend that you upload images no larger than 200 kb in size.
Try to use images that don't exceed 200 kb