Modern Image Format Test
The Modern Image Format Test inspects every image on the page and reports which use next-generation formats (WebP, AVIF) versus legacy formats (JPG, PNG, GIF). Modern formats compress 30-50% smaller than JPG / PNG at equal visual quality, directly cutting page weight, accelerating Largest Contentful Paint and reducing bandwidth costs. Lighthouse calls out missing modern formats as a high-priority opportunity, and addressing it usually moves a page from "Needs Improvement" to "Good" on Core Web Vitals.
What This Tool Checks
- Per-image format detection (JPG / PNG / GIF / WebP / AVIF / SVG)
- Estimated bytes saved by converting each legacy image
- <picture> source declarations with WebP / AVIF fallback
- Browser support requirements (covered for >97% of users)
- Animated GIFs that should be MP4 or WebM
- Quality and compression settings detection
Why It Matters for SEO
Images are typically 50-70% of total page bytes. Switching JPG to WebP saves around 30%; AVIF saves 50% or more. On image-heavy sites this can shave seconds off Largest Contentful Paint, dramatically improving Core Web Vitals scores. Browser support for WebP is universal (since 2020) and AVIF support exceeds 97% — both formats are safe for production today, with the <picture> element providing a JPG fallback for the few remaining holdouts.
How to Fix It
Convert all JPG and PNG to WebP (and ideally AVIF) at build time. Serve via the <picture> element with a JPG / PNG fallback for legacy browsers. Replace animated GIFs with MP4 or WebM. Use a build pipeline (sharp, squoosh, imagemin) so every new upload is processed automatically.
How It Works
We walk every image referenced by the page (img src, picture source, CSS background-image), inspect the response Content-Type header and magic-number bytes, then estimate the byte savings from converting each legacy file to WebP and AVIF using standard quality presets.
Common Mistakes to Avoid
- Serving original JPG / PNG to all browsers
- Animated GIF used for video clips (10-50x larger than MP4)
- WebP saved at default 80% quality when 60% is visually identical
- Forgetting the <picture> fallback so older browsers see broken images
- Optimising once on first deploy then never re-running on new uploads
Quick Checklist
- All photos served as WebP (with JPG fallback)
- AVIF served as the first <source> for compatible browsers
- No animated GIFs in production (use MP4 / WebM)
- Build pipeline auto-processes new uploads
- Lighthouse "Serve images in next-gen formats" passes