What is the Picture Element?

What You'll Learn

• Art direction for images
• Format fallbacks
• When to use picture vs srcset

What is Picture Element?

The <picture> element provides art direction for responsive images - showing different images (not just sizes) based on screen conditions.

Art Direction Example

<picture>
  <source media="(min-width: 1200px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="hero-medium.jpg">
  <img src="hero-mobile.jpg" alt="Hero image">
</picture>

Format Fallback

Serve modern formats with fallback:

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

Picture vs Srcset

• <picture>: You control which image displays
• srcset: Browser chooses best size