Art direction with HTML's <picture> means shipping a separate crop per breakpoint. Across a large site, how do you decide which images earn that, and how do you keep the markup from becoming unmaintainable?
answer
- the exception must be argued for
- crops times formats times widths
- breakpoints duplicated in two places
- one accessible name for every crop
- authors call a component, not picture
basics
~20 sReserve art direction for a small set of images where a single crop genuinely fails — heroes with an off-centre subject, images carrying text. Everything else gets one well-composed file with srcset. Generate the markup from a component so crops, formats and breakpoints come from one source.
solid answer
~50 sI treat art direction as an exception that must be argued for, because each one multiplies an asset matrix — crops times formats times widths — that has to be generated, cached, invalidated and reviewed forever. The images that earn it are few and identifiable: full-bleed heroes whose subject sits off-centre, images with baked-in text that becomes illegible when scaled, and product shots whose framing carries meaning. Everything else, which is most of a catalogue, gets one well-composed asset and `srcset` on a plain `<img>`. Then I make the decision structural rather than per-page: one image component emits the `<picture>`, the crops come from a pipeline keyed to named breakpoint tokens shared with the stylesheet, and hand-written `<picture>` in page markup is a review finding. The failure mode I am guarding against is not verbosity — it is a breakpoint changing in CSS and nobody updating the sixty `media` attributes that duplicated it.
go deeper
Know that picture is the exception rather than the default, and that most images only need one well-composed file with srcset for different sizes.
Be able to name the concrete costs — the crops-times-formats-times-widths matrix and the breakpoint values duplicated between markup and stylesheet — rather than saying picture is verbose.
Argue the decision rule with examples: which images fail with a single crop and why, and what you do instead for the ones that do not. Show that you would generate the markup rather than hand-author it.
Own the policy and its enforcement: where crops are produced, how breakpoints are single-sourced across markup and design, what the review rule is, and how you retire variants when a design drops a breakpoint.
## The real cost is not the markup A `<picture>` block looks like six extra lines. That is not what makes art direction expensive. The costs that actually bite are: **Asset combinatorics.** Crops times formats times widths. Three crops, two modern formats plus a fallback, three widths is 27 files per image. Every one must be generated, stored, served, cache-keyed and invalidated together — and when the design changes, regenerated together. **A duplicated source of truth for breakpoints.** The `media` attributes hard-code viewport thresholds that also exist in the stylesheet. Nothing in the platform keeps them in sync. When a layout breakpoint moves from 900 px to 1024 px, every hand-written `media` in the codebase is now wrong in a band no one tests. **One alt for many crops.** A `<picture>` exposes a single `<img>` with a single accessible name. If the desktop crop and the mobile crop genuinely show different things, no one string is honest for both — which is a strong signal the art direction has drifted from "reframing" into "two different images". **Review surface.** Combined `media` and `type` markup has a structural trap — every crop group needs an untyped fallback entry or a browser that matches the crop but not the format falls through to a completely different crop. Humans get this wrong reliably. ## The decision rule Start from a default of *no* art direction, and require a specific failure to override it. The cases that genuinely qualify: - **Off-centre subject in a full-bleed image.** At 1600 px the composition works; at 375 px the subject is forty pixels tall and the frame is background. - **Aspect ratio that must change.** A 21:9 banner is unusable as a phone hero; the mobile design calls for something near square. - **Text baked into the image.** Scaling makes it illegible, and scaling is exactly what `srcset` does. - **Meaning carried by framing.** A product shot where the detail is the point. Cases that do *not* qualify, and that people mistake for art direction: the image is merely too large on mobile (that is resolution switching — `srcset`); the image needs a different format (that is `<source type>`, no crops involved); the image should be hidden on small screens (a content decision, and hiding it is not what `<picture>` is for). In practice this puts art direction on a handful of templates — home hero, campaign landing pages, maybe editorial leads — and leaves the thousands of catalogue images on a single asset. ## Making it structural Once the *when* is settled, the *how* is an engineering-discipline problem: 1. **One image component.** Page authors never write `<picture>`. They call a component with an asset id and an intent (`hero`, `thumb`, `inline`), and the component emits the correct source list, the correct order, the untyped fallback per crop group, and the `<img>` with `alt`, `width` and `height`. 2. **Breakpoints as shared tokens.** The component reads named breakpoints from the same definition the stylesheet uses. A breakpoint change updates both. Hand-typed pixel values in `media` are the defect to eliminate. 3. **Crops generated, not hand-cut.** A pipeline or image service produces each crop from a master, driven by a declared focal point rather than a designer's manual export, so a re-crop is a config change. 4. **A lint or review rule** that rejects raw `<picture>` in page templates, and a check that every crop group in generated output ends with an untyped candidate. 5. **Delete aggressively.** When a design drops a breakpoint, the crops for it must go. Pre-production, unused variants are dead weight, not compatibility. ## The tradeoff to be able to defend The alternative to art direction is *composition discipline*: commission or crop one asset that works from 320 px to 2560 px, usually by keeping the subject centred with generous safe margins. That is often cheaper and always more robust — one file, one alt, no breakpoint duplication, no matrix. The reason to accept art direction anyway is that some images carry real product value in their framing, and a compromise crop that works everywhere works well nowhere. A principal-level answer names both sides and puts the burden of proof on the exception. ## What a weak answer sounds like "We use `<picture>` everywhere so images are responsive." That confuses the mechanism with the goal, guarantees the asset matrix and the breakpoint duplication for images that gain nothing, and usually comes with hand-written markup that will be wrong within two design revisions.
- Which specific image cases actually justify a separate crop?Full-bleed images with an off-centre subject that disappears when narrowed, designs where the aspect ratio must genuinely change between phone and desktop, images with text rendered into the pixels, and shots where framing carries product meaning. "It is too big on mobile" is not on that list — that is resolution switching, and `srcset` on a plain `<img>` handles it.
- How would you catch a breakpoint drift between the media attributes and the stylesheet?Remove the possibility rather than detect the symptom: emit both from one set of named breakpoint tokens so a change lands in both places at once. Where legacy markup exists, a lint rule that rejects literal pixel values in `media` attributes finds the hand-typed stragglers, since drift itself is invisible except in a narrow untested viewport band.
- A designer asks for four crops of every catalogue image. How do you push back?Quantify it: four crops times three formats times three widths is 36 files per product, plus regeneration on every design revision, plus one alt string that must honestly describe all four framings. Then offer the alternative — one asset composed with a centred subject and safe margins — and reserve art direction for the handful of templates where framing is genuinely part of the message.
saying these in an interview costs you the question
- use picture for every image, it is the modern way
- art direction just means smaller files on mobile
- hand-write the source list per page, it is only a few lines
- one alt works fine no matter how different the crops are
- keep old crops around in case the design reverts