Picturefill

A responsive image polyfill.

• Authors: Scott Jehl, Mat Marquis, Shawn Jansepar (2.0 refactor lead), and many more: see Authors.txt
• License: MIT

Picturefill has three versions:

• Version 2 (recommended) is a strict polyfill of the Picture element draft specification and is the main version in development.
• Version 1 mimics the Picture element pattern with span elements. It is maintained in the 1.2 branch.

Usage, Demos, Docs

To find out how to use Picturefill on your sites, visit the project and demo site:

Picturefill Documentation, Downloads, and Demos Site

The gotchas

Be it browsers, the picture spec, or picturefill, there are a couple gotchas you should be aware of when working with Picturefill.

• Firefox 38 and 39 has some bugs [1] [2] [3] where images won't update on screen resize. These should be fixed in Firefox 40.

• Per the picture spec, using % isn't allowed in the sizes attribute. Using % will fallback to 100vw.

• Trying to use the src attribute in a browser that doesn't support picture natively can result in a double download. To avoid this, don't use the src attribute on the img tag:

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="default.png" alt="Sample pic" />
</picture>

• If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif:

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt="Sample pic" />
</picture>

Contributing

For information on how to contribute code to Picturefill, check out CONTRIBUTING.md

Issues

If you find a bug in Picturefill, please add it to the issue tracker

Discussion

Picturefill discussion takes place via Slack. For an invitation, visit https://pf-slackin.herokuapp.com/

Support

Picturefill supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided.