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.