Detailed explanation
The srcset and sizes attributes on <img> support responsive image loading: they help the browser choose a suitable image resource instead of downloading the same large file on every device. This matters because an image displayed in a small mobile layout may need fewer pixels than one displayed on a desktop or a high-density screen. Unlike CSS resizing alone, responsive image selection can reduce downloaded bytes while preserving visual sharpness. The browser makes the final choice using the supplied candidates, the expected display width, device pixel ratio, and potentially other loading conditions.
In srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w", each w descriptor declares the corresponding file’s intrinsic width in pixels. These values must match the actual image widths; they are not CSS widths or instructions to resize the image. The sizes attribute describes the image’s expected layout width in CSS pixels. In sizes="(max-width: 600px) 480px, 800px", the browser uses 480 CSS pixels when the viewport is at most 600 CSS pixels wide, and otherwise uses 800 CSS pixels. It evaluates conditions in order and uses the first match, with the final unconditional value serving as the default.
Under the hood, the browser relates each candidate’s intrinsic width to the declared display width to calculate its effective pixel density. For a 480-CSS-pixel slot on a 2× display, about 960 physical pixels would be desirable, so the 1200w candidate may be selected. Selection is not a guaranteed nearest-width rule. Crucially, sizes does not control layout: CSS still determines the rendered width. It supplies an early loading hint, allowing image selection before the browser has completed layout. If sizes overstates the actual width, the browser may download unnecessarily large images.
For a fixed display size, srcset can instead use density descriptors such as icon.png 1x, icon@2x.png 2x; sizes is relevant to width descriptors, not density descriptors. Do not mix w and x descriptors in one srcset. The src attribute supplies a fallback for browsers without srcset support. Interviewers expect you to distinguish resource selection from CSS layout and to recognise that different crops or compositions require art direction, commonly implemented with <picture>.
Key points to remember
- srcset lists image URLs with intrinsic-width descriptors (w) or pixel-density descriptors (x).
- sizes describes the expected image slot width in CSS pixels for width-based selection.
- The browser considers slot width and device pixel ratio when choosing a resource.
- sizes does not set the rendered width; it should accurately reflect the CSS layout.
- Use <picture> for art direction, such as selecting different crops at different breakpoints.
Common mistakes candidates make
- Treating sizes as a CSS layout rule or assuming its conditions refer to the image’s own width rather than the viewport.
- Providing incorrect intrinsic-width descriptors or mixing w and x descriptors in one srcset.
- Assuming the browser always downloads one specific candidate regardless of pixel density or loading conditions.
Likely follow-up questions
What happens if sizes is omitted with width descriptors?
The browser normally assumes a slot width of 100vw, meaning the full viewport width. If the image actually occupies a smaller area, this can cause an unnecessarily large candidate to be selected.
When should you use x descriptors instead of w descriptors?
Use x descriptors when the image has a predictable, fixed CSS display size but needs variants for different pixel densities. Use w descriptors with sizes when the displayed width changes across layouts.
How is <picture> different from srcset on <img>?
srcset on <img> primarily lets the browser select a suitable resolution of an image. <picture> adds source selection through media conditions and image types, enabling different crops or formats; its nested <img> remains required.
Interview tip: Explain candidate selection versus layout first, then walk through the supplied example using a 480-CSS-pixel slot on a 2× screen.