# Images use modern formats (WebP, AVIF) or Next/Image component

- **Pattern:** `ab-002053` (`performance-load.images.image-format`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002053
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002053)

## Why it matters

Serving legacy JPEG or PNG images without optimization adds hundreds of kilobytes to every page load that could be eliminated with no visual quality loss. WebP typically cuts image weight by 25–34% over JPEG, and AVIF by 50% over JPEG at equivalent quality — directly affecting Largest Contentful Paint (LCP), a Core Web Vitals metric Google uses for search ranking. On mobile connections, unoptimized images are the single largest contributor to slow page loads and high bounce rates. ISO 25010 performance-efficiency.resource-utilization classifies this as a resource waste that degrades end-user experience at scale.

## Severity rationale

High because legacy-format content images consistently account for the largest avoidable payload on web pages, directly degrading LCP scores and search ranking.

## Remediation

Replace plain `<img>` tags with the Next.js `Image` component, or convert image files to WebP/AVIF and use `<picture>` elements for format fallback. For bulk conversion, run ImageMagick's `convert input.jpg -quality 82 output.webp` or pipe through a CI step. In Next.js:

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

// Replaces: <img src="/hero.jpg" alt="Hero" />
<Image src="/hero.webp" alt="Hero" width={1200} height={630} priority />

// Or use <picture> for non-Next.js stacks
<picture>
  <source srcSet="/hero.avif" type="image/avif" />
  <source srcSet="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero" width={1200} height={630} />
</picture>
```

## Detection

- **ID:** `image-format`
- **Severity:** `high`
- **What to look for:** Count all `<img>` tags, CSS background images, and Image components across the project. For each, classify as: (a) modern format (WebP, AVIF), (b) framework-optimized (Next.js Image, Nuxt img, Astro Image), or (c) legacy unoptimized (JPEG, PNG without optimization pipeline). Enumerate the results as "X of Y images use modern formats or optimization components."
- **Pass criteria:** At least 90% of content images use WebP, AVIF, or are served through a framework image optimization component (Next.js Image, Nuxt img, Astro Image, etc.). No more than 2 legacy-format content images exist without optimization. Small utility images (favicons, tiny icons under 5KB) in legacy formats may be noted but do not cause a fail. Report: "X of Y content images use modern formats or optimization components."
- **Do NOT pass when:** The project uses a framework Image component in some places but still has 3 or more legacy-format content images rendered via plain `<img>` tags without optimization.
- **Fail criteria:** Content images (hero images, product photos, blog imagery) are legacy formats (JPEG, PNG) without modern format alternatives or optimization components. Report: "X of Y content images are unoptimized legacy formats."
- **Skip (N/A) when:** No images detected in the project (0 `<img>` tags, 0 CSS background images, 0 Image component usages found).
- **Detail on fail:** `"4 of 7 content images are PNG/JPEG without WebP alternatives — Image component not used in hero.tsx, Card.tsx, About.tsx, Footer.tsx"` or `"12 of 15 JPEG files in public/ served via plain <img> without Next.js Image optimization"`
- **Remediation:** Use modern image formats and framework optimization:

  ```tsx
  // Before — legacy format, not optimized
  <img src="/logo.png" alt="Logo" />

  // After — modern format with Next.js Image
  import Image from 'next/image'
  <Image src="/logo.webp" alt="Logo" width={100} height={100} priority />

  // Or use picture element for format fallback
  <picture>
    <source srcSet="/hero.avif" type="image/avif" />
    <source srcSet="/hero.webp" type="image/webp" />
    <img src="/hero.jpg" alt="Hero" />
  </picture>
  ```

  For batch conversion, use tools like ImageMagick or online converters to create WebP versions of your images.

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance

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