EngineeringScore
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.

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

Related checks

Performance Page WeightPerformance Text Compression

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