A responsive image polyfill.
- Authors: See Authors.txt
- License: MIT
This project is archived and deprecated!
At the time, it helped us transition to responsive image HTML patterns until browsers supported them. Support and fallback strategies are now very good, and this project is no longer needed or recommended. Thanks everyone!`
Picturefill has three versions:
- Version 1 mimics the Picture element pattern with
spanelements. It is no longer maintained.
- Version 2 is a lightweight polyfill of the Picture element draft specification.
- Version 3.0.3 is the current stable release.
Usage, Demos, Docs
To find out how to use Picturefill, visit the project site.
Be it browser issues, the responsive images specifications, or Picturefill itself, 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/gif;base64,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/
There are currently no known unsupported browsers, provided that you use the markup patterns provided.