Skip to content
This repository has been archived by the owner on Sep 6, 2022. It is now read-only.

scottjehl/picturefill

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
February 12, 2016 18:33
June 18, 2015 17:06
October 21, 2015 14:21
September 30, 2015 13:57
May 17, 2015 12:11
February 12, 2017 15:52
August 28, 2014 21:15
August 21, 2015 14:17
September 6, 2022 11:00
March 20, 2017 17:11

Picturefill

A responsive image polyfill.

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!`

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.