For more info: see project home.
sourceelements using both
This markup pattern is further detailed in the original proposal by Florian Rivoal.
This syntax combines the resolution switching of
picture’s ability to tailor sources to the viewport. This has a couple of major benefits over the originally-propsed
min-device-pixel-ratio. Determining viewport-appropriate sources is handled through
mediaattributes as expected, while serving that viewport-appropriate source at the correct resolution is done with
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.
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.
Does not perform any resolution switching.