<picture>
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
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.