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.
Usage, Demos, Docs
To find out how to use Picturefill on your sites, visit the project and demo site:
Be it browsers, the
picture spec, or picturefill, there are a couple gotchas you should be aware of when working with Picturefill.
%isn't allowed in the
%will fallback to
Trying to use the
srcattribute in a browser that doesn't support
picturenatively can result in a double download. To avoid this, don't use the
srcattribute on the
<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
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.