HTML picture: switch image composition while keeping one fallback img

Use it for a real task

A wide operations illustration includes context that becomes unreadable on narrow screens. The narrow asset is a separately cropped version, not merely a smaller file. The final img carries the alternative text, fixed dimensions for its fallback, and a source when no source condition matches.

<picture>
  <source media="(max-width: 42rem)"
          srcset="/media/receipt-flow-portrait.webp">
  <img src="/media/receipt-flow-wide.webp"
       width="960" height="420"
       alt="Receipt review moves from intake to approval and export">
</picture>

What the markup guarantees

The two assets must communicate the same essential information. Switching crops changes the visible composition; test both against the alt and nearby text. The picture element itself does not replace the img or own its alt.

Cost and limits

Art direction creates extra editorial assets and cache entries. Use it when composition truly changes, not as a replacement for srcset's size selection.

Common Mistakes

• Do not put alt on source and omit it from img.
• Keep the fallback img available.
• Verify that a narrow crop does not remove the information described in the text.

Connected lessons

• HTML srcset and sizes: let the browser choose an appropriately sized image
• HTML image alt text: describe function or information, not pixels alone
• HTML figure and figcaption: keep an asset with its explanation