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`
  <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="">
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
IRC Logs
Discussion List Archives

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