It is important that images are optimised as much as possible - there is a direct correlation between (poor) site speed due to large quantities of badly optimised images and (poor) conversion rates.
We have seen instances of images being uploaded larger than 2MB in size. Proper optimisation in Photoshop can bring this down to under 200KB in most cases.
Please refer to the last section on Image Optimisation for more information.
Images sizes are not enforced, but we recommend the longest side of an image be no more than 1680px @ 72dpi.
The site will automatically serve optimised, scaled down images appropriate to the device on which they’re being viewed. Site editors need simply to upload one ‘master’ copy of each image.
A poorly optimised master image will lead to poorly optimised cropped images.
When preparing images in Photoshop for use on the 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, 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
We recommended you use software such as Adobe Photoshop to optimise your images for the web, making them as small as possible.
- In Photoshop go to File > Save For Web… (or in newer versions of Photoshop, File > Export > Save For Web (Legacy))
- In Preset select JPEG High
- Then proceed to lower the Quality setting if possible, maintaining an acceptable level of fidelity. Keep an eye on the output file size in the bottom left of the Save For Web window - the smaller the better!
- Tick Optimized
- Untick Convert to sRGB
- Set Metadata to None
- Click Save
Once you have saved the image in Photoshop we also highly recommend you use software such as ImageOptim (free Mac OS X app) or Kraken (free online tool) to compress the file further. These tools work by tweaking the compression parameters of the image and removing any unnecessary embedded comments, colour profiles and metadata.
If you have any questions on image specification, please email firstname.lastname@example.org