A responsive image polyfill.
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:
span
elements. It is no longer maintained.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:
Firefox 38 and 39 has some bugs [1] [2] [3] where images won't update on screen resize. These issues are addressed by Picturefill 3.0.0, and was fixed in Firefox 41.
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>
<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 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/
There are currently no known unsupported browsers, provided that you use the markup patterns provided.