picturefill

by scottjehl

scottjehl /picturefill

A responsive image polyfill for <picture>, srcset, sizes, and more

10.1K Stars 1.1K Forks Last release: over 3 years ago (3.0.3) MIT License 800 Commits 24 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Picturefill

A responsive image polyfill. * Authors: See Authors.txt * License: MIT

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:

    
    Sample pic

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

    
    Sample pic

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.