Responsive image widths help the browser choose a file size, but sometimes the composition itself should change. The picture element can offer a portrait crop to a narrow screen and a wide crop to a larger one.

<picture>
  <source media="(max-width: 40rem)" srcset="portrait-crop.webp" type="image/webp">
  <source srcset="wide-crop.webp" type="image/webp">
  <img src="wide-crop.jpg" alt="A gardener pruning a young tree" width="1200" height="800">
</picture>

Keep the fallback complete

  • The img element carries the alt text and remains the fallback if no source matches.
  • Order sources from the most specific condition to the general option.
  • Use width and height that match the fallback asset and avoid unexpected layout shifts.

Choose crops that preserve meaning

Art direction is more than zooming. Keep the subject and context that matter in each crop, and check that the alternative text still describes the shared meaning.

Use srcset and sizes when the same composition can simply be delivered at different resolutions; use picture when the visual composition changes.