The srcset attribute gives the browser multiple image candidates so it can pick the right file for DPR and layout width. The production pitfall is shipping large images or mismatched sizes, which wastes bandwidth and makes responsive image debugging harder.
Interview answer drill
Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
What is the purpose of the srcset attribute in the <img> tag?Frontend interview answer
Interview focus
This HTML interview question tests whether you can explain HTML img srcset: responsive images, sizes, and performance debugging, connect it to production trade-offs, and handle common follow-up questions.
- HTML img srcset: responsive images, sizes, and performance debugging explanation without falling back to memorized docs wording
- Images and Srcset reasoning, edge cases, and production failure modes
- How you would answer the most likely HTML interview follow-up
Interview quick answer
Full interview answer
Overview
The srcset attribute gives the browser a set of image candidates so it can choose based on device pixel ratio and layout width. Under the hood, this is a performance feature, not just a syntax trick. The common pitfall is providing srcset without accurate sizes or asset widths, which causes blurry images, oversized downloads, or confusing network debugging.
Term | Meaning |
|---|---|
| Specify image density for standard or Retina screens. |
| Specifies the image’s intrinsic width for responsive design. |
| Tells the browser how much space the image will occupy. |
Example: Resolution Switching
HTML
<img src="image-1x.jpg"
srcset="image-1x.jpg 1x, image-2x.jpg 2x"
alt="Mountain landscape">
High-density screens automatically load image-2x.jpg, while standard screens use image-1x.jpg.
Example: Responsive Widths
HTML
<img src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
alt="Sunset over the city">
The browser calculates which image fits best based on current viewport width — no JavaScript needed.
Practical scenario
A product card needs responsive images for mobile, tablet, and desktop, so you use srcset and sizes to match device width.
Common pitfalls
- Omitting
sizes, which makes the browser guess and over-download. - Using the wrong descriptors (w vs x), leading to blurry or heavy images.
- Not providing a reasonable
srcfallback.
Higher-res images improve quality but cost bandwidth. Test on throttled network and inspect the chosen resource in DevTools.
Still so complicated?
Think of srcset as giving the browser a menu of images — it chooses the one that fits best on the user’s device.
Summary
srcsetenables responsive and high-resolution images.- Improves load time by avoiding unnecessary large images.
- Crucial for performance and responsive design.
<li>Used together with sizes for adaptive layouts.Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the HTML interview questions cluster or a guided prep path.