PHPackages nswdpc/silverstripe-progressive-image - 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. [Image & Media](/categories/media) 4. / 5. nswdpc/silverstripe-progressive-image AbandonedArchivedSilverstripe-vendormodule[Image & Media](/categories/media) nswdpc/silverstripe-progressive-image ===================================== A progressive image loader for Silverstripe 4 v1.2.2(3y ago)32.9k1BSD-3-ClausePHP Since Aug 13Pushed 3y ago4 watchersCompare [ Source](https://github.com/nswdpc/silverstripe-progressive-image)[ Packagist](https://packagist.org/packages/nswdpc/silverstripe-progressive-image)[ RSS](/packages/nswdpc-silverstripe-progressive-image/feed)WikiDiscussions master Synced 2d ago READMEChangelog (9)Dependencies (4)Versions (11)Used By (0) Progressive Image Loader for Silverstripe ========================================= [](#progressive-image-loader-for-silverstripe) Archiving soon -------------- [](#archiving-soon) > ðŸŠĶ As all evergreen browsers now support the loading="lazy" attribute, no further feature updates will be made to this module. > > We recommend uninstalling this module and replacing any progessive image variables with the standard Silverstripe equivalent in your project templates. > > More: Features -------- [](#features) This module does progressive image loading using IntersectionObserver (v1). [Browser support for IntersectionObserver](https://caniuse.com/#search=intersectionobserver) (currently all the important ones). While the module does add `loading="lazy"` to img tags, this module provides a polyfill for browsers that [don't yet support image lazy loading natively](https://caniuse.com/?search=loading%3Dlazy) (tl;dr Safari). Installation ------------ [](#installation) The only supported method of installing this module is via composer ``` composer require nswdpc/silverstripe-progressive-image ``` Usage ----- [](#usage) Call the thumbnail rendering methods directly within your template: ``` $ProgressiveFill(420,280,90) ``` In place of ``` $Fill(420,280) ``` Requirements ------------ [](#requirements) When one of the `$Progressive*` methods is called, Requirements will automatically be added via the Requirements API, these are loaded via data: uris with SRI hashes supplied ### Templates [](#templates) ``` NSWDPC ProgressiveImage ProgressiveImage.ss -> template containing HTML loading the image Script.ss -> provides the JS to handle image replacement Style.ss -> provides CSS to assist with image replacement ``` How it works ------------ [](#how-it-works) A thumbnail with 10% of the width/height of the requested size and a quality of 1 will be created. This will be the main image to load. The final image will be created using the requested size and quality (420x280 @ 80% quality in the ProgressiveFill example above) When the page loads, the tiny, low quality image will display by default, once the image scrolls or appears in the viewport, the larger image will load, thanks to IntersectionObserver. Notes ----- [](#notes) ### Supported thumbnailing methods: [](#supported-thumbnailing-methods) - ProgressiveScaleWidth - ScaleWidth from [silverstripe/assets](https://github.com/silverstripe/silverstripe-assets) - ProgressiveFill - Fill from [silverstripe/assets](https://github.com/silverstripe/silverstripe-assets) (was ProgressiveCroppedImage) - ProgressivePad - Pad from [silverstripe/assets](https://github.com/silverstripe/silverstripe-assets) - ProgressiveFillMax - FillMax from [silverstripe/assets](https://github.com/silverstripe/silverstripe-assets) - ProgressiveFocusFillMax - FocusFillMax from [jonom/focuspoint](https://github.com/jonom/silverstripe-focuspoint) - ProgressiveFocusFill - FocusFill from [jonom/focuspoint](https://github.com/jonom/silverstripe-focuspoint) ### Inline script and css removal [](#inline-script-and-css-removal) To support Content Security Policies (CSP), the controller extension loading inline scripts and css plus related templates have been removed. Thanks ------ [](#thanks) - Some inspiration provided by: License ------- [](#license) [BSD-3-Clause](./LICENSE.md) Maintainers ----------- [](#maintainers) - [dpcdigital@NSWDPC:~$](https://dpc.nsw.gov.au) Bugtracker ---------- [](#bugtracker) We welcome bug reports, pull requests and feature requests on the Github Issue tracker for this project. Please review the [code of conduct](./code-of-conduct.md) prior to opening a new issue. Security -------- [](#security) If you have found a security issue with this module, please email digital\[@\]dpc.nsw.gov.au in the first instance, detailing your findings. Development and contribution ---------------------------- [](#development-and-contribution) If you would like to make contributions to the module please ensure you raise a pull request and discuss with the module maintainers. Please review the [code of conduct](./code-of-conduct.md) prior to completing a pull request. ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community14 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 84.6% of commits — single point of failure 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 ~210 days Recently: every ~197 days Total 9 Last Release 1148d ago Major Versions v0.2.1 → v1.02021-01-20 ### Community Maintainers ![](https://www.gravatar.com/avatar/1caefd99092b4a43254e48c40347224f671032ec1ffc3a457e06a7e9ab6e7c02?d=identicon)[nswdpc](/maintainers/nswdpc) --- Top Contributors [![JamesDPC](https://avatars.githubusercontent.com/u/69664712?v=4)](https://github.com/JamesDPC "JamesDPC (33 commits)")[![tardinha](https://avatars.githubusercontent.com/u/457209?v=4)](https://github.com/tardinha "tardinha (3 commits)")[![Juanitou](https://avatars.githubusercontent.com/u/807463?v=4)](https://github.com/Juanitou "Juanitou (2 commits)")[![MrJamesEllis](https://avatars.githubusercontent.com/u/603960?v=4)](https://github.com/MrJamesEllis "MrJamesEllis (1 commits)") --- Tags imageintersectionobserverlazy-loadingperformancesilverstripeimagesspeedintersection-observerperf ### Code Quality TestsPHPUnit Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/nswdpc-silverstripe-progressive-image/health.svg) ``` [![Health](https://phpackages.com/badges/nswdpc-silverstripe-progressive-image/health.svg)](https://phpackages.com/packages/nswdpc-silverstripe-progressive-image) ``` ### Alternatives [wp-media/imagify-plugin Image optimization plugin for WordPress by WP Media. 7960.9k](/packages/wp-media-imagify-plugin)[moc/imageoptimizer Flow package that optimizes generated thumbnail images (jpg, png, gif, svg) for web presentation. 31106.8k](/packages/moc-imageoptimizer)[christophlehmann/imgproxy TYPO3 Extension for serving images with imgproxy. 1543.1k](/packages/christophlehmann-imgproxy) PHPackages ÂĐ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)