Picturefill 2.3.1 | Responsive Web Design

Picturefill 2.3.1

Responsive Images Picture Fill Logo
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


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

     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

     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.

  • Resource Name

    Picturefill 2.3.1

  • Resource Creator

    Scott Jehl


A Responsive Images approach that you can use today, that mimics the proposed picture element using the real markup.

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.