# scottjehl/picturefill **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/scottjehl-picturefill).** _How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._ 9,800 stars · 1,046 forks · JavaScript · MIT · archived ## Links - GitHub: https://github.com/scottjehl/picturefill - Homepage: http://scottjehl.github.com/picturefill/ - awesome-repositories: https://awesome-repositories.com/repository/scottjehl-picturefill.md ## Description Picturefill is a responsive image polyfill that adds support for the picture element, srcset, and sizes attributes in browsers that lack native implementation. It emulates the picture element with source media queries and format fallbacks, providing responsive image selection based on viewport size and device pixel ratio. The polyfill reevaluates responsive image sources after dynamic DOM changes to keep displayed images correct, and delivers alternative image formats like WebP with automatic fallback to standard formats in unsupported browsers. It also conserves bandwidth by selecting smaller image candidates on very high-density displays when visual differences are negligible. Picturefill handles serving images by viewport size, resolution, media query, and format support, enabling bandwidth-conscious image delivery and format-negotiated image serving. The library is available as a JavaScript file that can be included in web pages. ## Tags ### System Administration & Monitoring - [Picture Element Polyfills](https://awesome-repositories.com/f/system-administration-monitoring/picture-in-picture-utilities/picture-element-polyfills.md) — Replaces the native picture element with a script-driven equivalent that coordinates source selection across media, type, and density axes. ### Part of an Awesome List - [Srcset Polyfills](https://awesome-repositories.com/f/awesome-lists/devtools/polyfills-and-shims/srcset-polyfills.md) — Provides responsive image selection based on viewport size and device pixel ratio via srcset and sizes. - [Polyfills and Compatibility](https://awesome-repositories.com/f/awesome-lists/devtools/polyfills-and-compatibility.md) — Responsive image polyfill for srcset and sizes. - [General Utilities](https://awesome-repositories.com/f/awesome-lists/more/general-utilities.md) — Responsive image polyfill for older browsers. ### Content Management & Publishing - [Media Query Image Switchers](https://awesome-repositories.com/f/content-management-publishing/media-element-resolution/media-query-image-switchers.md) — Switches image sources at defined layout breakpoints using the picture element with source elements and media attributes. ([source](http://scottjehl.github.io/picturefill/)) ### Development Tools & Productivity - [Srcset Resolution Algorithms](https://awesome-repositories.com/f/development-tools-productivity/source-code-mapping/source-map-resolution/srcset-resolution-algorithms.md) — Parses srcset and sizes attributes to compute effective widths and densities, then picks the optimal source using a greedy selection strategy. ### Graphics & Multimedia - [WebP Fallback Polyfills](https://awesome-repositories.com/f/graphics-multimedia/webp-image-conversions/webp-fallback-polyfills.md) — Delivers WebP images with automatic fallback to standard formats in unsupported browsers. - [Resolution-Based Image Servers](https://awesome-repositories.com/f/graphics-multimedia/image-resolution-downsampling/resolution-based-image-servers.md) — Delivers higher-resolution image sources to high-density displays while serving standard-resolution sources to others. ([source](http://scottjehl.github.io/picturefill/)) ### Networking & Communication - [Media Query Image Switchers](https://awesome-repositories.com/f/networking-communication/media-channel-switching/media-query-image-switchers.md) — Switches image sources at defined layout breakpoints using the picture element with source elements and media attributes. - [Image Format](https://awesome-repositories.com/f/networking-communication/traffic-management-gateways/circuit-breakers/fallback-chains/image-format.md) — Iterates through type-specified source elements to fall back to the next supported image format when the current one is not renderable. ### User Interface & Experience - [Responsive Image Polyfills](https://awesome-repositories.com/f/user-interface-experience/dom-polyfills-for-native/responsive-image-polyfills.md) — Adds support for the picture element, srcset, and sizes attributes in browsers that lack native implementation. ([source](http://scottjehl.github.io/picturefill/)) - [Viewport-Adaptive Image Selectors](https://awesome-repositories.com/f/user-interface-experience/image-dimension-calculators/viewport-layout-calculators/viewport-adaptive-image-selectors.md) — Selects the most appropriate image source based on the browser's viewport dimensions and the image's layout size. ([source](http://scottjehl.github.io/picturefill/)) - [Viewport-Based Asset Switching](https://awesome-repositories.com/f/user-interface-experience/image-dimension-calculators/viewport-layout-calculators/viewport-based-asset-switching.md) — Selects the most appropriate image source based on browser viewport dimensions and layout size. - [DOM Mutation Responsive Image Reevaluators](https://awesome-repositories.com/f/user-interface-experience/responsive-images/dom-mutation-responsive-image-reevaluators.md) — Reevaluates responsive image sources after dynamic DOM changes to keep displayed images correct. - [Density-Aware Bandwidth Optimization](https://awesome-repositories.com/f/user-interface-experience/density-aware-bandwidth-optimization.md) — Prefers lower-resolution image sources on very high-density displays to reduce data transfer when visual differences are negligible. - [DOM Change Responsive Image Reevaluators](https://awesome-repositories.com/f/user-interface-experience/responsive-image-loaders/dom-change-responsive-image-reevaluators.md) — Triggers a fresh evaluation of responsive image elements after dynamic DOM updates to ensure the correct source displays. ([source](http://scottjehl.github.io/picturefill/)) ### Web Development - [Polyfill Injection Scripts](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/script-injections/polyfill-injection-scripts.md) — Injects a JavaScript polyfill that intercepts image element parsing to apply responsive image selection at runtime. - [Responsive Image](https://awesome-repositories.com/f/web-development/es-module-support/polyfills/responsive-image.md) — Adds support for the picture element, srcset, and sizes attributes in browsers that lack native implementation. - [Responsive Image Loaders](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/responsive-image-loaders.md) — Loads the most appropriate image source based on viewport size and device capabilities using the picture element and srcset or sizes attributes. ([source](http://scottjehl.github.io/picturefill/examples/demo-01.html)) - [Media Query Polyfills](https://awesome-repositories.com/f/web-development/media-query-polyfills.md) — Evaluates CSS media queries and pixel density descriptors against the current viewport to select the best image source candidate. - [Modern Image Format Support](https://awesome-repositories.com/f/web-development/modern-image-format-support.md) — Delivers alternative image formats like WebP or SVG to browsers that support them, with fallback sources for others. ([source](http://scottjehl.github.io/picturefill/)) - [Runtime Format Negotiation](https://awesome-repositories.com/f/web-development/modern-image-format-support/runtime-format-negotiation.md) — Delivers alternative image formats like WebP or SVG to browsers that support them, with fallback sources for others. - [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Watches for dynamically added image elements and re-runs polyfill logic to ensure responsive sources are applied after DOM changes. ### Artificial Intelligence & ML - [High-Resolution Image Delivery](https://awesome-repositories.com/f/artificial-intelligence-ml/image-super-resolution-models/high-resolution-synthesis/high-resolution-image-delivery.md) — Delivers higher-resolution image variants to devices with high pixel density displays while respecting bandwidth constraints. ([source](http://scottjehl.github.io/picturefill/examples/demo-03.html))