Has the design used imagery efficiently?
Image files make up the majority of file size on most web interfaces, and so using images efficiently is one of the best strategies to reduce page weight and energy use. It also helps improve web performance.
Ensure that all images have a justifiable purpose. Size images as small as possible to achieve your objectives and see if you can achieve similar visual impact with alternatives such as SVG graphics and CSS styles. Also, consider the images themselves—detail and color contribute to image file size, so use simpler imagery, shallow depth of field and reduced color palettes such as black and white photography.
Are images scaled appropriately for display devices? Are file sizes optimized? Does the CMS automatically resize uploaded user images to ones more appropriate to the web? Does it convert more traditional file formats to AV1 (.avif), HEIF, WebP, JPEG XR on the fly (assuming browser support)?
Finally, “lazy load” images so they load as users scroll down the page instead of all at once up front. This will improve page performance.
- Read How to Optimize Images for Faster Load Times and Sustainability
- Read Should I Use a Carousel?
- Read Essential Image Optimization