PHPackages scottjehl/picturefill - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. scottjehl/picturefill AbandonedArchivedComponent[Utility & Helpers](/categories/utility) scottjehl/picturefill ===================== A responsive image polyfill for <picture>, srcset, sizes, and more. 3.0.3(9y ago)9.8k32.1k↓19.2%1.0k[1 issues](https://github.com/scottjehl/picturefill/issues)1MITJavaScript Since Jul 10Pushed 3y ago333 watchersCompare [ Source](https://github.com/scottjehl/picturefill)[ Packagist](https://packagist.org/packages/scottjehl/picturefill)[ Docs](http://scottjehl.github.com/picturefill/)[ RSS](/packages/scottjehl-picturefill/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)DependenciesVersions (17)Used By (1) Picturefill =========== [](#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 This project is archived and deprecated! ---------------------------------------- [](#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](https://camo.githubusercontent.com/bde6569a32ff8f6ee29bc89ca6f025548665c7b36867e2a18ce25d9cb2482631/68747470733a2f2f6170692e7472617669732d63692e6f72672f73636f74746a65686c2f7069637475726566696c6c2e737667)](https://travis-ci.org/scottjehl/picturefill) [![Join Slack channel](https://camo.githubusercontent.com/0ed4dd75e16b45b6f20c3c17af175dfaec257f3f65ee6786d05dd8a35af0d9e2/68747470733a2f2f70662d736c61636b696e2e6865726f6b756170702e636f6d2f62616467652e737667)](https://pf-slackin.herokuapp.com/) [![picturefill on npm](https://camo.githubusercontent.com/1809311bc7e84cb7ad3fbd2f9035d91229397eb3268d9b5dea0940f47829110e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f7069637475726566696c6c2e7376673f7374796c653d666c6174)](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 ------------------ [](#usage-demos-docs) To find out how to use Picturefill, visit the [project site](http://scottjehl.github.io/picturefill/). The gotchas ----------- [](#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: ``` ``` - 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: ``` ``` Contributing ------------ [](#contributing) For information on how to contribute code to Picturefill, check out [`CONTRIBUTING.md`](CONTRIBUTING.md) Issues ------ [](#issues) If you find a bug in Picturefill, please add it to [the issue tracker](https://github.com/scottjehl/picturefill/issues) Discussion ---------- [](#discussion) Picturefill discussion takes place via Slack. For an invitation, visit Support ------- [](#support) There are currently no known unsupported browsers, provided that you use the markup patterns provided. ### Health Score 51 — FairBetter than 96% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity61 Solid adoption and visibility Community43 Growing community involvement Maturity71 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~103 days Recently: every ~134 days Total 7 Last Release 3347d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d08d953963665c9f1b75d864a34c4b2d36cdc77dcc5f453e867c33a9e4674972?d=identicon)[ricg](/maintainers/ricg) --- Top Contributors [![Wilto](https://avatars.githubusercontent.com/u/439942?v=4)](https://github.com/Wilto "Wilto (162 commits)")[![scottjehl](https://avatars.githubusercontent.com/u/214783?v=4)](https://github.com/scottjehl "scottjehl (133 commits)")[![mike-engel](https://avatars.githubusercontent.com/u/464447?v=4)](https://github.com/mike-engel "mike-engel (36 commits)")[![albell](https://avatars.githubusercontent.com/u/1142025?v=4)](https://github.com/albell "albell (34 commits)")[![jansepar](https://avatars.githubusercontent.com/u/81582?v=4)](https://github.com/jansepar "jansepar (32 commits)")[![johnbender](https://avatars.githubusercontent.com/u/23505?v=4)](https://github.com/johnbender "johnbender (29 commits)")[![gBokiau](https://avatars.githubusercontent.com/u/108301?v=4)](https://github.com/gBokiau "gBokiau (8 commits)")[![nschonni](https://avatars.githubusercontent.com/u/1297909?v=4)](https://github.com/nschonni "nschonni (7 commits)")[![jefflembeck](https://avatars.githubusercontent.com/u/109699?v=4)](https://github.com/jefflembeck "jefflembeck (7 commits)")[![zcorpan](https://avatars.githubusercontent.com/u/244772?v=4)](https://github.com/zcorpan "zcorpan (5 commits)")[![attiks](https://avatars.githubusercontent.com/u/105144?v=4)](https://github.com/attiks "attiks (5 commits)")[![jonathantneal](https://avatars.githubusercontent.com/u/188426?v=4)](https://github.com/jonathantneal "jonathantneal (5 commits)")[![davebeesleyarchived](https://avatars.githubusercontent.com/u/1854049?v=4)](https://github.com/davebeesleyarchived "davebeesleyarchived (3 commits)")[![jegtnes](https://avatars.githubusercontent.com/u/1315463?v=4)](https://github.com/jegtnes "jegtnes (3 commits)")[![fgnass](https://avatars.githubusercontent.com/u/89450?v=4)](https://github.com/fgnass "fgnass (3 commits)")[![andreruffert](https://avatars.githubusercontent.com/u/464300?v=4)](https://github.com/andreruffert "andreruffert (3 commits)")[![bruceontheloose](https://avatars.githubusercontent.com/u/1419972?v=4)](https://github.com/bruceontheloose "bruceontheloose (3 commits)")[![jcutrell](https://avatars.githubusercontent.com/u/302832?v=4)](https://github.com/jcutrell "jcutrell (2 commits)")[![cbieser](https://avatars.githubusercontent.com/u/1560584?v=4)](https://github.com/cbieser "cbieser (2 commits)")[![saranrapjs](https://avatars.githubusercontent.com/u/707098?v=4)](https://github.com/saranrapjs "saranrapjs (2 commits)") ### Embed Badge ![Health badge](/badges/scottjehl-picturefill/health.svg) ``` [![Health](https://phpackages.com/badges/scottjehl-picturefill/health.svg)](https://phpackages.com/packages/scottjehl-picturefill) ``` ### Alternatives [caffeinated/menus Laravel Menus 134159.5k5](/packages/caffeinated-menus) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)