This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
CO₂ & EmpCo
How does the test detect that an image is delivered wider than it is displayed?
A photo 4,000 pixels wide that appears in a column 400 pixels wide transfers many times the bytes the screen can show. For every image the browser loaded during the page view, the check compares the width of the file with the width at which it is displayed. If the file exceeds the display width plus 10 % leeway, it reports this with the number and one example: natural width and display width in pixels.
The calculation
The check measures in a desktop window 1,280 pixels wide with a pixel density of 1. The required width there is the display width; the check adds 10 % leeway because image tools round to steps. With srcset it evaluates the version the browser loads in this window. An image is reported only when the file is at least 200 pixels wide and the estimated saving is at least 4 KiB (4,096 bytes). For images from third-party servers only the width decides, until the server releases the size with the Timing-Allow-Origin header. The estimate follows Lighthouse: the bytes of the file times one minus the square of required width over natural width. Lighthouse uses 12 KiB as the threshold for images with srcset or picture. The rule applies to raster images such as JPEG, PNG, WebP and AVIF.
What it costs in the score
Every image delivered too large costs one point in the CO₂ score, at most five. The bytes themselves also count in the page weight. The check reports images that are too narrow as a separate note on sharpness.
Where oversized images come from
Usually the original from the camera or the image archive is uploaded, and the page only shrinks it in the display. Themes that always insert the largest image size, and image carousels (sliders) that load the same file for all screens, are also common.
Examples
Column image
<img src="/bilder/haus-original.jpg" style="width:400px">
<!-- 4000 px breit --><img src="/bilder/haus-400.webp"
srcset="/bilder/haus-400.webp 400w, /bilder/haus-800.webp 800w"
sizes="400px" width="400" height="267"
alt="Unser Haus von der Straße aus">- Read the example address with natural and display width in the finding. The image table of the home page in the downloadable audit file lists every img element with its required width and marks every image above the width limit; the finding counts those with at least 4 KiB of estimated saving.
- Upload every image at the width at which it appears, and double the width as a second version for high-resolution screens.
- Have the CMS create several sizes and pick the right one via srcset and sizes.
- Look at image carousels and header images of the theme: they often load the largest version.
