Skip to main content

html-tags.com

<picture>

Wraps source elements and an img for art direction and format negotiation.

Baseline: Widely available · Media & embedded content

When to use it

To serve AVIF/WebP with fallback, or different crops per viewport; the inner img carries alt and dimensions.

When not to

For plain resolution switching alone, srcset/sizes on img is enough — picture is for format or art changes.

Example

<picture>
  <source type='image/avif' srcset='/img/loaf.avif'>
  <source type='image/webp' srcset='/img/loaf.webp'>
  <img src='/img/loaf.jpg' alt='A dark rye loaf' width='320' height='200'>
</picture>
Source — this snippet needs a fuller context to render.

Authoritative references