# Serve images in next-gen formats: what it means and how to fix it

**Audit ID:** `modern-image-formats` · **Category:** Performance

<!--QA-->
> **Quick answer:** This audit flags JPEG or PNG images that would be smaller as WebP or AVIF. Convert them and serve with a picture element plus a JPEG fallback, or use an image CDN that negotiates format automatically. AVIF is roughly half the size of JPEG at the same visual quality.
<!--/QA-->

Lighthouse flags this when JPEG or PNG images on your page would be meaningfully smaller as WebP or AVIF. Images are usually the single largest payload on a page, so this is one of the highest-leverage performance fixes available.

## TL;DR

- **What:** Images served as JPEG/PNG that would be smaller in WebP or AVIF.
- **Why it matters:** Image bytes dominate page weight and directly delay LCP. AVIF is typically 50% smaller than JPEG at the same quality, WebP about 30%.
- **Fix:** Convert images to AVIF/WebP and serve with `<picture>` fallbacks, or use an image CDN that negotiates format automatically.

## What does the next-gen image formats audit check?

Lighthouse re-encodes each image to WebP at equivalent quality and reports the byte savings. If the estimated saving crosses its threshold, the audit fails and lists every offending image with its potential KB reduction.

## Why do next-gen image formats matter?

The Largest Contentful Paint element is an image on most pages. Cutting that image from a 240 KB JPEG to a 90 KB AVIF can move LCP under the 2.5 s threshold on its own. Smaller images also reduce total byte weight, mobile data cost, and CDN bandwidth.

Format size, roughly, at equal perceptual quality:

| Format | Relative size | Browser support |
|---|---|---|
| JPEG | 100% (baseline) | Universal |
| WebP | ~70% | All modern browsers |
| AVIF | ~50% | All current major browsers |

## How do I serve images in next-gen formats?

### Option 1: convert and serve with `<picture>`

Generate AVIF and WebP versions, then let the browser pick the best it supports:

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

The `<img>` stays as the universal fallback. Always keep `width` and `height` to prevent layout shift.

### Option 2: image CDN (least effort)

Cloudinary, imgix, Vercel Image Optimization, and Cloudflare Images detect the `Accept` header and return AVIF or WebP automatically. You keep one source image and add a query string or component.

### Generate the files

```bash
# sharp CLI
npx sharp -i hero.jpg -o hero.avif
npx sharp -i hero.jpg -o hero.webp
```

Or wire `sharp` / `@squoosh/lib` into your build pipeline so every image is converted on deploy.

## What are common next-gen image mistakes?

- **Lazy-loading the LCP image.** Next-gen format plus `loading="lazy"` on the hero still tanks LCP. Preload it with `fetchpriority="high"` instead.
- **Dropping width and height.** Smaller files don't help if the page now shifts. Keep dimensions.
- **Re-encoding already-optimized images at quality 100.** AVIF at quality 50-65 is usually visually lossless and far smaller.
- **No JPEG fallback.** Always keep the `<img>` inside `<picture>` so older clients still get an image.
- **Converting tiny icons.** Use SVG for icons and logos, not raster formats at all.

## How do I serve modern images in Next.js, WordPress, or Astro?

### Next.js

`next/image` outputs WebP/AVIF and correct sizing automatically:

```jsx
import Image from 'next/image';
<Image src="/hero.jpg" alt="..." width={1200} height={630} priority />
```

`priority` preloads it, which is correct for the LCP image.

### WordPress

Use a plugin such as ShortPixel, Imagify, or EWWW to auto-generate WebP/AVIF and serve them via `<picture>` or rewrite rules.

### Astro

The built-in `<Image />` and `<Picture />` components from `astro:assets` emit modern formats at build time.

## How do I verify images use next-gen formats?

1. Re-run Lighthouse: the audit should pass and "Serve images in next-gen formats" should clear.
2. DevTools → Network → filter Img: confirm responses are `image/avif` or `image/webp`.
3. Re-check LCP: a smaller hero image should pull it down.
4. Confirm `width`/`height` are still present so CLS does not regress.

## Related audits

- [Largest Contentful Paint (LCP)](/audits/largest-contentful-paint), the hero image is usually the LCP element
- [Cumulative Layout Shift (CLS)](/audits/cumulative-layout-shift), keep image dimensions to avoid shift
- [Image elements do not have alt attributes](/audits/image-alt), accessibility and image SEO

---

Audit your URL at https://lighthouse-md.com.