Media & Embedded Content

<picture> & <source>

Art direction and modern format fallbacks.

1Smart Image Switching

<picture> wraps multiple <source> elements with a fallback <img>. Use it to serve WebP/AVIF with a JPG fallback, or different crops at different breakpoints.

Example Code

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

<picture>
  <source media="(max-width: 600px)" srcset="square.jpg" />
  <img src="wide.jpg" alt="Hero" />
</picture>

Finished reading?

Mark this topic as complete to track progress.

<img> Images

Next Topic