Responsive Images Community Group logo

We’re a group of developers working towards a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print.

Join Us!
Examples of art direction. See more demos of responsive images.

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.

Sample Markup for `picture`
<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.

Sample Markup for `srcset` and `sizes`
<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.

View the Use Cases and Requirements

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

Implementation 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.

30 closed issues

Issue Description Author Last Modified
242 media attribute with invalid value not parsed correctly 1 comment zcorpan Today
241 Ban functions in sizes other than calc() 1 comment zcorpan 5 days ago
240 Using 'width' value to determine which resource to pick 3 comments igrigorik 15 days ago
239 Drop candidates with h without w 1 comment zcorpan 30 days ago
237 Editorial: missing xref for "<code>srcset</code>" zcorpan 39 days ago
236 Ref. #220 - Fixes missing `alt` attribute. 2 comments Wilto 43 days ago
235 Closes #234 - Clarify that percentage-based values are invalid in `sizes` 1 comment Wilto 43 days ago
234 Percentages not allowed in sizes="" 2 comments gregwhitworth 40 days ago
233 Missing "normalize the source densities" step for sources coming from `<img>` 1 comment tabatkins 50 days ago
232 Pipeline updates zcorpan 54 days ago
231 Preloading alternate images and switching sources 7 comments Nephyrin 69 days ago
229 Block insecure assets served via `picture`/`srcset` on TLS sites 13 comments Wilto 40 days ago
227 Should normalize the source densities for <img> zcorpan 39 days ago
226 Use media query instead of media-condition in sizes 11 comments zcorpan 73 days ago
225 Remove the requirement for descriptors to be a valid int/float 3 comments yoavweiss 77 days ago
224 Support `src` on `<source>` 18 comments yoavweiss 32 days ago
222 adding alt text advice to img section when picture used 11 comments stevefaulkner 44 days ago
221 picture acc mapping 1 comment stevefaulkner 81 days ago
219 Specify UA behavior when multiple candidates have same descriptors? 7 comments zcorpan 39 days ago
218 Shiny new “warning” flag. 2 comments Wilto 76 days ago
217 Avoid adding empty `src` to source set 3 comments yoavweiss 87 days ago
216 Make the srcset and sizes parsing algorithms define parse errors sideshowbarker 38 days ago
215 editorial: explain why srcset parser supports multiple descriptors 1 comment zcorpan 39 days ago
214 Update W3C `srcset` doc 8 comments Wilto 30 days ago
213 Rebase w3c-tr branch 7 comments zcorpan 96 days ago
212 Tweak abstract and other metadata 1 comment zcorpan 96 days ago
211 Prepare a WD zcorpan 97 days ago
209 Remove old issues zcorpan 97 days ago
208 Add a note about behavior for invalid markup. Fixes #165 zcorpan 97 days ago
207 Add note about usemap/ismap. Fixes #171 zcorpan 97 days ago