Responsive Images

Analogy categoryAnalogies

Introduction

Responsive images solve a performance and quality problem: a single large image looks great on a desktop monitor but wastes bandwidth on a small phone screen, while an image sized for phones looks blurry on a high-resolution desktop display. HTML provides the srcset and sizes attributes on the img element, plus the picture element, so the browser can automatically pick the best image source based on screen size, pixel density, and even image format support.

🏏

Cricket analogy: Just as a stadium broadcasts different camera feeds to a giant scoreboard screen versus a fan's phone during an IPL match, srcset and sizes let the browser pick an image sized for the actual screen instead of forcing everyone to download the jumbotron-quality file.

Syntax

html

<!-- srcset with width descriptors + sizes -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         33vw"
  alt="A scenic mountain view">

<!-- picture element with format fallback and art direction -->
<picture>
  <source srcset="hero-wide.avif" media="(min-width: 800px)" type="image/avif">
  <source srcset="hero-tall.avif" type="image/avif">
  <source srcset="hero-wide.jpg" media="(min-width: 800px)" type="image/jpeg">
  <img src="hero-tall.jpg" alt="Hero banner image">
</picture>

Explanation

In the srcset example, each URL is paired with a width descriptor (e.g., 400w means the image is 400 pixels wide intrinsically). The sizes attribute tells the browser how much viewport width the image will actually occupy at different breakpoints — for example, full viewport width (100vw) below 600px, half width (50vw) below 1000px, and a third of the width (33vw) otherwise. The browser combines sizes with the device's pixel density and viewport width to calculate which candidate in srcset is the best fit, then downloads only that one file. The picture element goes further: it lets you swap not just resolution but the entire image (art direction) or file format, listing source elements in order of preference with the browser picking the first matching one and falling back to the img element if none match.

🏏

Cricket analogy: Like a match referral system checking replay resolution against the stadium's giant screen size before choosing which camera angle to display, the browser combines the sizes hint (viewport width at each breakpoint) with pixel density to pick the single best srcset candidate to download.

Example

html

<!-- Pixel-density based srcset (simpler case, no sizes needed) -->
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Company logo"
  width="120"
  height="40">

Use width descriptors (400w) with the sizes attribute when the image's displayed size varies by layout. Use pixel-density descriptors (1x, 2x) when the image is always displayed at the same CSS size but needs sharper versions for high-DPI (Retina) screens, such as logos or icons.

Key Takeaways

srcset lists candidate image files with width (w) or pixel-density (x) descriptors; sizes tells the browser how wide the image will render at each breakpoint.
The browser — not the developer — chooses the best-fit image from srcset, based on viewport size and device pixel ratio.
The picture element supports art direction (different crops per breakpoint) and format negotiation (e.g., AVIF/WebP with JPEG fallback).
Always keep a base src (or a final img inside picture) as a fallback for browsers that don't support these features.
Responsive images reduce bandwidth usage and improve load performance, especially on mobile networks.