source elements using both media and srcset attributes
This markup pattern is further detailed in the original proposal by Florian Rivoal.
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 throughmediaattributes as expected, while serving that viewport-appropriate source at the correct resolution is done withsrcset. - A native implementation would allow us to apply the original intrinsic dimensions of the
1xsource 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.
srcsetallows 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.
