What is the `picture` Element?
The picture element is a markup pattern that allows developers to declare multiple sources for
an image. By using media queries, it gives developers control as to when and if those
images are presented to the user.
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
picture Specification
What is the `srcset` attribute?
The srcset attribute is an extension to the existing img tag that
provides some of the functionality of the picture element. It uses a more concise syntax,
part of which can be used by the picture element.
<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">
What are the use cases for each?
The Use Cases and Requirements document outlines the goals, objectives, and potential issues
for end users that must be solved by the picture and srcset extension specifications.
Where can I learn more?
- The RICG on GitHub
- http://gh.responsiveimages.org
- IRC Logs
- http://ircbot.responsiveimages.org
- Mailing List
- http://list.responsiveimages.org
Try it now!
The members of the RICG have put together a number of demos for the picture and srcset elements. The demos on this page work in any modern browser, but if you want to see the real deal grab our Chromium build.
Issue Tracker
12 open issues
| Issue | Description | Author | Last Modified |
|---|---|---|---|
| 21 | WIP flag is horrible. 1 comment | Wilto | 82 days ago |
| 20 | W3C Publication issue | marcoscaceres | 82 days ago |
| 19 | Add example of how to use figure, figcaption, and picture together 3 comments | marcoscaceres | 102 days ago |
| 18 | section 5 is missing the type-attribute and its behavior 1 comment | anselmh | 131 days ago |
| 16 | Clarify/Define the accessibility model of the <picture> element 11 comments | komputist | 100 days ago |
| 12 | Include section to explain the difference from <object> 1 comment | myakura | 169 days ago |
| 7 | Preloading based on MQs & `@viewport` 1 comment | yoavweiss | 186 days ago |
| 6 | Fallback content - alternative text | yoavweiss | 198 days ago |
| 2 | The behavior of picture's `src` attribute is unclear 10 comments | yoavweiss | 119 days ago |
| 1 | Reflecting matched media | marcoscaceres | 218 days ago |
| 29 | Clarify explanatory statement about WebP/Jpeg vs PNG. | nathanaeljones | 80 days ago |
| 28 | Resolution switching illustration is misleading 1 comment | grigs | 82 days ago |