The srcset Attribute Explained — Width Descriptors and Resolution Switching

How the srcset Attribute Works

The srcset attribute is an HTML feature that allows you to provide multiple image sources at different widths, letting the browser choose the best one for the current device.

Width Descriptors

Each entry in the srcset consists of a URL followed by a width descriptor:

<img
  src="hero-1280w.jpg"
  srcset="hero-320w.jpg 320w,
          hero-640w.jpg 640w,
          hero-1024w.jpg 1024w,
          hero-1280w.jpg 1280w"
  sizes="100vw"
  alt="Hero image"
/>

The 320w descriptor tells the browser that hero-320w.jpg is 320 pixels wide. This is the intrinsic width of the image file, not the CSS display width.

How the Browser Selects an Image

The browser combines the srcset widths with the sizes attribute and the device pixel ratio (DPR) to calculate which image to download:

1. Parse sizes to determine the CSS display width (e.g., 100vw = full viewport width)
2. Multiply by device pixel ratio (e.g., 375px viewport × 2x DPR = 750px needed)
3. Select the smallest image from srcset that is >= the needed width (in this case, hero-1024w.jpg)

Key Rules

• Always include the sizes attribute when using width descriptors — without it, the browser assumes 100vw
• The src attribute serves as the fallback for browsers that don't support srcset
• The browser may cache and reuse a larger image even when a smaller one would suffice
• You cannot force the browser to use a specific image — the selection is advisory