HTML: picture

The <picture> element lets the browser choose the most suitable image source for a condition or format.

What you will learn

How source and img work together
How to serve a different crop on small screens
Why img remains the required fallback

Responsive crop example

<picture>
  <source media="(max-width: 600px)" srcset="hero-small.jpg">
  <img src="hero-large.jpg" alt="A mountain at sunrise">
</picture>

The browser uses the source when its media condition matches. Otherwise it uses the img fallback. Keep the meaningful alt on the img element.

Format selection

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Product photo">
</picture>

The browser can choose a supported image format and fall back to the img source. Test the sizes and formats so the faster option is actually useful.

Common mistakes

Always include an img element as the fallback.
Do not put the meaningful alternative text only on a source element.
Keep the chosen images equivalent in meaning and avoid changing the message between breakpoints.