# Image CDN or optimization pipeline is configured

- **Pattern:** `ab-001800` (`marketing-page-speed.infrastructure.image-cdn-pipeline`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001800
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001800)

## Why it matters

Serving images as static files from `public/` without an optimisation pipeline means every visitor — regardless of device, screen resolution, or browser — downloads the same full-resolution, original-format file. A desktop hero image at 2400×1600 sent to a mobile user at 375px width wastes 85–90% of the downloaded pixels. ISO-25010 resource-utilisation explicitly covers this kind of inefficiency: transferring significantly more data than the client can use. An image CDN or optimisation pipeline automatically serves WebP to browsers that support it (95%+), resizes to the requested display size, and compresses to the optimal quality — typically reducing hero image payload by 60–80% compared to an unoptimised JPEG.

## Severity rationale

High because an absent image optimisation pipeline forces every visitor to download full-resolution source files, wasting bandwidth and adding hundreds of milliseconds to LCP on mobile.

## Remediation

Enable Next.js Image Optimization by using the `<Image>` component — on Vercel this is fully automatic and requires no additional configuration.

```ts
// next.config.ts — configure remote image sources if using a CMS
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cms.example.com' }
    ],
    formats: ['image/avif', 'image/webp'], // serve modern formats when supported
  }
}
```

For local builds without Vercel, install `sharp` to enable optimisation:

```bash
npm install sharp
```

For non-Next.js projects or CMS-driven images, use Cloudinary URL transformation:

```tsx
<img
  src="https://res.cloudinary.com/account/image/upload/f_auto,q_auto,w_800/hero.jpg"
  alt="Hero"
/>
```

`f_auto` selects WebP/AVIF automatically; `q_auto` picks the optimal compression quality; `w_800` resizes to the display width.

## Detection

- **ID:** `image-cdn-pipeline`
- **Severity:** `high`
- **What to look for:** An image CDN or optimization pipeline automatically serves images in the right format, size, and quality for each device and browser. Check: (1) `next.config.*` for `images.domains` or `images.remotePatterns` configuration (indicating remote image sources through Next.js Image Optimization), (2) Cloudinary, Imgix, or Bunny.net URLs in image sources, (3) Vercel Image Optimization (built-in with Next.js on Vercel), (4) `@unpic/react` or similar universal image optimization package, (5) `sharp` in dependencies (used by Next.js Image Optimization for local builds). Count all instances found and enumerate each.
- **Pass criteria:** Images are routed through an optimization pipeline that converts to WebP/AVIF and resizes on demand. This is satisfied by: Vercel + Next.js Image (automatic), Cloudinary, Imgix, or Bunny.net. At least 1 implementation must be confirmed.
- **Fail criteria:** Images are served as static files from `public/` without any optimization pipeline. Browser receives full-resolution, original-format images regardless of device.
- **Skip (N/A) when:** Site has no images.
- **Detail on fail:** `"No image CDN or optimization pipeline detected. Images served from public/ as static files — no format conversion, no responsive resizing. Each visitor downloads the same large file regardless of device."`
- **Remediation:** Enable the image optimization pipeline for your hosting:

  ```ts
  // next.config.ts — Next.js Image Optimization (uses sharp locally)
  const nextConfig = {
    images: {
      // Allow images from your CMS or external sources
      remotePatterns: [
        { protocol: 'https', hostname: 'cms.example.com' }
      ],
      // Vercel Image Optimization handles format conversion automatically
      formats: ['image/avif', 'image/webp'],
    }
  }
  ```

  For non-Vercel hosting, add the `sharp` package for local optimization:

  ```bash
  npm install sharp
  ```

  Or use Cloudinary for hosted optimization:

  ```tsx
  // Cloudinary URL transformation
  <img
    src="https://res.cloudinary.com/account/image/upload/f_auto,q_auto,w_1200/hero.jpg"
    alt="Hero"
  />
  ```

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance

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