← Back to release summary

<picture> Element

Category

Miscellaneous

Type

New or changed feature

Status

Enabled by default (Chrome 38)

Intent stage

None

Summary

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

Standards & signals

• Specification: http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#embedded-content
• Firefox: In development
• Safari: Shipped/Shipping
• Web developers: Positive
• Tracking bug: http://crbug.com/233751

Docs: 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

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

View on chromestatus.com