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

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

Specification link

Status: Specification currently under development in a Working Group

Status in Chromium

Blink components: Blink

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

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

Owner

• yoav@yoav.ws

Comments

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

Last updated on 2020-11-09