Responsive image automation starts with the layout slot, not the source dimensions. Generate a small set of useful widths and tell the browser how wide the image will appear. A single giant image with CSS width set to 100% still transfers unnecessary bytes to many visitors.
Measure the slot
Record the rendered width at mobile, tablet, and desktop breakpoints. Add a sensible high-density candidate without generating every possible width. The sizes attribute describes the slot; srcset lists the available candidates. If sizes is wrong, the browser may choose a larger or smaller file than intended.
Preserve the art direction
Resolution switching and art direction are different tasks. Use one composition at several widths for ordinary responsive loading. If the subject needs a different crop on mobile, use separate sources and document who approves each crop. An automatic center crop can be fast but visually wrong.
Include format fallback
Choose formats supported by your audience’s browsers and keep a reliable fallback. Check transparency, animation, and screenshot text before converting everything under one rule. The fastest format is not useful if it changes the image’s purpose.
Verify in a browser
Inspect the chosen image request at each breakpoint, the rendered size, and visual sharpness. Test a slow connection and a high-density device. The winning result is a clear image that fits the slot with no oversized download or clipped subject.
A concrete example
A card is 340 pixels wide on a phone and 420 pixels on desktop. Candidate images near those slot widths, with an appropriate high-density option, are more useful than serving the original 4000-pixel source. Inspect the browser’s chosen request, because an incorrect sizes value can defeat the whole setup.
Related reading
- Media Workflow Automation: A Practical Starting Guide
- Build an Image Transformation Pipeline From One Master
- Video Transcoding Workflow: From Master File to Playback
Primary reference
The MDN responsive images guide provides the underlying technical reference for this workflow.
Related field note
Continue with A decision matrix for human review gates.