Modern Image Format Test

What is it?

Modern image formats such as WebP and AVIF compress significantly better than legacy JPEG and PNG at equivalent visual quality, which translates into smaller file sizes, faster page loads, and lower data usage for visitors on metered connections. Because images typically account for the majority of bytes on a modern web page, the format choice has an outsized impact on overall page weight and Largest Contentful Paint. This test checks the page you submit for images still served in legacy formats.

Why modern image formats matter

Images typically account for the majority of bytes on a modern web page, so the format you choose has an outsized impact on overall page weight. WebP, supported by every major browser since 2020, compresses roughly 25 to 35 percent smaller than equivalent-quality JPEG. AVIF, the newer format supported by every recent browser, compresses 30 to 50 percent smaller than WebP. Switching from PNG to WebP or AVIF for photographic content often cuts image weight by half or more without any visible quality loss.

The Core Web Vitals impact is direct. Largest Contentful Paint is dominated by the hero image on most pages, and the smaller the hero image, the faster LCP completes. Beyond Core Web Vitals, smaller images mean less data downloaded by mobile users, less bandwidth consumed by your CDN, and lower bills for high-traffic sites that pay for outbound bandwidth.

How to roll out modern formats

Use the <picture> element with multiple <source> entries so the browser picks the best supported format.
Generate variants automatically via your build pipeline, image CDN, or framework image component.
AVIF first, WebP fallback, JPEG last: AVIF compresses best, WebP is universally supported, JPEG remains the universal fallback for the rare unsupported case.
Image CDNs such as Cloudflare Images or Cloudinary handle format negotiation automatically, requiring only a single source upload per image.

This test reports which images are still served in legacy formats. The fix guide below walks through generating modern variants, configuring the <picture> element, and using image components or CDNs that handle the format negotiation automatically.

Pass rate:

Top 100 websites: %
This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
All websites: 33%
This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.

Pass rates of Top 100 US websites
2021	32%
2022	26%
2023	38%
2024	43%

100

How do I fix it?

This test fails when images are served in legacy formats such as JPEG and PNG instead of modern alternatives like WebP or AVIF. Modern formats compress significantly better at equivalent visual quality, which means smaller transfers, faster page loads, and lower data usage for visitors on metered connections. Fixing this issue means generating modern variants and serving them to browsers that support them.

Example

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Marathon runners at sunrise" width="1600" height="900">
</picture>

Where to make the change

Raw HTML: use the <picture> element with multiple <source> entries so the browser picks the best supported format.
WordPress: WordPress 6.x and later supports WebP natively. Use a media optimization plugin to convert existing JPEGs and PNGs and serve modern formats automatically.
Shopify: Shopify's image CDN can serve WebP automatically; using the image_url filter with format parameter or the image_tag helper handles negotiation.
Wix or Squarespace: both platforms convert and serve WebP automatically when supported by the visitor's browser.
Headless or framework sites: components like next/image and astro:assets generate AVIF and WebP variants at build time and serve the best format per request.

Common causes and how to resolve them

Only legacy formats published: add a build step or image CDN that generates WebP and AVIF alongside the original.
Single-format <img> tag: wrap the image in <picture> with <source> entries for AVIF and WebP, falling back to the JPEG.
Image CDN not negotiating format: enable automatic format conversion or pass a format=auto query parameter (depends on provider).
SVG used where a raster image would be smaller (or vice versa): illustrations and icons should be SVG; photos should be raster in a modern format. Mixing them up wastes bytes.

Best practices

AVIF first, WebP fallback, JPEG last: AVIF compresses best, WebP is widely supported, JPEG remains the universal fallback.
Match quality to use case: hero images can use higher quality settings; thumbnails can drop quality without visible loss.
Use an image CDN: services like Cloudflare Images, Cloudinary, or Imgix handle resizing, format conversion, and caching in one step.