Skip to content
A responsive image polyfill for <picture>, srcset, sizes, and more
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 3.0.2 Feb 12, 2016
examples improve intrinsic dimension demo (see #628) Feb 2, 2016
logos More docs work. Closes #521. Jun 18, 2015
src 3.0.2 Feb 12, 2016
tests fix failing tests Oct 21, 2015
.editorconfig Add EditorConfig for whitespacing May 28, 2014
.gitignore Merge branch '3.0' Sep 30, 2015
.jscsrc code cleanup + code style May 17, 2015
.jshintrc add browser environment setting Jul 16, 2014
.npmignore Add .npmignore Feb 12, 2017
.travis.yml make CI build faster Aug 28, 2014
Authors.txt Add Alex Bell to authors Aug 21, 2015
CONTRIBUTING.md Adding an issue-submission section and FAQ Oct 19, 2015
LICENSE
README.md Update Readme to correct point number Mar 20, 2017
bower.json Readme and meta information updates. Sep 30, 2015
composer.json Adding the composer.json file. Fixes #500. Jun 10, 2015
gruntfile.js Replace picturefill.json with package.json Feb 5, 2016
index.html Implement changes made in #649 Apr 12, 2016
package.json Picturefill 3.0.3 Mar 20, 2017

README.md

Picturefill

A responsive image polyfill.

build-status Join Slack channel picturefill on npm

Picturefill has three versions:

  • Version 1 mimics the Picture element pattern with span elements. 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.

The gotchas

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>
  • 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>

Contributing

For information on how to contribute code to Picturefill, check out CONTRIBUTING.md

Issues

If you find a bug in Picturefill, please add it to the issue tracker

Discussion

Picturefill discussion takes place via Slack. For an invitation, visit https://pf-slackin.herokuapp.com/

Support

There are currently no known unsupported browsers, provided that you use the markup patterns provided.

You can’t perform that action at this time.