Please refer to our Image Specification Guide article for general information on how to prepare your images for use on your website.
When preparing images for use on your site, crop them to the most appropriate ratio for the context in which they will be shown. In the code we only restrict image widths, not heights, so the ratios below are recommendations rather than strict values.
As a general rule, banner/widget images should either be square (1:1), or landscape (2:1). Landscape images will be cropped to square on mobile in most cases (unless the widget has specific desktop and mobile image fields).
Widget Image Recommended Ratios & Sizes
The ratios and sizes below are recommendations only. If the images deviate from these it’s not a problem, the code will crop/resize them to the correct size.
One Card Widget
Image full-width: 2:1 / (W) 1680px x (H) 840px
Two Card Widget
Image 1/2 width: 1:1 / (W) 840px x (H) 840px
Three Card Widget
Single row of images 1:1 / (W) 840px x (H) 840px
Four Card Widget
All images: 1:1/ (W) 420px x (H) 420px
Image Optimisation // Save For Web
Please refer to our Image Optimisation article for more information.