Performance Medium

Optimize large images

Oversized images are consistently one of the single biggest and easiest-to-fix causes of slow pages, because a handful of unoptimized photos can outweigh every other resource on the page combined. The fix is rarely "compress more" alone: the dimensions served usually need to match the dimensions actually displayed.

Find out whether your site has this problem, and every other check, in one free scan.

Check your site free

Why it matters

Oversized images are one of the single biggest, easiest-to-fix causes of slow pages, and slow pages lose visitors before the content even renders.

How to fix

1 Identify images over roughly 300KB.
2 Resize them to the dimensions actually displayed.
3 Re-export in WebP/AVIF and add a responsive srcset.

Common mistakes

Compressing an image without resizing it, so a 3000px photo displayed at 400px wide is still transferring far more data than needed.
Serving the same image file to every device instead of using a responsive srcset, so mobile users download desktop-sized images.
Skipping modern formats (WebP/AVIF) because of legacy browser-support worries, when a <picture> fallback handles that safely.

How to verify

1 Use devtools network panel to identify images over roughly 300KB and check their actual rendered dimensions versus their file dimensions.
2 Confirm images are served in a modern format (WebP/AVIF) with a fallback, and check the Content-Type of the response.
3 Test on a throttled/mobile connection to confirm image load time is no longer a bottleneck.

Ready to see where you stand?

Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.

Scan your site