Performance
Responsive image
Responsive image is an image delivered in several sizes so each device downloads one that fits its screen and layout slot. It stops a phone from fetching a 4000-pixel photo to show in a 360-pixel column.
How it is measured
Compare rendered size with natural size in DevTools: hover the `<img>` to see both. A 1200 px file shown at 300 CSS pixels on a 2x screen needs about 600 px, so it is twice what is required. Lighthouse's 'Properly size images' lists the wasted kilobytes.
The markup uses `srcset` with width descriptors plus `sizes`, or `<picture>` for art direction and format switching. Verify by resizing the window and watching the Network panel pick different files.
Worked example
A bike shop's product page serves a 4032 by 3024 JPEG of 3.4 MB into a 480 px column. Its category pages show 24 products, so the page weighs 28 MB. After generating 480, 800, and 1200 px WebP variants with `srcset`, a Pixel 6 downloads the 800 px file at 64 KB per product, and the category page drops to 2.6 MB.
LCP on the product page falls from 6.4 s to 2.2 s on throttled 4G.
How it differs
A responsive image adapts to the viewer's screen. srcset is the attribute that lists the candidate files, so it is one tool inside the goal. `sizes` and `<picture>` complete the set, and `srcset` alone, without `sizes`, assumes the image fills the viewport.
Common errors
Adding `srcset` without `sizes`. Generating variants but serving all from one path. Upscaling small originals. Forgetting `width` and `height`, which causes layout shift. Lazy-loading the LCP image. Serving the same file to retina and non-retina screens.
In practice
Find the five heaviest images on your top page. Generate three widths for each, for example 480, 960, and 1440, write `sizes` to match the layout, set `width` and `height`, and keep the LCP image eager. Check the Network panel at two window widths.