Bug 116963 - (picture) Implement `picture` element
: Implement `picture` element
Product: WebKit
Classification: Unclassified
Component: HTML DOM
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To: Nobody
: InRadar
Depends on:
  Show dependency treegraph
Reported: 2013-05-29 07:46 PDT by Anselm Hannemann
Modified: 2015-07-24 10:03 PDT (History)
13 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Anselm Hannemann 2013-05-29 07:46:41 PDT
The `picture` element is a markup pattern that allows developers to declare multiple sources for an image using `media` attributes on `source` elements, similar to the `video` element. This allows authors to specify requirements for when/if image sources are requested/displayed.

The Specification published by the HTML WG is the following:

Note that the `picture` element is able to make use of the resolution feature of the `srcset` attribute, but does not strictly require it. The two patterns are complementary, and together fulfill the full list of Use Cases and Requirements for Standardizing Responsive Images as published by the W3C:

Change description:
Enable a responsive images solution and give developers control over the image resource that is downloaded & displayed using the various resources' media attributes

Changes to API surface:
* The `picture` element will be recognized in HTML and displayed as an image. 
* Its `src` attribute will trigger a resource download. 
* The `src` attribute of the first matching `source` child element with a matching `media` attribute will trigger a resource download, unless `picture`has an `src` attribute.
* The DOM API for the element will resemble that of `img`, with possible minor changes.

Public standards discussion: http://www.w3.org/TR/html-picture-element/


Additional information about this:

We ran an open survey, and 42% of the 264 responses (at time of posting this) said that they are making use of “art direction” with their current “responsive images” solution.
This survey is largely comprised of attendees of last week’s Mobilism conference and developers following http://twitter.com/smashingmag (702,117 followers), so I assume it represents a fairly wide cross-section of the developer community. It’s also worth noting that developers heavily favor the `picture` element (or equivalent polyfill).
Comment 1 Yoav Weiss 2014-01-11 05:49:23 PST
The specification had recently undergone a significant simplification. The latest version can be found in http://picture.responsiveimages.org/

As a result, the above change description is no longer accurate.

A better description of current proposed API surface change:
* The `srcset` attribute will be extended. It would be able include resource dimensions, as an alternative to DPR.
* The `sizes` attribute will be defined, enabling the browser to calculate the appropriately sized resource needed, before layout is calculated.
* The `<picture>` element will be defined and used (with its child `<source>` elements) for the child `<img>`'s resource selection.

According to the new specification, `<img>` remains responsible for displaying the actual image, so previous concerns regarding `<picture>` requiring duplication of img's layout tests were addressed.

Is the WebKit project interested in accepting patches for this feature?


P.S. CCing Maciej since he reviewed the spec on WHATWG
Comment 2 Radar WebKit Bug Importer 2015-02-04 09:07:55 PST
Comment 3 erick 2015-06-20 23:17:19 PDT
what about  Safari 9 and picture element ?
it works perfectly with Chrome and Firefox  and it is necessary for responsive design