A responsive image polyfill.
Picturefill has three versions:
spanelements. 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:
picture spec, using
% isn't allowed in the
sizes attribute. Using
% will fallback to
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
<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
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.