Serve Images in Next-Gen Formats

When PageSpeed Insights or Lighthouse tells you to serve images in next-gen formats, it has found JPEG, PNG or GIF files that would be noticeably smaller as WebP or AVIF at the same visual quality. Both newer codecs compress far more efficiently than JPEG (1992) and PNG (1996). Images are usually the heaviest part of a page, so switching formats cuts many bytes without visible quality loss.

From PerfDelta's measurements: Lighthouse reports this finding on 46% of 4,108 measured home pages. The median estimated saving is 2005 ms. More in the data section below.

WebP and AVIF: two modern formats for different jobs

WebP and AVIF both support lossy and lossless compression, transparency and animation, so either one can replace JPEG, PNG and animated GIF. They differ in where they perform best:

• Photos: AVIF usually produces the smallest file for photographic content, especially at lower quality settings where JPEG shows blocky artifacts. WebP is a solid second choice and encodes much faster.
• Graphics and screenshots: flat colours, text and sharp edges often compress well as lossless WebP. For logos and icons, SVG is usually better than any raster format.
• Transparency: both formats keep an alpha channel, so a transparent PNG can become a lossy WebP or AVIF with transparency intact. Converting it to JPEG would lose the transparency.
• Animation: animated WebP and AVIF are far lighter than GIF. Longer clips are often lighter as a muted <video>.

All current major browsers support both formats. Older devices and non-browser clients such as email programs may not, which is why a fallback stays part of every setup below.

Why the modern-image-formats audit appears

The audit (ID modern-image-formats) estimates how large each JPEG, PNG or GIF on the page would be in a modern format and flags every image where the saving exceeds a small threshold, together with the estimated savings per file. Newer Lighthouse versions, and with them PageSpeed Insights, bundle this check into the "Improve image delivery" insight alongside image sizing and compression, so the same files may appear there with the reason "Using a modern image format".

The fix matters most when the flagged image is the Largest Contentful Paint element. A smaller file finishes downloading sooner, which helps you reach the 2.5 second threshold for a good Largest Contentful Paint. Elsewhere on the page, fewer bytes still reduce total page weight. Format is a separate lever from properly sizing images: format changes the compression, dimensions change how many pixels you ship, and most images benefit from both.

How to serve images in next-gen formats

1. Convert images with cwebp, avifenc, sharp or Squoosh

Squoosh, a browser app, compares formats and quality settings for single images. For batches, use the command-line encoders from the WebP and libavif projects:

# WebP at quality 80
cwebp -q 80 photo.jpg -o photo.webp

# AVIF at quality 60, speed 6 (lower speed = smaller file, slower encode)
avifenc -q 60 -s 6 photo.jpg photo.avif

In a Node.js build step, the sharp library produces both variants from one source file:

const sharp = require('sharp');

await sharp('src/hero.jpg').webp({ quality: 80 }).toFile('dist/hero.webp');
await sharp('src/hero.jpg').avif({ quality: 55 }).toFile('dist/hero.avif');

Always convert from the highest-quality original you have, not from a JPEG that was already compressed for the web. Build conversion into your pipeline so new uploads are covered.

2. Serve modern formats with the picture element and a fallback

The <picture> element lets the browser pick the first format it supports, with the original as a safety net:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" width="1200" height="800" alt="Product hero image">
</picture>

The browser checks each <source> in order and falls back to the plain <img> if none match, with no JavaScript and no user-agent sniffing. Keep width, height and alt on the <img>. Each <source> can also take srcset and sizes to combine formats with responsive widths.

3. Use content negotiation at the CDN or server

