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).
- Results in seconds
- Pass / fail + fix guidance
- No account required
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
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
Use both. AVIF compresses 20-50% smaller than WebP and has 97%+ browser support. Serve AVIF first, WebP second, JPG as a final fallback via the <picture> element.
Yes for now. A small percentage of users (older browsers, niche email clients) still cannot render WebP / AVIF. The <picture> element makes the fallback automatic and free.
No, when set up correctly. WebP and AVIF achieve the same visual quality as JPG at 30-50% smaller file size. Use a quality setting of 65-75 for photos.
Yes. Safari has supported AVIF since iOS 16 (2022). Combined with Chrome and Firefox support, real-world AVIF coverage exceeds 97% of traffic.
Use a build-time tool (sharp for Node, squoosh for browser, imagemin for CI/CD pipelines). Most CDNs (Cloudflare Polish, Cloudinary, Imgix) can also convert on the fly.