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