Performance Small

Resize the oversized images already in a modern format

This check fires when every oversized image on the page is already served in a modern format (WebP/AVIF). The format work is done, so the remaining fix is purely about dimensions: an image can be the right format and still be delivered several times larger than the space it's displayed in.

Why it matters

An oversized image is still wasted bytes on every load even when its format is already efficient: a modern format compresses better per pixel, but delivering an image far larger than its display size throws that saving away.

How to fix

  1. 1 Confirm the dimensions the image is actually displayed at across breakpoints.
  2. 2 Resize it (or request a resized variant from the image CDN) so the delivered size matches the display size.
  3. 3 Confirm a responsive srcset/sizes attribute is already serving the right variant per viewport, and add one if not.

Common mistakes

  • Uploading a full-resolution source image to a resizing CDN but requesting it at a size larger than any breakpoint actually displays, so the CDN dutifully serves an oversized "optimized" file.
  • Assuming a modern format alone solves page weight, when a correctly-sized JPEG is often smaller than an oversized WebP of the same image.
  • Adding a srcset with sizes that don't actually match the CSS layout, so the browser still picks a larger candidate than it needs.

How to verify

  1. 1 Compare the image's natural (file) dimensions against its rendered dimensions in devtools at the breakpoints visitors actually use.
  2. 2 Confirm the Content-Type is still WebP/AVIF after resizing (some CDN resize parameters can silently fall back to a legacy format).
  3. 3 Re-run the scan and confirm the asset no longer exceeds the 300KB threshold.

Related checks

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