# Next-gen image formats WebP and AVIF served to modern browsers

- **Pattern:** `ab-002007` (`performance-core.image-media-optimization.next-gen-formats`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002007
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002007)

## Why it matters

WebP provides 25–34% smaller file sizes than JPEG at equivalent visual quality; AVIF provides 50% smaller sizes. Serving legacy JPEG or PNG to browsers that support modern formats wastes bandwidth on every image request (ISO-25010 resource-utilisation). A page with ten product images at 200 KB each becomes a page with ten images at 130 KB each in WebP — a 700 KB savings per page load that directly reduces LCP, speeds up the gallery render, and cuts mobile data costs for users.

## Severity rationale

Medium because serving only JPEG/PNG wastes 25–50% of image transfer bytes on modern browsers that support WebP or AVIF, with compounding impact on image-heavy pages.

## Remediation

Serve WebP or AVIF to capable browsers using `<picture>` with a JPEG/PNG fallback:

```html
<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" alt="Product" width="600" height="400">
</picture>
```

With Next.js, format conversion is automatic — `next/image` serves WebP or AVIF to supported browsers without any extra configuration:
```tsx
<Image src="/images/product.jpg" alt="Product" width={600} height={400} />
```

For images outside `next/image`, configure an image CDN (Cloudinary, Imgix, or Vercel's built-in optimizer) to negotiate format via `Accept` header:
```
https://res.cloudinary.com/demo/image/upload/f_auto/product.jpg
```

## Detection

- **ID:** `next-gen-formats`
- **Severity:** `medium`
- **What to look for:** Count all relevant instances and enumerate each. Check image serving strategy. Look for `<picture>` elements with WebP/AVIF `<source>` tags, or image CDN configuration (next/image, cloudinary, imgix) that auto-converts formats. Examine build output or image delivery pipeline for format negotiation based on browser support.
- **Pass criteria:** Images are served in WebP or AVIF to modern browsers with fallback to JPEG/PNG. Either `<picture>` elements are used with format sources, or an image optimization service (next/image, CDN) handles format conversion automatically.
- **Fail criteria:** Only JPEG/PNG served regardless of browser support, or WebP/AVIF is available but not served to capable browsers. File sizes are not reduced relative to legacy formats.
- **Skip (N/A) when:** The project has no images or uses only SVG/vector graphics.
- **Detail on fail:** Specify the formats being served. Example: `"All JPEGs served without WebP alternative. Modern browsers capable of WebP still download 3x larger JPEG files. No image optimization service detected"` or `"next/image configured but JPEG still used instead of automatic WebP/AVIF conversion"`.
- **Remediation:** WebP and AVIF provide 20-35% better compression than JPEG/PNG. Serve them to modern browsers:

  Using `<picture>`:
  ```html
  <picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Image">
  </picture>
  ```

  Or use Next.js Image (auto-converts):
  ```tsx
  <Image src="/image.jpg" alt="Image" width={600} height={400} />
  ```

  Or configure an image CDN to auto-optimize:
  ```
  https://images.example.com/image.jpg?format=auto&w=600
  ```

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-002007