picturefill
A responsive image polyfill for <picture>, srcset, and sizes, now deprecated as browsers have native support.
What is picturefill?
Picturefill is a responsive image polyfill that implemented support for the `<picture>` element, `srcset`, and `sizes` attributes in browsers lacking native capabilities. It solved the problem of delivering appropriately sized images across different devices and screen resolutions during a time when browser support was inconsistent. The project is now deprecated as modern browsers have robust built-in support for these features.
Frontend developers and web designers who needed to implement responsive images in websites before widespread browser support, particularly those working on cross-browser compatible projects.
Developers chose Picturefill because it provided a reliable, lightweight way to use responsive image syntax without waiting for browser vendors to catch up, ensuring better performance and user experience during the transition period.
Overview
A responsive image polyfill for <picture>, srcset, sizes, and more
Use Cases
Best For
- Implementing responsive images in older browsers without native support
- Polyfilling the `<picture>` element for cross-browser compatibility
- Using `srcset` and `sizes` attributes in projects requiring broad browser reach
- Transitioning websites to modern responsive image patterns before browser adoption
- Fixing browser-specific bugs like Firefox image update issues on resize
- Ensuring fallback image strategies in non-supporting environments
Not Ideal For
- Modern web projects targeting only browsers with native responsive image support (e.g., Chrome 90+, Firefox 41+)
- Teams requiring actively maintained polyfills with regular updates and security fixes
- Applications where JavaScript must be minimized or disabled for performance or accessibility
- Use cases needing advanced image optimization beyond srcset/sizes, like automatic format selection or lazy loading
Pros & Cons
Pros
Enabled use of <picture>, srcset, and sizes in browsers lacking native support, ensuring consistent responsive image delivery during the transition period, as highlighted in its value proposition.
Versions 2 and 3 offered minimal JavaScript overhead to mimic the Picture element draft specification, reducing performance impact on older sites.
Addressed specific issues like Firefox image update bugs on resize, providing reliable fallbacks as noted in the 'gotchas' section of the README.
Followed evolving HTML standards, helping developers adopt compliant markup patterns before widespread browser adoption.
Cons
The project is archived and no longer recommended, with no updates or support, as explicitly stated in the README, making it risky for new deployments.
Relies on JavaScript to polyfill features, which can fail in JS-disabled environments or add unnecessary bloat where native support exists.
Requires specific HTML patterns to avoid issues like double downloads, as detailed in the 'gotchas', increasing development overhead.
Frequently Asked Questions
Related Projects
A curated list of awesome lists - @sindresorhus😎 Awesome lists about all kinds of interesting topics
javascript-algorithms📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
You Don't Know JSA book series (2 published editions) on the JS language.
Clean Code JavaScriptClean Code concepts adapted for JavaScript
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.