Images use srcset or responsive image component for different screen sizes

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.

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.

// 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"
/>

• ID: performance-load.images.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:

  // 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 />