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 new picture specification.

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 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 picture 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" />

Picture relationship to srcset 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.

20 open issues

Issue Description Author Last Modified
233 Missing "normalize the source densities" step for sources coming from `<img>` tabatkins 2 days ago
230 `srcset` making requests on resize/zoom 16 comments Wilto 17 days ago
229 Block insecure assets served via `picture`/`srcset` on TLS sites 13 comments Wilto 8 days ago
228 Intrinsic sizing, 'w' resources and zooming 6 comments yoavweiss 22 days ago
227 Should normalize the source densities for <img> zcorpan 25 days ago
223 currentSrc and data URIs 2 comments yoavweiss 26 days ago
222 adding alt text advice to img section when picture used 10 comments stevefaulkner 22 days ago
220 feedback on empty alt used in some examples 1 comment stevefaulkner 26 days ago
219 Specify UA behavior when multiple candidates have same descriptors? 7 comments zcorpan 25 days ago
216 Make the srcset and sizes parsing algorithms define parse errors sideshowbarker 42 days ago
215 editorial: explain why srcset parser supports multiple descriptors 1 comment zcorpan 39 days ago
214 Update W3C `srcset` doc 2 comments Wilto 22 days ago
210 Add type() descriptor to srcset 3 comments zcorpan 45 days ago
189 Avoid a state machine dance yoavweiss 61 days ago
187 Parse the descriptors before creating the image candidates list yoavweiss 62 days ago
186 Add a label to the descriptor tokenization algorithm yoavweiss 62 days ago
174 Add the "Adaptive images" examples from the HTML spec with new syntax 2 comments zcorpan 44 days ago
157 Require MQ-matching changes to trigger a new round of selection for <source media> 6 comments Nephyrin 29 days ago
86 The sizes="" attribute only works with width-constrained images 15 comments eeeps 67 days ago
85 Intrinsic dimensions 25 comments yoavweiss 49 days ago

30 closed issues

Issue Description Author Last Modified
232 Pipeline updates zcorpan 2 days ago
231 Preloading alternate images and switching sources 7 comments Nephyrin 17 days ago
226 Use media query instead of media-condition in sizes 11 comments zcorpan 22 days ago
225 Remove the requirement for descriptors to be a valid int/float 3 comments yoavweiss 26 days ago
224 Support `src` on `<source>` 18 comments yoavweiss 21 days ago
221 picture acc mapping 1 comment stevefaulkner 29 days ago
218 Shiny new “warning” flag. 2 comments Wilto 24 days ago
217 Avoid adding empty `src` to source set 3 comments yoavweiss 36 days ago
213 Rebase w3c-tr branch 7 comments zcorpan 44 days ago
212 Tweak abstract and other metadata 1 comment zcorpan 45 days ago
211 Prepare a WD zcorpan 45 days ago
209 Remove old issues zcorpan 45 days ago
208 Add a note about behavior for invalid markup. Fixes #165 zcorpan 45 days ago
207 Add note about usemap/ismap. Fixes #171 zcorpan 45 days ago
206 Fix intro and examples. Fixes #202 zcorpan 45 days ago
205 Make <picture> be draggable by default. Fixes #198 zcorpan 45 days ago
204 Authoring conformance: fix #195 #196 #197 #199 2 comments zcorpan 49 days ago
203 IDL for currentSrc should not be nullable. (Related: #155) zcorpan 49 days ago
202 Examples 4 and 5 should use `img` Wilto 45 days ago
201 Clarifying the “relationship to `srcset`” section. 5 comments Wilto 48 days ago
200 Make currentSrc be updated when the image is loaded or fails to load. Us... 1 comment zcorpan 49 days ago
199 Authoring conformance, simplify <source media> check zcorpan 49 days ago
198 Drag and drop <img> with a <picture> parent 9 comments zcorpan 38 days ago
197 Authoring conformance, require unique descriptors zcorpan 49 days ago
196 Authoring conformance, ban 0w zcorpan 49 days ago
195 Authoring conformance, ban urls starting with a comma zcorpan 49 days ago
194 Expand on “Relationship to `srcset`” section 6 comments Wilto 44 days ago
193 Silence crossorigin changes that don't change the state. Fixes #192 1 comment zcorpan 52 days ago
192 Avoid doing things when crossorigin changes but doesn't change state zcorpan 52 days ago
191 Should 0x descriptor be allowed for authors or not? 1 comment zcorpan 59 days ago