How to Serve Images in Next-Gen Formats (WebP and AVIF)

"Serve images in next-gen formats" is a performance recommendation that means your JPEG, PNG or GIF images would be significantly smaller as WebP or AVIF, with no visible loss in quality. Images are usually the heaviest part of a page and often the Largest Contentful Paint element, so moving to next-gen formats is one of the highest-impact, lowest-risk performance fixes you can make.

What Are Next-Gen Formats?

"Next-gen formats" refers to image formats that compress much better than the JPEG, PNG and GIF formats the web grew up on:

Both next-gen formats support transparency and animation, so they can replace PNG and GIF as well as JPEG. AVIF usually compresses better but takes longer to encode; WebP is faster to produce and very widely supported. Serving AVIF with a WebP or JPEG fallback gives you the best of both.

Why Next-Gen Formats Matter

Smaller images download faster, which directly improves Largest Contentful Paint when the hero image is the LCP element, and reduces data usage for mobile visitors. Moving a 400 KB hero JPEG to a 180 KB AVIF can take several hundred milliseconds off LCP on a mobile connection. See how to fix LCP for how images fit into that metric.

How to Serve Images in Next-Gen Formats

1. Let your framework or image CDN do it

The easiest route is automatic conversion. Image CDNs (Cloudflare Images, Cloudinary, imgix, Bunny, Vercel and others) can detect browser support from the Accept header and return AVIF or WebP on the fly. Frameworks with built-in image components do the same: Next.js next/image serves WebP by default and can be configured for AVIF.

module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

2. Use the picture element for static sites

If you serve images yourself, the <picture> element lets the browser pick the first format it supports, with a JPEG or PNG fallback for anything older. Always keep width and height on the img so the browser reserves space and avoids layout shift.

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Team reviewing a website audit report"
       width="1200" height="630" fetchpriority="high">
</picture>

3. Convert existing images in bulk

For a folder of existing assets, convert once at build time. Command-line tools such as cwebp, avifenc, Squoosh CLI or the sharp library handle this, and most bundlers have image plugins that do it during the build.

import sharp from "sharp";
import { readdir } from "node:fs/promises";

for (const file of await readdir("public/img")) {
  if (!/\.(jpe?g|png)$/i.test(file)) continue;
  const base = file.replace(/\.\w+$/, "");
  await sharp(`public/img/${file}`).avif({ quality: 55 }).toFile(`public/img/${base}.avif`);
  await sharp(`public/img/${file}`).webp({ quality: 75 }).toFile(`public/img/${base}.webp`);
}

4. WordPress and other CMSs

WordPress can generate WebP versions of uploads, and image optimization plugins can convert your existing library to WebP or AVIF and rewrite image tags or serve them through rules. Shopify serves WebP automatically through its CDN when you use its image filters. Check your platform's docs before adding another plugin.

5. Size images correctly at the same time

Next-gen formats fix the encoding, not the dimensions. A 4000-pixel-wide photo displayed at 800 pixels is still wasteful in AVIF. Use responsive images (srcset and sizes) so each device downloads a suitable size, and never ship an image larger than it is displayed.

6. Do not lazy-load the LCP image

While you are changing image markup, make sure the hero image is not lazy-loaded and has fetchpriority="high"; lazy-load images below the fold instead.

Common Mistakes

• Converting without fallbacks on a site with visitors on very old browsers. The picture element or an image CDN solves this.
• Quality set too high. AVIF at quality 90 can be larger than a well-compressed JPEG. Start around 50-60 for AVIF and 70-80 for WebP and compare visually.
• Forgetting CSS backgrounds. Background images in CSS need image-set() or separate rules to get next-gen formats.
• Removing width and height when switching to picture, which causes layout shift. See how to fix CLS.

How Scanverra Detects Images Not in Next-Gen Formats

A Scanverra performance audit lists images that would be smaller in next-gen formats, with the potential saving for each, and explains the effect on LCP, with fixes written for the framework or CMS it detects. The browser test checks images on the fully rendered page and flags three problems: legacy-format images of 8 KiB or more where WebP or AVIF would be smaller, oversized images with far more pixels than their display size, and images without width and height attributes. Both test the pages you scan; they do not crawl your whole media library, so run a bulk conversion for assets on pages you have not scanned. While you are editing image markup, add descriptive alt text too: how to fix missing alt text.