<picture>
The <picture> element lets you provide multiple image sources and choose among them based on media conditions or supported formats.
Overview
The <picture> element lets you provide multiple image sources and choose among them based on media conditions or supported formats.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 38 | 13 | 38 | 9.1 | 38 | 9.3 | |
| DOM API | ||||||
| The HTMLPictureElement interface represents a picture HTML element. It doesn't implement specific properties or methods. | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
Syntax
<picture>
<source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
<source media="(min-width: 800px)" srcset="large.jpg">
<source srcset="small.webp" type="image/webp">
<img src="small.jpg" alt="レスポンシブ画像の例">
</picture>Live demo
Art direction sources
Use picture with multiple source candidates and a shared fallback image.
Format fallback pattern
Show a typical source order for modern formats with a standard img fallback.
Responsive card image
Wrap picture inside a content card so the same semantics work with different crops.
Use cases
Responsive art direction
Serve different crops or compositions for narrow and wide layouts.
Format negotiation
Offer newer formats such as AVIF or WebP while keeping a fallback source for older browsers.
Cautions
- picture chooses sources based on conditions, but the nested img still supplies the alt text and fallback behavior.
- Overly complex source sets can become difficult to debug and maintain without a clear image strategy.
Accessibility
- Keep the same essential meaning across all source variants so the alt text remains accurate no matter which image loads.
Related links
Powered by web-features