HTML <picture> Tag

What You’ll Learn

The <picture> tag delivers responsive, device-aware images. This guide covers syntax, source attributes, art direction, accessibility, and browser support for beginners.

What Is the <picture> Tag?

The <picture> tag is a versatile HTML5 element designed to provide a flexible and responsive approach to displaying images on a webpage. It allows developers to include multiple sources for an image based on factors like screen size, display resolution, and other device characteristics.

Use picture when you need art direction (different crops per layout) or format switching (WebP with JPEG fallback). For simple resolution switching, img with srcset alone may be enough.

📝 Syntax

The <picture> tag employs a nested structure with one or more <source> elements and an <img> fallback:

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

Syntax Rules

• Always include a final img with src and descriptive alt text.
• List source elements from most specific to most general.
• Put srcset and media on source, not on picture.
• Use type on source to offer WebP/AVIF with JPEG fallback.

⚖️ <picture> vs <img>

Examples Gallery

Deliver breakpoint-based images and art-directed crops with source and img.

👀 Live Preview

Resize the window to see the image change at breakpoints:

Green at 1200px+, orange at 768px+, red below that.

📚 Common Use Cases

The <picture> tag adapts images to screen size, resolution, and layout needs through multiple source candidates.

Responsive Images

The primary use case for picture is to deliver images that adapt to various screen sizes and resolutions. By providing multiple sources, developers can ensure an optimal viewing experience across devices.

responsive-images.html

Copy

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

View Output Try It Yourself

📤 Output:

Art Direction

The picture tag allows for art-directed images, where different images are served based on the layout or design requirements of the webpage.

art-direction.html

Copy

<picture>
  <source srcset="portrait.jpg" media="(orientation: portrait)">
  <source srcset="landscape.jpg" media="(orientation: landscape)">
  <img src="default.jpg" alt="Description of the image">
</picture>

View Output Try It Yourself

📤 Output:

♿ Accessibility

• alt on img — Put descriptive alt text on the fallback img; it represents the entire picture for assistive technology.
• Meaningful descriptions — Describe the image content, not just “photo” or the filename.
• Decorative images — Use alt="" only when the image is purely decorative.
• Same message across sources — All source variants should convey equivalent information.

💡 Best Practices