# picturefill

> A responsive image polyfill.

Latest version **3.0.3** (published 2018-10-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install picturefill
pnpm add picturefill
yarn add picturefill
bun add picturefill
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2018-10-22 |
| First published | 2012-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/picturefill) |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 0 |
| Unpacked size | 124.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9794 |
| Author | Scott Jehl |
| Maintainers | scottjehl, wilto |
| Keywords | picturefill, srcset, picture, responsive, responsive images |

## Links

- npm: https://www.npmjs.com/package/picturefill
- Repository: https://github.com/scottjehl/picturefill
- Homepage: https://scottjehl.github.io/picturefill/
- Issues: https://github.com/scottjehl/picturefill/issues
- npm.io page: https://npm.io/package/picturefill

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2018-10-22
- 3.0.0-rc1 (3.0.0-rc1) — 2015-09-08
- 3.0.0-beta1 (3.0.0-beta1) — 2015-07-10
- 3.0.2 — 2016-02-12
- 3.0.1 — 2015-09-30
- 3.0.0 — 2015-09-30
- 2.3.1 — 2015-04-09
- 2.3.0 — 2015-03-24
- 2.2.1 — 2015-02-03
- 2.2.0 — 2014-11-24
- 0.1.0 — 2012-11-04

## README

# Picturefill
A [responsive image](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content) polyfill.
* Authors: See [Authors.txt](https://raw.githubusercontent.com/scottjehl/picturefill/master/Authors.txt)
* License: MIT

[![build-status](https://api.travis-ci.org/scottjehl/picturefill.svg)](https://travis-ci.org/scottjehl/picturefill) [<img src="https://pf-slackin.herokuapp.com/badge.svg" alt="Join Slack channel">](https://pf-slackin.herokuapp.com/) [![picturefill on npm](https://img.shields.io/npm/v/picturefill.svg?style=flat)](https://www.npmjs.com/package/picturefill)

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](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content).
* Version 3.0.3 is the current stable release.

## Usage, Demos, Docs
To find out how to use Picturefill, visit the [project site](http://scottjehl.github.com/picturefill/).

## 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]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139560) [[2]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139554) [[3]](https://bugzilla.mozilla.org/show_bug.cgi?id=1135812) 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:

```html
<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:

```html
<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`](CONTRIBUTING.md)

## Issues
If you find a bug in Picturefill, please add it to [the issue tracker](https://github.com/scottjehl/picturefill/issues)

## Discussion
Picturefill discussion takes place via Slack. For an invitation, visit [https://pf-slackin.herokuapp.com/](https://pf-slackin.herokuapp.com/)

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

---
_Source: https://npm.io/package/picturefill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._