A Responsive Images approach that you can use today, that implements the Editors Draft for the proposed <picture> element with srcset and sizes attributes.
Picture Fill has recently been updated to 2.3.1. Picturefill has been updated and working even better then before. It now matches the spec with regards to a fallback for sizes and fixes some errors with IE8/10/11 and fixed a bug when it comes to double downloading on orientation or resize.
Picturefill works best in browsers that support CSS3 media queries. It includes (externally) the matchMedia polyfill which makes matchMedia work in
media-query -supporting browsers that don’t have
matchMedia , or at least allows media types to be tested in most any browser.
matchMedia and the
matchMedia polyfill are not required for
picturefill to work, but they are required to support the
media attributes on
The two examples below cover the pixel density and media query(sizes) based approaches to the latest
<picture> proposal. You should note that both approaches have the familiar
src element as well which acts as a fallback for any browser that doesn’t support the new element (which is almost all of them at the moment
The first example uses the
x descriptor to define the pixel density….
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/smallx1.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/largex2.png 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/largex1.png 1x" alt="Images" />
… while the second example uses the combination of
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/smallx1.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/largex2.png 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/largex1.png 1000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/mediumx2.png 750w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/mediumx1.png 500w" sizes="(min-width: 900px) 33vw,(min-width: 600px) 50vw, 100vw" alt="Images" />
Code Pen Example of Exporter
See the Pen Device Pixel Density – RWD Images – Picturefill 2.0 by Justin Avery (@justincavery) on CodePen.