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.

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>
The picture Specification

What is the `srcset` attribute?

The srcset attribute is an extension to the img and source elements that provides a concice method for delivering high-res assets to high-density displays only, while allowing the user to override requests based on a preference or available bandwidth.

Sample Markup for `srcset`
<img src="fallback.jpg" alt="" srcset="photo.jpg 1x, photo-hd.jpg 2x">

The srcset Specification Example srcset Parser

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
156 Viewport dimensions of "orphan" images 8 comments yoavweiss Today
154 width descriptor in srcset and picture specs 1 comment waldbaerkoch 3 days ago
153 Simplify language of the sizes parsing algo. 4 comments tabatkins 3 days ago
150 Avoid 0/0 by banning 0 in sizes. Clarify what 0x means. Editorial fix: s... 1 comment zcorpan 8 days ago
149 Add `.currentSrc` property to the `<img>` IDL tabatkins 5 days ago
148 Allow JavaScript to access 'src' chosen by the UA 15 comments tkadlec 7 days ago
147 Avoid adding src to the source set when using 'w'. Fixes #119 9 comments zcorpan 7 days ago
146 Don't allow srcset='url1,url2' in the syntax. Fixes #123 1 comment zcorpan 5 days ago
145 Require that 'w' matches the image width. Fixes #143 zcorpan 9 days ago
144 Remove support for % in sizes since it's confusing if it refers to the i... 1 comment zcorpan 9 days ago
143 Why do we allow `0x` descriptors? 3 comments yoavweiss 9 days ago
142 Don't set intrinsic width from sizes since that's bogus. Don't set the i... 7 comments zcorpan 4 days ago
141 Tighten up the allowed syntax for sizes. Allow the attribute to be omitt... 1 comment zcorpan 10 days ago
140 Allow percentages in sizes and say that they're relative to the viewport... 1 comment zcorpan 10 days ago
139 Change the fallback value of sizes from 300px to 100%. Fixes #127 zcorpan 11 days ago
138 "Parse a sizes" missing percentage? 2 comments yoavweiss 10 days ago
137 Define parsing of sizes in a way that doesn't require parsing the whole ... 1 comment zcorpan 11 days ago
136 Redefine sizes parsing in term of CSS tokens yoavweiss 11 days ago
135 Normalize source densities issue? yoavweiss 11 days ago
134 Why do we need a `<source-size-list>`? 6 comments yoavweiss 11 days ago
133 Consider renaming source to something else 28 comments zcorpan 2 days ago
132 Sizes parsing clarification 3 comments yoavweiss 22 days ago
131 Responsible polyfilling 17 comments Wilto 14 days ago
130 Removed px from example, reduced line length of example; Regenerate index.html 1 comment yoavweiss 31 days ago
129 Prevent code example from over-running container. 2 comments maxshelley 31 days ago
128 Type attribute example 4 comments nwtn 31 days ago
127 “Effective size” error handling 3 comments eeeps 11 days ago
126 Fixed the height & width in the examples 2 comments yoavweiss 32 days ago
125 Spec text query: why specify height & width on some imgs but not all 3 comments brucelawson 32 days ago
124 Get rid of source set list yoavweiss 44 days ago