Lighthouse: Properly size images
Images served on your page should be appropriately sized based on the dimensions they will be displayed at.
An all-too-common issue seen is images being uploaded at full resolution or with enormous dimensions.
Typical examples include:
- Uploading high resolution images straight from your camera or phone
- Using high resolution stock photos
- Using large, print-ready logos or graphics
When this happens, the browser needs to resize these images down to a fraction of their original size for display, wasting time and resources in the process.
Unnecessarily large images force users to download useless data, impacting their page experience.
How does your site score on this audit?
How do improperly sized images affect page performance?
A high-quality, high resolution image can generate a very large file size, which drastically affects web performance as the browser must spend more time downloading the file, increasing the bandwidth consumed.
This is further exacerbated over slower connections, which can be frustrating to your page's visitors.
Furthermore, the browser needs to do more work to resize the large dimension image to your visitor's viewport as defined by the stylesheet.
This increases browser execution time, and potentially affects your page's Cumulative Layout Shift (CLS).
When this happens for multiple images on your page, the effect is multiplied several-fold, resulting in a very slow page.
Serving properly sized images is one of the most worthwhile optimizations you can perform in the interest of web performance.
Properly sizing your images not only helps provide a fast loading page, but also improves your visitors' experience as all major Performance metrics are improved, reducing the bandwidth consumption in the process.
Moreover, this optimization is even more worthwhile on mobile devices as they require lower amounts of cellular data to load your page.
How does GTmetrix trigger this audit?
GTmetrix compares the sizes of the rendered/displayed images with the sizes of the actual images on your page.
If the rendered/displayed image is at least 4KB smaller than the actual image, it is flagged. Clicking the audit on the GTmetrix report lists the relevant images.
Note that Device Pixel Ratio is accounted for, so the audit will consider responsive design.
GTmetrix also estimates the file size savings possible through serving properly sized images.
How to properly size images?
We've written an extensive article on how to properly size images for performance.