Next Gen Image Formats: What They Are and How to Use Them

What are next gen image formats?

The term covers file types created after JPEG, GIF and PNG that squeeze pictures harder without visibly ruining them. Two matter for almost every website: WebP, which Google introduced in 2010, and AVIF, which comes from the Alliance for Open Media and is built on the AV1 video codec. JPEG XL, JPEG 2000 and JPEG XR sit in the wider family.

WebP and AVIF both offer lossy and lossless compression, an alpha channel for transparency, and animation, so one file type can stand in for JPEG, PNG and GIF. According to MDN, lossy WebP is on average 25 to 35 percent smaller than a visually similar JPEG, and lossless WebP is about 26 percent smaller than PNG. AVIF is often smaller still, but test your own images before promising a number.

The label keeps changing. Lighthouse once called its audit "serve images in next gen formats", later "serve images in modern formats", and in Lighthouse 13 the check sits inside the Improve image delivery insight, but the idea is identical. JPEG, PNG, GIF and BMP are the legacy set, while SVG is a vector format with its own rules. Our row is called Modern Image Format, and its exact rule follows below.

Why next gen image formats matter for speed and SEO

Images are usually the heaviest part of page weight, so every kilobyte you remove shortens a wait, mostly on mobile. On many pages the large image at the top is also the Largest Contentful Paint element, so a lighter file can bring that paint earlier. Our Core Web Vitals guide explains how LCP and the other vitals are reported.

Be careful with the SEO claim. Google does not name image format as a ranking factor, so a WebP conversion is not a ranking trick. The real gains come from speed, page experience and usable image search. Google's image guidance for Search lists WebP and AVIF as supported formats and asks that the extension matches the real file type. For the wider picture, read what page speed means for SEO.

Fewer bytes through your CDN also cost less. To see the scale, we took one 900 by 600 pixel JPEG from our own blog and encoded it with the libwebp encoder at quality 80, the engine behind cwebp. The original weighed 261,381 bytes (about 255 KB) and the WebP came out at 32,550 bytes (about 32 KB). That image has large flat areas, which compress far better than a busy photograph, so expect smaller savings on real photos and test your own files before quoting a percentage.

Tiny icons are not worth an afternoon, because Lighthouse skips any image saving under 8 KiB. Shops and galleries gain most.

How SEO Site Checker tests modern image formats

The check is a URL extension test on the first 15 img src values found in the rendered page.

The exact rule: a pass means at least one image URL, among the first 15, ends in .webp, .avif, .jp2 or .jxl. It is a starting signal, not proof that every image is optimized.

What the check reads

We render the page in headless Chromium and read the HTML after the load event has fired, so images that scripts add before then are present and anything swapped in on scroll is not. It collects the src of every img element, makes URLs absolute and keeps the first 15, ignoring srcset, picture source elements, data-src and CSS backgrounds.

What counts as modern

The lowercase URL must end with .webp, .avif, .jp2 or .jxl. Everything else counts as legacy, including jpg, jpeg, png, gif, bmp, svg, data URIs and any address with a query string after the extension. The row passes as soon as one URL is modern, even if the rest are not.

Pass and warning states

On a pass, the row shows the green icon and the message that the page uses images in a modern format, with no button. Under a warning you get the orange icon, the matching message, the legacy list (for signed in users) and the red How to Fix button, whose steps match the block further down.

There is no red fail state for this item and it does not change the overall score percentage. Because we never open the file, a .webp name on a file that is really a JPEG would still pass.

Limits to know

If your picture element ends in a JPEG img src, the row still reads legacy, because the check never sees the source tags. Lazy loading placeholders, extensionless CDN URLs and platforms that convert on the fly can also look legacy even when browsers receive WebP, as the platform section below explains. Long galleries are judged by their first 15 images only. Each image is classified after its own request returns, inside one 10 second window shared by all 15, so a very slow image host can drop an image from both lists.

Run the free report

WebP vs AVIF vs JPEG XL vs JPEG and PNG

This table draws its facts from the MDN image file type guide.

AVIF has no progressive rendering, so a large file appears all at once, and JPEG XR, an old format tied to Internet Explorer, is not detected by our check. An animated WebP or AVIF can replace a GIF at a far smaller size.

Send photos to WebP, with AVIF as an extra source when you can supply a fallback. Logos and screenshots suit lossless WebP or PNG, and icons stay SVG.

How to check which image formats your page serves

Our check reads URL text, so compare its verdict with what the browser receives.

1. Run our report. Read the Modern Image Format row and, if you are signed in, expand the URL lists to see which addresses landed where.
2. Use browser DevTools. Tick Disable cache in the Network panel first so transfer sizes are real, reload, filter by Img, then read the Type column or the Content-Type response header (image/webp, image/avif or image/jpeg).
3. Ask from the command line. Request one image's headers with curl and read content-type. An Accept header naming image/avif and image/webp tests negotiation.
4. Try Lighthouse or PageSpeed Insights. The older audit lists images that could shrink in a modern format and skips savings under 8 KiB. Lighthouse 13 moved it into the Improve image delivery insight (see the Lighthouse modern formats audit).

