The picture Element and Art Direction

The picture element allows the browser to choose among alternative image sources. It is useful when an image needs a different crop on a narrow screen or when you want to offer a format the browser supports.

<picture>
  <source media="(max-width: 600px)" srcset="images/workshop-portrait.jpg">
  <source type="image/avif" srcset="images/workshop-wide.avif">
  <img src="images/workshop-wide.jpg"
       alt="A bicycle repair workshop with tools on the wall"
       width="1200"
       height="800">
</picture>

The browser evaluates the source elements in order and uses a matching source when possible. The img element remains required; it supplies the fallback and carries the alternative text and dimensions.

Use srcset with width descriptors when the image content is the same and only the resolution changes. Use picture with media conditions when the composition itself should change—for example, a portrait crop on a phone and a wide crop on a desktop.

Do not write a long list of sources without a reason. Prepare and test the image files, choose breakpoints based on the actual design, and check that the subject remains visible in each crop.