Browsers announce the formats they accept in the Accept request header, for example Accept: image/avif,image/webp,*/*. An image CDN can read that header and return AVIF, WebP or the original from a single URL, so your HTML keeps a plain <img src="/hero.jpg">. Most image CDNs offer this as an automatic format option, for example f_auto at Cloudinary or auto=format at imgix.

If you negotiate formats yourself, the response must include Vary: Accept. Without it, a shared cache may store the AVIF response and hand it to a client that cannot decode it. A typical nginx setup serves a pre-generated .webp file next to the original:

map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}

location ~* \.(jpe?g|png)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

This expects files named like photo.jpg.webp. Make sure your CDN respects Vary: Accept and purge its cache after switching.

4. Choose quality settings per image type

The format only saves bytes if the quality setting fits. For lossy WebP, a quality between 75 and 82 is a common starting point. AVIF uses a different scale and usually looks clean at lower values, so start around 50 to 60 and adjust. Compare results at real display size. Reserve lossless mode for screenshots with small text.

WordPress, Shopify and Next.js settings for next-gen images

WordPress

WordPress accepts WebP uploads since version 5.8 and AVIF uploads since version 6.5, provided the server's image library (Imagick or GD) supports the format. Core does not convert your JPEG uploads to a modern format by default. The "Modern Image Formats" plugin from the WordPress Performance Team generates WebP or AVIF versions of uploaded images, as do many image optimisation plugins. After enabling conversion, regenerate existing media so older uploads are covered too.

Shopify

Shopify's CDN automatically serves a modern format such as WebP to browsers that support it, as long as the theme loads images through the CDN, for example with the image_url filter:

{{ product.featured_image | image_url: width: 800 | image_tag }}

Images still flagged on a Shopify store usually bypass the CDN, for example hard-coded URLs or third-party apps.

Next.js

The next/image component converts and serves images through the built-in optimiser. WebP is the default. To serve AVIF first, add it to the formats list:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

The optimiser picks the first format from this list that the browser's Accept header allows. AVIF encodes slower, so each first request takes longer until cached. Plain <img> tags and CSS backgrounds bypass it.

Common mistakes when converting to WebP and AVIF

• Re-encoding compressed JPEGs at high quality: converting a heavily compressed JPEG to WebP at quality 90 can produce a larger file with the old artifacts baked in. Convert from the original master and check that the new file is actually smaller.
• Removing the fallback for email and social images: some email clients do not display WebP or AVIF, and link previews on social platforms are more reliable with JPEG or PNG. Keep a JPEG or PNG for newsletters and your og:image.
• Rasterising logos and icons: a logo exported as WebP is still a raster image. SVG is usually smaller and stays sharp at every size.
• Lazy loading the LCP image: a modern hero image that loads late still delays Largest Contentful Paint. Only defer offscreen images.
• Missing Vary: Accept: with server-side negotiation, caches can serve the wrong format to the wrong client.

How to verify the fix

Re-run PageSpeed Insights or Lighthouse and confirm the audit lists fewer images, ideally none. In Chrome DevTools, open the Network panel, filter by "Img" and check the Type column, or the Content-Type response header, for avif or webp. With negotiation, confirm Vary: Accept is present. Test a second browser for the fallback path and check category and product templates, which usually hold most images.

PerfDelta tests several pages on mobile and desktop and lists the Lighthouse opportunities with estimated savings and the affected image files, so you can see which templates still ship JPEG or PNG. If images remain after a fix, purge the CDN or plugin cache.

Frequently asked questions

What does "serve images in next-gen formats" mean?

It is a Lighthouse audit that flags JPEG, PNG and GIF images that would be noticeably smaller as WebP or AVIF at the same visual quality. It lists each file with its estimated savings.

Should I use WebP or AVIF?

AVIF usually gives the smallest files for photos but encodes more slowly. WebP encodes fast and compresses well. Serving AVIF first with a WebP source and a JPEG or PNG fallback gives each visitor the smallest file their browser can read.

Do I still need a JPEG or PNG fallback?

Yes, for older devices and non-browser clients. The picture element or a CDN with content negotiation handles this automatically. Keep JPEG or PNG for email newsletters and Open Graph images, where modern formats are not reliably displayed.

How do I serve next-gen images in WordPress?

WordPress accepts WebP and AVIF uploads but does not convert existing JPEGs by default. Use the Modern Image Formats plugin or an image optimisation plugin to generate WebP or AVIF versions, then regenerate existing media.

Does Shopify serve WebP automatically?

Yes. Shopify's CDN serves a modern format such as WebP to supporting browsers when images load through the CDN, for example with the image_url filter. Images from other hosts or hard-coded URLs are not converted.

Why does the audit still appear after I converted my images?

Common causes are a cache still serving the old files, images outside your pipeline such as CSS backgrounds or third-party embeds, and markup that still points to the original JPEG or PNG. Purge the cache and check the Type column in the DevTools Network panel.