HTML Picture Element

The HTML <picture> element provides a flexible way to serve different image sources based on device capabilities, screen size, and format support. It's perfect for responsive images and modern web development.

Basic Picture Syntax

The <picture> element contains multiple <source> elements and one <img> fallback:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description of image">
</picture>

Art Direction

Serve different image crops for different screen sizes using art direction:

<picture>
  <source media="(min-width: 900px)" 
          srcset="banner-large.jpg">
  <source media="(min-width: 600px)" 
          srcset="banner-medium.jpg">
  <img src="banner-small.jpg" alt="Website banner">
</picture>

This serves different crops for desktop, tablet, and mobile views.

Resolution Switching

Provide different resolutions for high-density displays:

<picture>
  <source srcset="photo-1x.jpg 1x,
                  photo-2x.jpg 2x,
                  photo-3x.jpg 3x"
          type="image/jpeg">
  <img src="photo-1x.jpg" alt="High resolution photo">
</picture>

The browser automatically selects the appropriate resolution based on device pixel ratio.

Format Switching

Serve modern formats like WebP with JPEG fallback:

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

Combining Techniques

Combine art direction, resolution, and format switching:

<picture>
  <!-- Desktop: Large WebP -->
  <source media="(min-width: 1200px)"
          srcset="hero-desktop.webp"
          type="image/webp">
  
  <!-- Desktop: Large JPEG fallback -->
  <source media="(min-width: 1200px)"
          srcset="hero-desktop.jpg"
          type="image/jpeg">
  
  <!-- Tablet: Medium WebP -->
  <source media="(min-width: 768px)"
          srcset="hero-tablet.webp"
          type="image/webp">
  
  <!-- Tablet: Medium JPEG fallback -->
  <source media="(min-width: 768px)"
          srcset="hero-tablet.jpg"
          type="image/jpeg">
  
  <!-- Mobile: Small WebP -->
  <source srcset="hero-mobile.webp"
          type="image/webp">
  
  <!-- Mobile: Small JPEG fallback -->
  <source srcset="hero-mobile.jpg"
          type="image/jpeg">
  
  <!-- Fallback for older browsers -->
  <img src="hero-mobile.jpg" 
       alt="Hero image"
       loading="lazy">
</picture>

Picture with Figure

Use semantic HTML5 with figure and figcaption:

<figure>
  <picture>
    <source srcset="diagram.webp" type="image/webp">
    <source srcset="diagram.svg" type="image/svg+xml">
    <img src="diagram.png" alt="Technical diagram">
  </picture>
  <figcaption>
    A technical diagram showing the system architecture
    with WebP format for modern browsers and SVG fallback.
  </figcaption>
</figure>

Best Practices