The picture Element — Format Negotiation with source Tags

The picture Element for Format Negotiation

The <picture> element provides a powerful mechanism for serving different image formats based on browser capabilities, known as format negotiation.

Basic Structure

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

The browser evaluates <source> elements top to bottom and uses the first one it supports. The <img> tag at the bottom serves as the fallback.

Combining Format Negotiation with Responsive Widths

For maximum optimization, combine format types with srcset width descriptors:

<picture>
  <source
    type="image/avif"
    srcset="hero-320w.avif 320w,
            hero-640w.avif 640w,
            hero-1024w.avif 1024w,
            hero-1536w.avif 1536w"
    sizes="(max-width: 640px) 100vw, 50vw"
  />
  <source
    type="image/webp"
    srcset="hero-320w.webp 320w,
            hero-640w.webp 640w,
            hero-1024w.webp 1024w,
            hero-1536w.webp 1536w"
    sizes="(max-width: 640px) 100vw, 50vw"
  />
  <img
    src="hero-1024w.jpg"
    srcset="hero-320w.jpg 320w,
            hero-640w.jpg 640w,
            hero-1024w.jpg 1024w,
            hero-1536w.jpg 1536w"
    sizes="(max-width: 640px) 100vw, 50vw"
    alt="Hero image"
    loading="lazy"
    decoding="async"
  />
</picture>

Format Savings Comparison

Format	Typical Savings vs JPEG	Browser Support
AVIF	30-50% smaller	Chrome 85+, Firefox 93+, Safari 16.4+
WebP	25-35% smaller	All modern browsers (95%+ global)
JPEG XL	35-50% smaller	Safari 17+, no Chrome/Firefox

Key Rules

• Always list the most efficient format first (AVIF > WebP > JPEG)
• The type attribute must be a valid MIME type
• The <img> tag is required inside <picture> — it's the fallback and receives the styling
• The sizes attribute must be repeated on each <source> if using width descriptors