The <picture> tag

<picture> lets the browser pick the best image source from several source elements based on screen size or format support, with img as the fallback.

Syntax

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

Example

<picture>
  <source media="(max-width: 600px)" srcset="banner-mobile.jpg">
  <source media="(min-width: 601px)" srcset="banner-desktop.jpg">
  <img src="banner-desktop.jpg" alt="Banner">
</picture>

Notes

picture must always end with an img — that's what actually gets rendered; source elements just offer candidate sources.
Unlike srcset on img alone (where the browser only picks by size/density), picture enables art direction — different cropping for different screens.

Accessibility

alt is set on the img inside picture, never on source or picture itself.

Related tools

The <img> tag

The src, alt, loading, and srcset attributes of the <img> tag, with examples.

Responsive image

How to give the browser several image variants for different screen sizes.