# All images optimized with next-gen formats and fallbacks

- **Pattern:** `ab-002501` (`seo-advanced.technical-seo.image-formats`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002501
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002501)

## Why it matters

Raw `<img>` tags serving JPEG or PNG without WebP/AVIF fallbacks transfer 30–80% more bytes than equivalent next-gen formats for the same visual quality, directly inflating page weight past mobile performance thresholds. iso-25010:2011 performance-efficiency.resource-utilisation is the relevant dimension — unoptimized images are the single most common cause of mobile Lighthouse Performance scores below 60. For findability, page weight correlates with Time to First Byte and crawl efficiency: Google's crawler has bandwidth budgets per domain, and heavy pages consume more of that budget per crawl.

## Severity rationale

Low because format optimization is a performance multiplier rather than a blocking defect — sites function correctly without it, but every page with unoptimized images pays a measurable performance tax.

## Remediation

Migrate raw `<img>` tags to `next/image` in your page and component files. Configure `next.config.js` to serve AVIF and WebP automatically:

```js
// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  },
}
```

For images sourced from an external CMS or CDN, add the domain to `images.remotePatterns`. For any images that cannot use `next/image` (e.g., in markdown content), pre-convert with `npx @squoosh/cli --webp -d output/ input/*.jpg` as part of your content pipeline. Confirm the format switch with `curl -H "Accept: image/avif" https://yoursite.com/image` and inspect the `Content-Type` response header.

## Detection

- **ID:** `image-formats`
- **Severity:** `low`
- **What to look for:** Count all image references across the codebase. Enumerate how many use `next/image` (automatic format optimization), `<picture>` elements with `<source>` for format variants, or `srcset` attributes. Count how many use raw `<img>` tags with only legacy formats (JPEG, PNG, GIF). At least 80% should use modern format delivery.
- **Pass criteria:** At least 80% of images use `next/image`, `<picture>` with WebP/AVIF `<source>`, or an image CDN that auto-optimizes formats. No single image exceeds 1 MB without optimization. Report: "X of Y images use modern format delivery."
- **Fail criteria:** Fewer than 80% of images use modern format delivery, or at least 1 image exceeds 1 MB without optimization.
- **Skip (N/A) when:** No images present in any page component.
- **Detail on fail:** `"5 of 20 images use next/image (25%); remaining 15 are raw <img> with JPEG/PNG only"` or `"Banner image 5.2 MB uncompressed without optimization"`.
- **Remediation:** Use `next/image` in your components or a tool like Cloudinary to serve next-gen formats with fallbacks:

  ```tsx
  import Image from 'next/image'

  <Image
    src="/image.webp"
    alt="Description"
    width={800}
    height={600}
    priority
  />
  ```

---

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance, findability

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