Picturefill: A <picture> element polyfill

source elements using both media and srcset attributes

This syntax combines the resolution switching of srcset with picture’s ability to tailor sources to the viewport. This has a couple of major benefits over the originally-propsed picture element:

Less verbose and more readable syntax, especially considering the vendor prefixing that comes along with min-device-pixel-ratio. Determining viewport-appropriate sources is handled through media attributes as expected, while serving that viewport-appropriate source at the correct resolution is done with srcset.

A native implementation would allow us to apply the original intrinsic dimensions of the 1x source to the higher-resolution sources rather than simply delivering an image twice the size. This polyfill simply divides the image’s intrinsic width against the screen resolution (1x, 2x, etc.), though I’m sure this can be handled more intelligently in a native implementation.

By sandboxing the resolution in this new attribute, we allow the browser to intervene without compromising the effectiveness of media queries. The decision to serve higher-resolution images based on available bandwidth is a decision best left in the hands of the browser. srcset allows us to define a set of suggested sources based on resolution, while a user setting or automated bandwidth detection in the browser could still intervene. This approach prevents us from breaking the intended “absolute” terms of media queries.