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
spanelements. It is maintained in the 1.2 branch.
To find out how to use Picturefill on your sites, visit the project and demo site:
Picturefill Documentation, Downloads, and Demos Site
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
picturespec, using%isn't allowed in thesizesattribute. Using%will fallback to100vw. -
Trying to use the
srcattribute in a browser that doesn't supportpicturenatively can result in a double download. To avoid this, don't use thesrcattribute on theimgtag:
<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>For information on how to contribute code to Picturefill, check out CONTRIBUTING.md
If you find a bug in Picturefill, please add it to the issue tracker
Picturefill discussion takes place via Slack. For an invitation, visit https://pf-slackin.herokuapp.com/
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.