Resolution switching serves the same composition at different sizes. Art direction serves a different crop or composition because the original becomes unreadable in a narrow slot. That editorial change belongs in picture source media conditions, while the nested img remains the semantic and fallback image.
Keep the subject legible across layouts without hiding essential context or duplicating alternative text.
Repeatable method
1. Define the editorial problem
Write what disappears in the narrow crop: a person, label, product detail, or chart annotation. If nothing important changes, ordinary srcset may be enough.
2. Create intentional crops
Export crops from the same master, keep color and timing aligned, and name them by role rather than device.
3. Write source order carefully
Place specific media conditions before the fallback img. The alt text belongs on the img and should describe the shared meaning of all crops.
<picture>
<source media="(max-width: 640px)" srcset="bench-close-640.webp">
<source media="(min-width: 641px)" srcset="bench-wide-1600.webp">
<img src="bench-wide-1600.jpg" width="1600" height="900" alt="Compression test bench with three output previews">
</picture>4. Test content continuity
At each breakpoint, verify that nearby text still refers to something visible and that focal subjects do not jump unexpectedly.
Worked crop plan
This illustrative fixture makes the art-direction decision auditable before any performance measurement begins. It uses one shared scene, two deliberate crops, and one unchanged text alternative because the meaning stays the same.
| Layout | Editorial intent | Candidate | Check before release |
|---|---|---|---|
| Up to 640px | Keep the output previews and dial readable | bench-close-640.webp |
The caption still describes visible content |
| 641px and wider | Show the complete test bench and surrounding context | bench-wide-1600.webp |
The focal subject does not shift at the breakpoint |
| Fallback | Preserve meaning when a source is unsupported | bench-wide-1600.jpg |
Intrinsic dimensions and alt text remain present |
The filenames and dimensions above document the markup decision; they are not claimed performance results. Record real bytes, encoder settings, screenshots, and browser versions only after exporting and testing the actual files.
What to record
Record every crop dimension, media condition, fallback, file size, focal subject, alt text, and viewport screenshots near each breakpoint. Include who approved the editorial crop.
A result belongs to the source file, encoder, settings, browser, viewport, cache state, and date that produced it. Repeat the test on representative files before changing a production workflow.
Common mistakes
- Using picture only for format negotiation when srcset would be simpler
- Writing different alt text on source elements
- Cropping out information referenced in the caption
- Forgetting a src on the fallback img
Verification checklist
Disable CSS, inspect the DOM, resize across breakpoints, verify the current source in Network, and test screen-reader output. Confirm Google can find the fallback URL and the landing-page context remains accurate.
Primary references
Related lab notes
About this guide
We distinguish documented platform behavior from our workflow recommendations. See the testing methodology, editorial policy, and corrections log.