How does the srcset attribute work?

The srcset attribute on <img> elements lets you provide multiple image sources at different resolutions or widths, and the browser automatically picks the most appropriate one based on the device's screen size and pixel density. Instead of serving a single image to all devices (wasting bandwidth on phones or looking blurry on retina displays), srcset enables responsive image loading — small images for small screens, high-resolution images for retina displays, all without any JavaScript.

Density descriptors tell the browser which image to use based on the device pixel ratio (DPR). A 2x descriptor means that image has twice the pixels of the displayed size — perfect for retina screens. This approach works best for fixed-size images like logos, icons, and avatars where the CSS dimensions don't change across viewports.

<!-- Fixed-size logo: always displayed at 150×50 CSS pixels -->
<img
  src="/logo-150.png"
  srcset="
    /logo-150.png 1x,
    /logo-300.png 2x,
    /logo-450.png 3x
  "
  width="150"
  height="50"
  alt="Company logo"
/>

<!-- How the browser decides:
  DPR 1 (standard display) → downloads logo-150.png (150×50 actual pixels)
  DPR 2 (retina MacBook)   → downloads logo-300.png (300×100 actual pixels)
  DPR 3 (iPhone Pro)       → downloads logo-450.png (450×150 actual pixels)

  The src attribute is the fallback for browsers that don't support srcset.
-->

Width descriptors are more powerful — you tell the browser the actual pixel width of each source image, and the sizes attribute tells it how wide the image will be displayed at different viewport widths. The browser combines this information with the device's DPR to calculate exactly which source to download. This is the approach for responsive images that change size based on the layout.

<!-- Responsive hero image that changes size with viewport -->
<img
  src="/hero-800.jpg"
  srcset="
    /hero-400.jpg 400w,
    /hero-800.jpg 800w,
    /hero-1200.jpg 1200w,
    /hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    800px
  "
  alt="Hero banner"
/>

<!-- Reading the sizes attribute:
  - Viewport ≤ 640px  → image displays at 100% viewport width
  - Viewport ≤ 1024px → image displays at 50% viewport width
  - Otherwise         → image displays at 800px

  Browser calculation example (phone, 375px wide, 2x DPR):
    Display width = 375px (100vw)
    Pixels needed = 375 × 2 = 750
    Picks: hero-800.jpg (closest source ≥ 750w)

  Browser calculation example (laptop, 1440px wide, 2x DPR):
    Display width = 800px (fixed from sizes)
    Pixels needed = 800 × 2 = 1600
    Picks: hero-1600.jpg
-->

The browser's selection algorithm considers the viewport width, the device pixel ratio, the sizes attribute, and potentially network conditions. Importantly, the browser has full discretion — it might choose a smaller image on a slow connection even if a larger one would be ideal. This is by design: srcset is a hint, not a command.

This question tests your understanding of responsive images and performance optimization. Interviewers want to see that you know the difference between density and width descriptors, understand how sizes works with width descriptors, can explain why the browser (not the developer) makes the final choice, and know when to use srcset vs the picture element.