When should you reach for HTML's <picture> element instead of putting srcset on a plain <img>?

## Two problems that look like one Responsive images cover two genuinely different needs, and almost every mistake in this area comes from treating them as the same problem. **Resolution switching** means: this is one photograph, and I want the browser to download a copy whose pixel dimensions suit this screen. A 400 px wide slot on a 2x phone wants roughly 800 real pixels; the same slot on a 1x laptop wants 400. Every candidate shows the identical subject, identical crop, identical framing. They are interchangeable — only the byte count and pixel count differ. **Art direction** means: the image is not the same image. A hero photo that reads beautifully as a 16:9 landscape at 1600 px becomes an unreadable smear of background when squeezed into a 375 px phone column, because the subject is now forty pixels tall. What you actually want on the phone is a *different* crop — tight on the face, maybe a different aspect ratio, sometimes a different photo altogether. A third case behaves like art direction mechanically even though it is about bytes: **format negotiation**, where you want to serve AVIF or WebP to browsers that can decode them and a JPEG or PNG to the rest. ## The rule Interchangeable candidates → `srcset` on `<img>`, and let the browser choose. Non-interchangeable candidates → `<picture>`, and *you* choose. That is the whole answer, and the reason is a specification-level design decision: the browser is explicitly allowed to ignore your `srcset` preference. It may pick a larger candidate because it is already in cache, or a smaller one on a metered connection, or a different one on a zoomed page. That freedom is safe when all candidates show the same thing and catastrophic when one of them is a square crop. `<picture>` with `media` is a *directive*, not a hint: the first `<source>` whose conditions match wins, and the browser does not second-guess it. ## What picture looks like ```html <picture> <source media="(min-width: 800px)" srcset="hero-wide.jpg"> <source media="(min-width: 500px)" srcset="hero-portrait.jpg"> <img src="hero-square.jpg" alt="Ada at the analytical engine" width="600" height="600"> </picture> ``` The browser walks the `<source>` children in document order and takes the **first** whose `media` matches the current viewport (and whose `type`, if present, it can decode). It never looks at later sources once one matches, so order is your priority list. If nothing matches, the `<img>` is used. Note what is *not* here: no `src` on `<source>`. Inside `<picture>`, `<source>` carries `srcset` (plus optional `sizes`, `media`, `type`, `width`, `height`). The `src` attribute belongs to `<source>` inside `<video>` and `<audio>`, and writing it here silently produces nothing. ## Format fallback is the same mechanism ```html <picture> <source type="image/avif" srcset="photo.avif"> <source type="image/webp" srcset="photo.webp"> <img src="photo.jpg" alt="Harbour at dawn"> </picture> ``` A browser skips any `<source>` whose `type` it cannot decode and moves to the next, so the JPEG on the `<img>` is the universal floor. Ordering runs most-modern first, because first match wins. ## The two can be combined `<picture>` does not replace `srcset` — it wraps it. Each `<source>` may carry a full `srcset`/`sizes` pair, so you pick the *crop* with `media` and still let the browser pick the *resolution* within that crop. That is the correct shape for an art-directed hero on a site that also serves high-DPI screens. ## Costs to be honest about `<picture>` multiplies your asset matrix: crops times formats times widths. Three breakpoints, two formats and three widths is eighteen files that must all be generated, cached and invalidated together. It also creates a second copy of your breakpoint values — the `media` queries live in HTML while the layout breakpoints live in the stylesheet, and nothing keeps them in sync but discipline. So `<picture>` is not the default; `srcset` on `<img>` is the default, and `<picture>` is what you escalate to when the candidates genuinely stop being interchangeable. ## The tell in an interview Candidates who answer "picture is the modern way to do responsive images" have memorised a slogan. Candidates who answer "picture when the image changes, srcset when only its size changes" have understood the model, and they will usually add the corollary unprompted: the `<img>` is not optional, because it is the element that renders.