PHPackages tito10047/progressive-image-bundle - 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. tito10047/progressive-image-bundle ActiveSymfony-bundle[Image & Media](/categories/media) tito10047/progressive-image-bundle ================================== High-performance progressive image loading bundle for Symfony with Blurhash placeholders, zero CLS, and smart responsive strategies. 1.1.6(1mo ago)15173[1 PRs](https://github.com/tito10047/progressive-image-bundle/pulls)MITPHPPHP >=8.2CI passing Since Dec 29Pushed 1mo ago1 watchersCompare [ Source](https://github.com/tito10047/progressive-image-bundle)[ Packagist](https://packagist.org/packages/tito10047/progressive-image-bundle)[ RSS](/packages/tito10047-progressive-image-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (6)Dependencies (32)Versions (19)Used By (0) [![Logo](docs/logo/SVG/ImageBundleLogo-01-cropped.svg)](docs/logo/SVG/ImageBundleLogo-01-cropped.svg) Progressive Image Bundle ============================================================================================================================== [](#-progressive-image-bundle) [![Build Status](https://camo.githubusercontent.com/cde982b3b172f322be8dfd1b134e275f64a00e643715db34c7eca80cce031c59/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7469746f31303034372f70726f67726573736976652d696d6167652d62756e646c652f63692e796d6c3f6272616e63683d6d61696e)](https://github.com/tito10047/progressive-image-bundle/actions)[![PHP-CS-Fixer](https://camo.githubusercontent.com/38097d10f9a68276950fb4002f1453e8d3327d69d6d30cf5189692900c770a14/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7469746f31303034372f70726f67726573736976652d696d6167652d62756e646c652f63692e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65)](https://github.com/tito10047/progressive-image-bundle/actions/workflows/ci.yml)[![PHPStan](https://camo.githubusercontent.com/35421bdabb85bb840c47ef58924b356f022a652f9e2d0b29c3fee32b6fe2678b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7469746f31303034372f70726f67726573736976652d696d6167652d62756e646c652f63692e796d6c3f6272616e63683d6d61696e266c6162656c3d7068707374616e)](https://github.com/tito10047/progressive-image-bundle/actions/workflows/ci.yml)[![Latest Stable Version](https://camo.githubusercontent.com/18381820457a38cc126f37418637f662d2231749045a97a1ea61d79be2d7fcf4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7469746f31303034372f70726f67726573736976652d696d6167652d62756e646c652e737667)](https://packagist.org/packages/tito10047/progressive-image-bundle)[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE)[![PHP Version](https://camo.githubusercontent.com/5814289f8aa8cd4671b9582f7c4172d2d1af7fccd603b5d707234f0e02ad69d8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344253230382e322d3838393262662e737667)](https://php.net)[![Symfony Version](https://camo.githubusercontent.com/d667415dd34ff31d986621444fb17659993b42fd9bd49c64bbb45f09de2c0eaa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53796d666f6e792d253345253344253230362e342d626c61636b3f6c6f676f3d73796d666f6e79)](https://symfony.com/)[![Symfony Style](https://camo.githubusercontent.com/40e2296e85dbcd539c9773dad57ecb272159ac077b129f0a651fc2291c8b5d18/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64652532307374796c652d73796d666f6e792d626c61636b3f6c6f676f3d73796d666f6e79)](https://symfony.com/)[![Coverage Status](https://camo.githubusercontent.com/6b1152d4c4b12544dae5d394774646417d67a4f8386f617bc50dd98452e3224f/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f7469746f31303034372f70726f67726573736976652d696d6167652d62756e646c652f62616467652e7376673f6272616e63683d6d61696e)](https://coveralls.io/github/tito10047/progressive-image-bundle?branch=main) ### High-performance, Zero-config, Fully Responsive Images for Symfony. [](#high-performance-zero-config-fully-responsive-images-for-symfony) This bundle handles everything you need for modern image management. From **fully responsive images** with Tailwind-like selectors, to **blur placeholders**, to \* *automatic generation of all required sizes*\* on local or network storage. --- ✨ Key Features -------------- [](#-key-features) - 🚀 **Zero Configuration:** Install and use. Most features work out of the box. - 🎨 **Blur & Error Placeholders:** Users see a beautiful Blurhash placeholder while loading. If an image is not found, the bundle automatically displays a stylish error placeholder. - 🖼️ **Responsive via ``:** Uses the modern `` element with multiple `` tags for optimal browser selection and performance. - 📱 **Tailwind-like Selectors:** Define responsiveness naturally directly in your template using familiar breakpoints. - 🖼️ **Retina Support:** Automatically generates 1x, 2x (and more) versions for high-density displays. - ⚙️ **Automatic Generation:** The bundle automatically generates all necessary image sizes on disk (local or network), saving time and resources. - 🎯 **Zero CLS (Cumulative Layout Shift):** Automatically reserves space for the image, preventing content jumping during load. - ⚡ **Smart Preload:** Automatically injects `` for critical images (hero images), significantly improving LCP scores. --- 🎨 Usage ------- [](#-usage) Simply use the Twig component. The bundle takes care of everything — it automatically calculates the required image dimensions for each breakpoint, resizes the original, and generates all necessary variants on the fly. ``` {# Basic usage - everything is automatic #} {# With Tailwind-like selectors for perfect responsiveness #} ``` ### 📱 Selector Examples (Breakpoint Assignment) [](#-selector-examples-breakpoint-assignment) The bundle supports flexible size assignment based on breakpoints you know from Tailwind or Bootstrap. For each selector, it automatically calculates the final pixel dimensions based on the container width defined by your CSS framework (Bootstrap or Tailwind) and generates the corresponding image. SelectorMeaningResulting behavior`6`6 grid columns on all breakpointsWidth: 50% of container, original aspect ratio`md:6`6 grid columns from `md` breakpointFrom `md` up: 50% of container, below `md`: full width`lg:4@landscape`4 columns from `lg` with 16:9 aspect ratioFrom `lg` up: 33.3% of container, cropped to 16:9 ratio`xs:12@square`12 columns on `xs` with 1:1 aspect ratioFull width container, cropped to 1:1 square`xxl:[430x370]`Explicit dimensions for a specific breakpointExact size 430x370px on `xxl` and larger`xl:[100%]@landscape`100% container width with landscape aspect ratioFull width container, cropped to 16:9 ratio`lg:4@square|circle`4 columns on `lg` with custom modifierPasses `circle` to processing pipeline (e.g. crop)> **What is a "container"?** The bundle automatically detects your CSS framework (Bootstrap or Tailwind) and extracts the exact container widths for each breakpoint from its configuration. It then uses these values to calculate the precise pixel dimensions for your images. --- 🚀 Advanced Features ------------------- [](#-advanced-features) ### Point of Interest (PoI) Cropping [](#point-of-interest-poi-cropping) Define a focal point (e.g., `75x25`) so the most important object remains in frame regardless of the crop. ### Smart Upscaling Protection [](#smart-upscaling-protection) The bundle never generates an image larger than the original. If you need 1200px but the original is only 1000px, the bundle uses the original and prevents blurring. ### Stream-based Metadata [](#stream-based-metadata) To retrieve dimensions and Blurhash, the bundle doesn't load the entire image into RAM (no 20MB files in memory). It uses PHP streams to read only the necessary header bytes. ### Custom Modifiers & Filters [](#custom-modifiers--filters) Extend the selector logic with your own modifiers (e.g., `lg:4|circle`). You can implement custom logic for filters like `circle`, `grayscale`, or `sepia` and even prioritize them to override default behavior. --- 📦 Installation -------------- [](#-installation) ``` composer require tito10047/progressive-image-bundle ``` --- ⚙️ Optional Configuration ------------------------- [](#️-optional-configuration) ``` # config/packages/progressive_image.yaml progressive_image: responsive_strategy: grid: framework: tailwind # or bootstrap ratios: landscape: "16/9" portrait: "3/4" square: "1/1" image_cache_enabled: true retina: enabled: true multipliers: [1, 2] ``` --- 📄 License --------- [](#-license) MIT License. See [LICENSE](LICENSE) for more information. --- 📚 Documentation --------------- [](#-documentation) For detailed guides, configuration, and advanced features, check out our full documentation: - [**Introduction**](docs/index.md) - [**Installation**](docs/installation.md) - [**Configuration**](docs/configuration.md) - [**Usage (Twig component)**](docs/usage.md) - [**Responsive Strategy**](docs/responsive-strategy.md) - [**Advanced Features**](docs/advanced.md) --- 📜 Changelog ----------- [](#-changelog) All notable changes to this project are documented in [CHANGELOG.md](CHANGELOG.md). ### Health Score 46 — FairBetter than 93% of packages Maintenance89 Actively maintained with recent releases Popularity20 Limited adoption so far Community7 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~5 days Recently: every ~14 days Total 16 Last Release 53d ago Major Versions 0.1.2 → 1.0.02026-01-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/3d6d558226302620ec462f64672e9dc81609227626923a808005641e76e8c38f?d=identicon)[tito10047](/maintainers/tito10047) --- Top Contributors [![tito10047](https://avatars.githubusercontent.com/u/11459248?v=4)](https://github.com/tito10047 "tito10047 (123 commits)") --- Tags blurhashbootstrapphpresponsive-imagessymfonysymfony-bundlesymfony-uxtailwind-csstwig-componentssymfonyuisymfony-uxpaginationbatchpreference ### Code Quality Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/tito10047-progressive-image-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/tito10047-progressive-image-bundle/health.svg)](https://phpackages.com/packages/tito10047-progressive-image-bundle) ``` ### Alternatives [sylius/sylius E-Commerce platform for PHP, based on Symfony framework. 8.4k5.6M651](/packages/sylius-sylius)[easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k16.7M310](/packages/easycorp-easyadmin-bundle)[prestashop/prestashop PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers. 9.0k15.4k](/packages/prestashop-prestashop)[sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M152](/packages/sulu-sulu)[lexik/translation-bundle This bundle allows to import translation files content into the database and provide a GUI to edit translations. 4362.7M19](/packages/lexik-translation-bundle)[forumify/forumify-platform 121.8k11](/packages/forumify-forumify-platform) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)