Properly size images

What’s actually happening

Lighthouse lists each oversized image with its actual file size and how many KiB you’d save by scaling it to the displayed dimensions. A 3000px-wide hero rendered into a 600px column is the usual offender. It hurts most on phones, where a full-res desktop image gets downloaded and then shrunk by the browser — burning mobile data and pushing out LCP.

Common causes

• One full-resolution image is served to every device with no responsive variants.
• No srcset/sizes, so the browser can’t pick a smaller candidate for a narrow viewport.
• CSS scales a large image down with width/height instead of the served file actually being smaller.
• Image uploaded straight from a camera or stock site (e.g. 4000px+) and dropped into a small slot.
• A CMS or build pipeline that emits a single size rather than generating thumbnails.

How to fix it

1. Find the real displayed sizeIn Chrome DevTools, hover the <img> in the Elements panel — it shows “rendered” vs “intrinsic” (natural) dimensions. If intrinsic is multiples of rendered, that’s the waste. Account for DPR: a 600px slot wants ~1200px of source for retina, not 3000px.
2. Generate responsive variantsProduce a few widths per image (e.g. 400/800/1200/1600px). Use an image CDN (Cloudinary, imgix, Cloudflare Images) or a build step — next/image, sharp, or your CMS’s thumbnail sizes — so you don’t resize by hand.
3. Wire up srcset and sizes<img src="img-800.jpg" srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px">. The sizes attribute tells the browser the slot width so it downloads the right candidate — getting sizes wrong is why srcset sometimes ‘doesn’t work’.
4. Set width and height attributesAlways give intrinsic width/height (or CSS aspect-ratio). It lets the browser reserve space — avoiding layout shift — and stops you accidentally upscaling a small file into a big box.
5. Re-audit after deployRerun Lighthouse on the deployed URL, not localhost, since the CDN and real responsive markup only kick in in production. Confirm the savings dropped to near zero.