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

css

<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>

2Put the element in context

Picture lets the browser choose among image sources, which is useful for different crops or formats. The final img remains the fallback and carries the alternative text. A responsive source choice should support the same content purpose rather than silently change its meaning.

3Practice with a small page

Create a wide crop and a narrow crop of a permitted image. Use sources with appropriate conditions and a fallback img. Resize the page, inspect which file loads, and confirm that both crops retain the information the alternative text describes.

Finished reading?

Mark this topic as complete to track progress.

<img> Images

Next Topic