Carousel - image sizes and cropping

Carousels can be challenging to work with because they look different on large and small screens. But here are some insights and suggestions on how to overcome most issues.

Carousels WITHOUT full width

This type of carousel is the easiest to work with as the images are not cropped on large and small screens. They simply change size.

The rule is that images are displayed as large as possible without going outside the frame.

Large screen:


Small screen:

Full-width and dynamic height carousels

This setting is also relatively easy to work with, as the image is always displayed without being cropped. It is only resized when the webshop is displayed on small screens.

Therefore, it is important to use images that still make sense when displayed in small versions.

You should also be careful about using text on top of the image, as there may not be room for all the text on small screens.

Full-width carousels without dynamic height

This type of carousel is very demanding on your images as they OF NECESSITY will be cropped. Both on large and small screens.

The rule is that images will be displayed large enough to cover the entire area within the frame.

Large screen:


Small screen:


As you can see above, there is a very large cropping of the images on either the large or small screen, depending on the height and width ratio of the image.

To account for this, consider the following strategies:

- Use images that can withstand cropping. For example, landscapes. Avoid details in the image (text, products or faces).

- Use images that have a minimum height of 450 pixels. Also, make sure that all images in the same carousel are approximately the same size.

- Use the "Hide page sections based on screen size" tool. With this tool you can control whether a carousel is displayed on large and/or small screens. Find the tool by searching for it in the administration.