Picturefill aims to polyfill the standard features of the
picture element and related
media attributes (some of which work on
img elements without a
picture parent as well). Issues and contributions that fall outside of this scope are not likely to be accepted by the project. Some exceptions include workarounds that improve browser support for standard features.
While we always welcome new issues, please take a look through our open and closed issues to see if it's been brought up before. We're happy to reopen closed issues if it still persists.
FAQ / Frequent Issues
Q: Firefox isn't updating the src on window resize.
A: This is a known issue, ever since firefox added partial support in Firefox 38. It's slated to be fixed in Firefox 46.
Q: I have an issue/question about the
A: Since Picturefill is only a polyfill, there's a repo for general
picture discussion here.
Q: I have a question about how to use
A: Understandable—it's a lot of stuff to use! There's a handy resource from Eric Portis on srcset & sizes. Additionally, the picturefill website has a lot of demos and walks through some edge cases and how to solve them.
Working on Picturefill
Picturefill is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the Picturefill project are licensed under MIT license.
General Picturefill discussion takes place in Slack, at http://picturefill.slack.com. To join, send an email to
ricg.io. Discussion of issues pertaining to the responsive images specifications takes place in the RICG IRC channel and issue tracker.
You can connect to the Picturefill Slack channel via IRC (SSL enabled).
Modifying the code
Test that Grunt's CLI is installed by running
grunt --version. If the command isn't found, run
npm install -g grunt-cli. For more information about installing Grunt, see the getting started guide.
- Fork and clone the repo.
npm installto install all dependencies (including Grunt).
gruntto grunt this project.
Assuming that you don't see any red, you're ready to go. Just be sure to run
grunt after making any changes, to ensure that nothing is broken.
master branch now represents the publishing branch. Anything on master should be publishable to npm and bower. When something goes into master, it gets published. Minor version branches (
2.3, etc) also exist to capture in-progress work on a particular version of picturefill. Once work on a version branch is complete, it gets merged into master to be published.
- If no issue already exists for the work you’ll be doing, create one to document the problem(s) being solved and self-assign.
- Create a new branch based off of the minor version branch you're fixing (
2.2, etc) — please don't work in the
masterbranch directly. We recommend naming the branch to match the issue being addressed (
- Add failing tests for the change you want to make. Run
gruntto see the tests fail.
- Fix stuff.
gruntto see if the tests pass. Repeat steps 2-4 until done.
test/*.htmlunit test file(s) in actual browsers to ensure tests pass everywhere.
- Update the documentation to reflect any changes.
- Push to your fork or push your issue-specific branch to the main repo, then submit a pull request against the minor version branch you're fixing.
- Once tested and +1’d by another team member (with no outstanding objections), self-merge into the branch specified in the pull request.
- Once ready to release to the public, merge the minor version branch into master and publish to npm and create a tag for bower.
The rules of semver don’t necessarily apply here in the case of major releases (as a polyfill for a stable spec, we shouldn’t have breaking changes), so we’re using the following:
- MAJOR versions at maintaners’ discretion following significant changes to the codebase (e.g. refactoring core)
- MINOR versions for backwards-compatible enhancements (e.g. performance improvements)
- PATCH versions for backwards-compatible bug fixes (e.g. spec compliance bugs, support issues)
Please don't edit files in the
dist subdirectory as they are generated via Grunt. You'll find source code in the
Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.
While Grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the
test/*.html unit test file(s) in actual browsers.