Skip to content
html.sh

<picture> - The Picture Element

The <picture> Element

Section titled “The <picture> Element”
Media Element HTML5

The picture element provides a container for multiple image sources, enabling art direction (different images for different layouts) and format fallbacks. It gives developers precise control over which image is displayed based on viewport size, device capabilities, and format support.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

How Picture Works

Section titled “How Picture Works”

The browser evaluates <source> elements in order from top to bottom:

  1. Checks each <source> element’s media, type, and srcset attributes
  2. Uses the first matching source
  3. Falls back to the <img> element if no source matches
  4. The <img> element displays the selected source and provides the alt text

Art Direction

Section titled “Art Direction”

Different Images for Different Layouts

Section titled “Different Images for Different Layouts”

Art direction allows you to serve different crops or compositions based on viewport size:

Result

Practical Example: Hero Image

Section titled “Practical Example: Hero Image”
Result

Format Fallbacks

Section titled “Format Fallbacks”

Modern Formats with Fallbacks

Section titled “Modern Formats with Fallbacks”

Serve modern formats like AVIF and WebP with JPEG/PNG fallbacks:

Result

Format savings:

  • AVIF: ~50% smaller than JPEG
  • WebP: ~30% smaller than JPEG
  • Both maintain better quality at smaller sizes

SVG with PNG Fallback

Section titled “SVG with PNG Fallback”
Result

Combining Art Direction and Formats

Section titled “Combining Art Direction and Formats”

You can use both art direction and format fallbacks together:

Result

Responsive Images with srcset

Section titled “Responsive Images with srcset”

Use srcset in <source> elements for resolution switching:

Result

Media Queries in Picture

Section titled “Media Queries in Picture”

Common Media Query Patterns

Section titled “Common Media Query Patterns”
<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <source media="(min-width: 480px)" srcset="small.jpg">
  <img src="tiny.jpg" alt="Description">
</picture>

Dark Mode Example

Section titled “Dark Mode Example”
Result

Advanced Patterns

Section titled “Advanced Patterns”

With sizes Attribute

Section titled “With sizes Attribute”

Combine sizes with srcset for sophisticated responsive behavior:

Result

Lazy Loading

Section titled “Lazy Loading”
Result

Common Use Cases

Section titled “Common Use Cases”

Hero Banners

Section titled “Hero Banners”
Result

Product Images

Section titled “Product Images”
Result

Background Images

Section titled “Background Images”
Result

Picture vs. img srcset

Section titled “Picture vs. img srcset”

When to Use Picture

Section titled “When to Use Picture”

Use <picture> when you need:

  • Art direction: Different image compositions for different screen sizes
  • Format fallbacks: AVIF/WebP with JPEG/PNG fallback
  • Media queries: Complex conditions based on viewport, orientation, or preferences
  • Different aspect ratios: Square on mobile, landscape on desktop
Result

When to Use img with srcset

Section titled “When to Use img with srcset”

Use <img srcset> when you need:

  • Resolution switching: Same image, different sizes/resolutions
  • Simpler syntax: No art direction needed
  • Browser optimization: Let browser choose based on viewport and pixel density
Result 
<!-- Different crops for mobile/desktop -->
<picture>
  <source media="(min-width: 768px)"
          srcset="wide-hero.jpg">
  <img src="square-hero.jpg" alt="Hero">
</picture>


<!-- Modern format with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Photo">
</picture>

Accessibility

Section titled “Accessibility”

Alt Text

Section titled “Alt Text”

Always provide alt text on the <img> element, not on <source>:

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

With Figure and Figcaption

Section titled “With Figure and Figcaption”
Result

Performance Tips

Section titled “Performance Tips”
  1. Order sources by specificity - Most specific first, most general last
  2. Use modern formats - AVIF and WebP can save 30-50% bandwidth
  3. Lazy load - Add loading="lazy" to the <img> element
  4. Set dimensions - Always include width and height on <img>
  5. Optimize all versions - Compress every image variant
  6. Test fallbacks - Ensure JPEG/PNG fallbacks work in older browsers

Browser Support

Section titled “Browser Support”
FeatureChromeFirefoxSafariEdge
<picture>38+38+9.1+13+
AVIF in <picture>85+93+16+85+
WebP in <picture>38+38+14+18+
Media queries38+38+9.1+13+

Common Mistakes

Section titled “Common Mistakes”
<!-- Missing img element -->
<picture>
  <source srcset="image.webp" type="image/webp">
</picture>


<!-- img not last child -->
<picture>
  <img src="image.jpg" alt="Photo">
  <source srcset="image.webp" type="image/webp">
</picture>


<!-- Alt on source instead of img -->
<picture>
  <source srcset="image.webp" type="image/webp" alt="Wrong">
  <img src="image.jpg">
</picture>


<!-- Reversed media query order -->
<picture>
  <source media="(min-width: 400px)" srcset="small.jpg">
  <source media="(min-width: 800px)" srcset="large.jpg">
  <img src="tiny.jpg" alt="Photo">
</picture>
Section titled “Related Elements”

The actual image element that displays within picture. Learn more →

Specifications

Section titled “Specifications”