curl -sI -H "Accept: image/avif,image/webp,*/*" https://example.com/images/photo.jpg

Read the content-type and vary lines in the reply. DevTools shows the format that arrived, while our check reads only URL text.

How to serve images in next gen formats

1. List the legacy images. Take them from the report, heaviest first, hero image above the fold.
2. Resize to display size. A 4000 pixel original shown at 800 pixels wastes bytes in any format.
3. Convert JPG to WebP. Use the free WebP converter or cwebp, and keep the originals as masters.
4. Reference the new file. Put the WebP in the img src, or in a picture element that ends on a WebP img.
5. Automate it if you cannot edit templates. A server rule or CDN option picks the format per visitor.
6. Lazy load below the fold only, then re-test. The hero should load at once.

Audit and convert

Resize each original with the image resizer, which takes JPEG and PNG input. Convert with the WebP converter or cwebp, then run the image compressor if the result is still heavy. For bulk image conversion of a whole folder, ImageMagick can run magick mogrify -format webp -quality 80 *.jpg and the Squoosh browser app compares formats on one photo.

cwebp -q 80 photo.jpg -o photo.webp
avifenc -s 6 photo.jpg photo.avif

The first command writes a lossy WebP at quality 80. The second uses libavif, where -s trades speed for size, so check the flags against your version, and give it a PNG to convert PNG to AVIF. The web.dev WebP guide covers cwebp and fallback markup.

Serve with the picture element

Each browser uses the first source whose type it understands, so list AVIF first and WebP second.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="1200" height="800" alt="Product photo on a white table">
</picture>

Browsers handle this well, but our check sees only the photo.jpg src, so it still warns. At least one img among the first 15 needs a src ending in .webp. WebP opens in every current major browser, so it is a safe last fallback.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <img src="photo.webp" width="1200" height="800" alt="Product photo on a white table">
</picture>

AVIF browsers get the smallest file, everyone else gets the WebP, and the report sees a .webp src.

Server and CDN options

If you cannot edit every template, let the server handle content negotiation. When the Accept header contains image/webp and a file such as photo.jpg.webp sits beside the original, serve it and add Vary: Accept so caches keep one copy per format. These Apache rules are written for an .htaccess file.

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=ACCEPT_WEBP:1,L]
<FilesMatch "\.(jpe?g|png)$">
  Header append Vary Accept
</FilesMatch>
Header append Vary Accept env=REDIRECT_ACCEPT_WEBP
AddType image/webp .webp

In .htaccess a rewrite becomes an internal redirect, so the variable reaches the Header line as REDIRECT_ACCEPT_WEBP, while the unprefixed name works only in server or virtual host config. The FilesMatch block adds Vary to plain JPEG responses too, so a cache cannot hand a JPEG to a WebP capable browser. Keep the AddType line, because the T flag alone does not always set the type in per directory rules. An Nginx map plus try_files does the same.

Test on staging first, then verify with curl -sI -H 'Accept: image/webp' https://example.com/images/photo.jpg and look for content-type: image/webp and vary: Accept. A CDN format option is easier, but the extension may stay .jpg.

Re-test

Reload with the cache disabled, filter the Network tab by Img and confirm the Type column reads webp. Then run the report again and look for the green icon. If DevTools shows WebP and the row still warns, the platform notes below explain why.

Next gen image formats on WordPress, Shopify, Wix and CDNs

Some platforms deliver modern files without changing the address.

On Shopify and Wix a warning reflects the limit of a URL based check, not slow images, so confirm image/webp in DevTools before chasing a problem you may not have. On WordPress, upload a WebP or AVIF through the media library, or use an image optimization plugin that converts on upload, then view the page source and confirm the img src prints the .webp URL. Plugins that rewrite only through picture elements or CSS will still trigger the warning. For the delivery side, the CDN usage test shows whether your assets come from a content delivery network.

Mistakes that keep the Modern Image Format warning on

• Converted files nobody references. The WebP exists, but the img src still points at the old JPEG.
• Version strings after the extension. Put the version in the file name, as in photo-v3.webp, rather than after it.
• Placeholder src on lazy loaded images. A data URI or tiny gray.gif left in src until the visitor scrolls is all our check sees.
• Extensionless CDN URLs. An address such as /cdn/img?id=42&fmt=auto leaves no extension to read.
• Only the thumbnails were converted. Small gallery images in WebP can turn the row green while the 1600 pixel hero stays hero.jpg, so the speed gain never arrives.
• AVIF with no fallback. A page that offers only an .avif file breaks in browsers that cannot decode it, so keep a WebP or JPEG behind it.

Next gen image formats best practices

• Match format to content. Use lossy WebP at roughly quality 75 to 85 for photos, with AVIF as an optional first source.
• Always include a fallback image. Put an older format behind any AVIF or JPEG XL source.
• Build responsive images. Add srcset and the sizes attribute so phones download smaller files.
• Protect the hero image. Set width and height attributes, never lazy load the LCP image, and add fetchpriority="high" to the hero.
• Cache long. Use versioned file names and a long lifetime, as the image caching guide describes.
• Describe every image. Clear file names and good image alt text keep pictures useful in image search.