← Back to All Tags

<picture>

Defines a container for multiple image sources

✨ HTML5

Definition and Usage

The <picture> tag gives web developers more flexibility in specifying image resources.

The most common use of the <picture> element is for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

Tip: Always include an <img> element as the last child of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.
Note: The <picture> element is new in HTML5 and is perfect for responsive images and modern image format support (WebP, AVIF).

Browser Support

The <picture> tag is supported in all major browsers:

Chrome
Chrome
38.0+
Firefox
Firefox
38.0+
Safari
Safari
9.1+
Edge
Edge
13.0+
Opera
Opera
25.0+

Attributes

The <picture> tag supports the Global Attributes in HTML.

The <picture> tag also supports the Event Attributes in HTML.

Note: The <picture> element itself has no specific attributes. All functionality comes from the <source> child elements which use media, srcset, type, and sizes attributes.

Examples

Responsive Image

Display different images based on screen size:

Example

<picture>
  <source media="(min-width: 1200px)" srcset="large-image.jpg">
  <source media="(min-width: 768px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Responsive Image">
</picture>

Art Direction

Show different crops of an image for different devices:

Example

<picture>
  <source media="(min-width: 800px)" srcset="landscape.jpg">
  <source media="(min-width: 400px)" srcset="portrait.jpg">
  <img src="square.jpg" alt="Art Direction Example">
</picture>

WebP with Fallback

Use modern image format with fallback to JPEG:

Example

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

Multiple Format Support

Support AVIF, WebP, and JPEG formats:

Example

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <source type="image/jpeg" srcset="photo.jpg">
  <img src="photo.jpg" alt="Modern Format Support">
</picture>

Resolution Switching

Provide different resolutions for high-DPI displays:

Example

<picture>
  <source
    srcset="image-320w.jpg 320w,
            image-640w.jpg 640w,
            image-1280w.jpg 1280w"
    sizes="(max-width: 640px) 100vw, 640px">
  <img src="image-640w.jpg" alt="Resolution Switching">
</picture>

Dark Mode Images

Display different images for light and dark mode:

Example

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-logo.png">
  <source media="(prefers-color-scheme: light)" srcset="light-logo.png">
  <img src="light-logo.png" alt="Adaptive Logo">
</picture>

Retina Display Support

Serve high-resolution images for retina displays:

Example

<picture>
  <source
    media="(min-width: 800px)"
    srcset="hero-1x.jpg 1x, hero-2x.jpg 2x">
  <source
    srcset="hero-mobile-1x.jpg 1x, hero-mobile-2x.jpg 2x">
  <img src="hero-1x.jpg" alt="Hero Image">
</picture>

How Picture Works

The browser evaluates <source> elements in order and selects the first match:

  • Step 1: Browser checks the media attribute (media queries)
  • Step 2: Browser checks the type attribute (image format support)
  • Step 3: First matching <source> is selected
  • Step 4: If no match, fallback <img> is used
Important: Source order matters! Place the most specific conditions first, and the fallback <img> last.

Try it Yourself

Interactive Example

Resize your browser window to see the responsive image in action:

Responsive Demo - Mountain landscape

Photo from Unsplash

Use Cases

  • Art Direction: Different image crops for different screen sizes
  • Format Switching: Serve modern formats (WebP, AVIF) with fallbacks
  • Resolution Switching: Provide different resolutions for various devices
  • Device-Specific: Optimize images for mobile vs desktop
  • Theme Support: Different images for light/dark mode
  • Bandwidth Optimization: Serve smaller images on slower connections

Modern Image Formats

The <picture> element is perfect for progressive enhancement with modern formats:

  • AVIF: Next-gen format with superior compression (Chrome 85+, Firefox 93+)
  • WebP: Modern format with good compression (widely supported)
  • JPEG/PNG: Traditional formats as fallback (universal support)

Best Practices

  • Always include an <img> element as the last child for fallback
  • Use <picture> for art direction (different crops/images)
  • Use srcset on <img> for resolution switching only
  • Order <source> elements from most specific to least specific
  • Provide modern formats first (AVIF, WebP) with JPEG/PNG fallback
  • Always include descriptive alt text on the <img> element
  • Test across different browsers and devices
  • Use appropriate image sizes to optimize performance

Picture vs Img srcset

  • <picture>: Use for art direction (different images) or format switching
  • <img srcset>: Use for resolution switching (same image, different sizes)
Rule of Thumb: If you need different images for different conditions, use <picture>. If you just need different resolutions of the same image, use <img srcset>.

Default CSS Settings

Most browsers will display the <picture> element with the following default values:

Default CSS

picture {
  display: inline;
}

Related Tags