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`
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">

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
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
266 Add support for logical operators in media queries passed in sizes strings 1 comment przemyslaw-piatek 13 days ago
262 Chrome renders image at viewport width 2 comments attiks 20 days ago
259 Image density API 2 comments yoavweiss 20 days ago
257 media-condition/mediaquery changes should only affect images in document 14 comments aFarkas 42 days ago
256 Require default length in sizes (authoring req) 4 comments zcorpan 47 days ago
254 Allow adaption of <figcaption> based on chosen <source> 17 comments Boldewyn 120 days ago
253 Intrisinic dimensions adaptation only when sizes is explicit? 8 comments yoavweiss 75 days ago
251 SVG format not loading in native picture element when specified in source element with type="image/svg+xml" 1 comment bjankord 158 days ago
250 Update biblio.json mdmcginn 158 days ago
249 onerror when environment changed? 4 comments yoavweiss 146 days ago
248 naturalWidth/naturalHeight should maybe return null when no there's intrinsic size 1 comment zcorpan 181 days ago
247 naturalWidth/naturalHeight should apply current pixel density zcorpan 72 days ago
245 Drop any candidate with a `type` descriptor if `type` is not supported 9 comments eeeps 184 days ago
244 Drop candidates with `w` descriptors if `w`is unsupported 3 comments eeeps 184 days ago
242 media attribute with invalid value not parsed correctly 1 comment zcorpan 199 days ago
241 Ban functions in sizes other than calc() 1 comment zcorpan 204 days ago
240 Using 'width' value to determine which resource to pick 3 comments igrigorik 214 days ago
239 Drop candidates with h without w 1 comment zcorpan 189 days ago
237 Editorial: missing xref for "<code>srcset</code>" zcorpan 238 days ago
236 Ref. #220 - Fixes missing `alt` attribute. 2 comments Wilto 242 days ago
235 Closes #234 - Clarify that percentage-based values are invalid in `sizes` 1 comment Wilto 242 days ago
234 Percentages not allowed in sizes="" 2 comments gregwhitworth 239 days ago
233 Missing "normalize the source densities" step for sources coming from `<img>` 1 comment tabatkins 249 days ago
232 Pipeline updates zcorpan 253 days ago
231 Preloading alternate images and switching sources 7 comments Nephyrin 268 days ago
230 `srcset` making requests on resize/zoom 24 comments Wilto 71 days ago
229 Block insecure assets served via `picture`/`srcset` on TLS sites 13 comments Wilto 239 days ago
228 Intrinsic sizing, 'w' resources and zooming 6 comments yoavweiss 71 days ago
227 Should normalize the source densities for <img> zcorpan 238 days ago
226 Use media query instead of media-condition in sizes 11 comments zcorpan 272 days ago