# Images use srcset or responsive image component for different screen sizes

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

## Why it matters

A 2400px-wide hero image displayed at 600px on mobile forces the device to download and decode four times the necessary pixel data — typically 3–8x the file size of an appropriately sized image. On 4G, this adds 300–800ms of avoidable load time; on 3G it can exceed 2 seconds. Mobile users represent over 60% of web traffic globally, and delivering desktop-sized assets to them is a direct resource waste that ISO 25010 performance-efficiency.resource-utilization identifies as disproportionate consumption. `srcset` is the standard browser mechanism for this, and frameworks like Next.js automate it completely.

## Severity rationale

Low because most browsers on modern connections absorb the cost without visible failure, but the waste accumulates at scale across millions of mobile visits.

## Remediation

Add `srcset` and `sizes` attributes to content images wider than 400px, or use the Next.js `Image` component which handles responsive sizing automatically. Generate multiple resolution variants during the build step using Sharp, ImageMagick, or an image CDN like Cloudinary.

```tsx
// Before — single large image for all screen sizes
<img src="/hero-2400.jpg" alt="Hero" />

// After — browser selects the right size
<img
  src="/hero-800.jpg"
  srcSet="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, (max-width: 1280px) 80vw, 1200px"
  alt="Hero"
  width={1600}
  height={900}
/>

// Next.js — responsive handled automatically with sizes prop
import Image from 'next/image'
<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  sizes="(max-width: 640px) 100vw, 80vw"
/>
```

## Detection

- **ID:** `responsive-images`
- **Severity:** `low`
- **What to look for:** Count all content images (hero, product, blog) that are displayed at different sizes across breakpoints. For each, check whether `srcset` is present, or a responsive image component (Next.js Image with `sizes` prop) handles multiple resolutions. Mobile users should not download desktop-sized images. Report: "X of Y content images use srcset or responsive sizing."
- **Pass criteria:** At least 80% of content images wider than 400px use `srcset` with at least 2 resolutions, or a responsive image component automatically handles different screen sizes. No more than 2 large content images lack responsive sizing. Desktop-only images are not sent to mobile devices.
- **Fail criteria:** 3 or more content images wider than 400px are a single size without srcset or responsive sizing, causing mobile users to download unnecessarily large images.
- **Skip (N/A) when:** No responsive design requirement detected, all images are under 400px wide, or the project uses fewer than 3 content images total.
- **Detail on fail:** `"0 of 5 content images use srcset — hero image is 2400px wide but displayed at max 1200px on mobile"` or `"1 of 8 product images has srcset — mobile users download desktop-sized files for the other 7"`
- **Remediation:** Serve responsive images:

  ```tsx
  // Before — same image for all screen sizes
  <img src="/hero.jpg" alt="Hero" />

  // After — srcset for multiple sizes
  <img
    src="/hero-800.jpg"
    srcSet="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
    sizes="(max-width: 640px) 100vw, 80vw"
    alt="Hero"
  />

  // Next.js Image handles responsive automatically
  <Image src="/hero.jpg" alt="Hero" width={1600} height={900} responsive />
  ```

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance

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