Responsive images with srcset and sizes

A 2400-pixel-wide hero image served to a 375-pixel mobile viewport transfers 1.2 MB to display roughly 110 KB of visual information (ISO-25010 resource-utilisation). Without srcset and sizes, the browser has no signal to choose a smaller variant — it downloads the full-resolution image regardless of device. Multiply that across ten images on a product page and mobile users are downloading 10x the pixels they can display, with proportional impact on page weight, LCP, and data cost.

Add srcset with width variants and sizes that match your actual layout breakpoints:

<img
  src="/images/product-600w.jpg"
  srcset="/images/product-300w.jpg 300w,
          /images/product-600w.jpg 600w,
          /images/product-1200w.jpg 1200w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
  alt="Product"
  width="600"
  height="400"
/>

With Next.js, provide a sizes prop and the framework generates srcset automatically:

<Image
  src="/images/product.jpg"
  alt="Product"
  width={600}
  height={400}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

The sizes value must reflect the actual rendered width, not just viewport width — an image in a two-column grid at 1200px is 50vw, not 100vw.

• ID: responsive-images

• Severity: medium

• What to look for: Check <img> tags for srcset and sizes attributes, or next/image usage with breakpoints. Look for image variants at different resolutions (1x, 2x, or width-based srcset). Verify sizes attribute matches layout (e.g., sizes="(max-width: 768px) 100vw, 50vw").

• Pass criteria: Images use srcset with multiple resolution variants (at minimum 1x and 2x), and sizes attribute reflects actual layout. Or next/image is used with responsive width handling. Users on low-bandwidth connections and smaller devices receive appropriately sized images.

• Fail criteria: No srcset or sizes attributes; same image served to all devices regardless of viewport width or device pixel ratio. High-resolution images served to mobile devices unnecessarily.

• Skip (N/A) when: All images are small (under 100KB) or the same aspect ratio on all viewports.

• Detail on fail: Specify the responsive design gaps. Example: "Hero image 2400px wide always served; mobile users download 1.2MB image for 375px viewport. No srcset or responsive handling" or "srcset present but sizes attribute missing; browser can't choose optimal image".

• Remediation: Responsive images match device capabilities and layout:

  <img
    src="image-600w.jpg"
    srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
    alt="Image"
  />
  

  Or with Next.js (handles automatically):

  <Image
    src="/image.jpg"
    alt="Image"
    width={600}
    height={400}
    sizes="(max-width: 768px) 100vw, 50vw"
  />