A 1600px hero photo on a 375px phone wastes ~80% of the bytes. srcset lets the browser pick the right size.
Width-based srcset (the common case)
<img src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Campus" loading="lazy" width="800" height="450">Reading it: "I have 400/800/1600px versions; on small screens I display full-width, otherwise 800px — browser, do the math (including retina 2x) and fetch the best one."
picture = art direction (different crops)
<picture> <source media="(max-width: 600px)" srcset="portrait-crop.jpg"> <img src="wide-crop.jpg" alt="..."> </picture>
srcset = same image, different sizes. picture = different images per context. That one line is the interview answer.
- Generate sizes automatically with Squoosh CLI or your build tool
- Keep width/height attributes — they prevent layout shift regardless of which source loads