Picturefill 2.3.1

A Responsive Images approach that you can use today, that implements the Editors Draft for the proposed <picture> element with srcset and sizes attributes. 

Update

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  picture source  elements.

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 srcset and sizes…

<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.

Code Pen Example of Exporter

See the Pen SRCSET & Sizes – RWD Images – Picturefill 2.0 by Justin Avery (@justincavery) on CodePen.