Français

<picture>

Serve the right image for the screen: responsive, formats, art direction

— 2 min read

  • HTML
  • accessibility
  • semantics
  • media
  • performance

<picture> + <source> — Adaptive images

The <picture> element is a container that offers multiple versions of an image via <source>. The browser picks the best option based on supported format, screen size, or pixel density. The final <img> serves as a fallback.

When to use it

You want to serve WebP or AVIF to compatible browsers and JPEG to others. You want to crop an image differently on mobile (art direction). You want to optimize image weight with sizes and srcset.

What you gain

Accessibility: the alt stays on the fallback <img>. The mechanism is transparent to assistive technologies. They see a single image.

SEO: lighter images improve the Largest Contentful Paint. Core Web Vitals are a documented ranking signal by Google (documentation).

Code example

<picture>
  <!-- Art direction: cropped version for small screens -->
  <source
    media="(max-width: 40rem)"
    srcset="/photos/hero-crop.avif"
    type="image/avif"
  />
  <!-- Modern format for wide screens -->
  <source srcset="/photos/hero.avif" type="image/avif" />
  <source srcset="/photos/hero.webp" type="image/webp" />
  <!-- Fallback -->
  <img
    src="/photos/hero.jpg"
    alt="Sunset over the rice terraces of Banaue"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

Further reading