<picture> Element

Enable a responsive images solution by declaring multiple resources for an image using CSS media queries.

Comments

The specification was recently rewritten to simplify its implementation and maintenance. Available behind a flag in Chromium 37.

Demos

• http://scottjehl.github.io/picturefill/
• https://github.com/GoogleChrome/samples/tree/gh-pages/picture-element

Documentation

• http://docs.webplatform.org/wiki/html/elements/picture
• http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
• http://ericportis.com/posts/2014/srcset-sizes/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Specification

Working draft or equivalent

Status in Chromium

Blink components: Blink

Enabled by default (tracking bug) in:

• Chrome for desktop release 38
• Chrome for Android release 38
• Opera release 25
• Opera for Android release 25

Consensus & Standardization

• Firefox: In development
• Edge: Shipped
• Safari: Shipped
• Web Developers: Positive

Owner

• yoav@yoav.ws

Last updated on 2018-04-26