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.
The picture element is one part of the HTML specification.
<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>
What are the `srcset` and `sizes` attributes?
The srcset and sizes attributes extend the img and source elements to provide a list of available image sources and their sizes. Browsers can then use this information to pick the best image source.
Both srcset and sizes are part of the HTML specification and can used separately or in conjunction with the picture element.
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf">
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
- Discussion List Archives
- http://list.responsiveimages.org
News / Updates
Tweets by @respimgImplementation status
This list indicates the status of implementation in major browser engines. We always try to keep this up-to-date but please refer to the linked issues for the latest status.
In most bugtrackers you can vote for implementation in the linked bugs.
- Blink / Chrome / Opera
- WebKit / Safari
- Mozilla Firefox
- Picture: IMPLEMENTED/SHIPPED (Firefox 38)
- srcset: IMPLEMENTED/SHIPPED (Firefox 38)
- Microsoft Edge