Path // www.yourhtmlsource.com → Reference → <picture>

<picture>

by Ross Shannon

The <picture> element is a container for multiple image sources, allowing the browser to choose the most appropriate image based on device characteristics, viewport size, image format support, or other factors. It enables art direction (showing different images for different contexts) and serves modern image formats to supporting browsers while providing fallbacks.

Clock This page was last updated on 2025-11-17


Syntax

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

The element requires both opening and closing tags. It must contain zero or more <source> elements followed by exactly one <img> element. The <img> element provides the fallback image and the required alt attribute. The browser evaluates source elements in order and uses the first one that matches.

Attributes

  • Global attributes - The <picture> element supports all global attributes such as id, class, style, lang, and dir.

The <picture> element itself has no element-specific attributes. The selection logic is controlled through attributes on child <source> elements:

  • srcset - One or more image sources (on <source>)
  • media - Media query for when to use this source (on <source>)
  • type - MIME type of the image format (on <source>)
  • sizes - Sizes for responsive image selection (on <source>)

Examples

Format Fallback (WebP with JPEG fallback)

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A scenic mountain landscape">
</picture>

Art Direction (Different Images for Different Screens)

<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="Company headquarters">
</picture>

Responsive Images with Multiple Resolutions

<picture>
  <source
    media="(min-width: 800px)"
    srcset="large-1x.jpg 1x, large-2x.jpg 2x">
  <source
    srcset="small-1x.jpg 1x, small-2x.jpg 2x">
  <img src="fallback.jpg" alt="Product showcase">
</picture>

When to Use

Use the <picture> element when:

  • Serving modern image formats (WebP, AVIF) with fallbacks
  • Implementing art direction (cropped images for mobile vs. full for desktop)
  • Displaying different images based on viewport size
  • Optimizing performance by serving appropriately sized images
  • Supporting high-DPI (Retina) displays efficiently
  • Handling different aspect ratios for different devices

Key concepts:

  • Browser chooses first matching <source> element
  • The <img> element is required for display and accessibility
  • CSS styling should target the <img>, not <picture>
  • The alt attribute on <img> describes all possible images

Performance benefits:

  • Reduces bandwidth by serving optimal formats
  • Improves load times on mobile devices
  • Leverages browser's native image selection
  • No JavaScript required for responsive behavior
  • <img> - Image element (required child)
  • <source> - Specifies image sources
  • <figure> - Container for images with captions
  • <figcaption> - Caption for figure content
  • <video> - Similar pattern for video content