PHPackages bravo3/srcset - 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. bravo3/srcset ActiveLibrary[Utility & Helpers](/categories/utility) bravo3/srcset ============= Custom srcset implementation 1.1.0(10y ago)156MITJavaScript Since Feb 11Pushed 10y ago1 watchersCompare [ Source](https://github.com/bravo3/srcset)[ Packagist](https://packagist.org/packages/bravo3/srcset)[ RSS](/packages/bravo3-srcset/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (3)Used By (0) Responsive Images Custom Srcset Implementation ============================================== [](#responsive-images-custom-srcset-implementation) *This is not a srcset polyfill!* What This Is ------------ [](#what-this-is) Taking from the concept of the `img`'s `srcset` tag, this will create a custom implementation that will select the best source image based on the *images dimensions*, not the browsers. This has advantages over the traditional srcset implementation: - You only need to define one srcset for images *anywhere* in your layout - You don't need to work out how large the image will be in given location relative to the overall browser width - Unified logic and support across all browsers What This Doesn't Do -------------------- [](#what-this-doesnt-do) - Create a `srcset` polyfill - Take a 'sizes' argument Requirements ------------ [](#requirements) For this process to work, you must force at least one dimension of your image. A good example of this would be to set the image width to a percentage and the height to auto. This will allow your image to dynamically fit into your layout and use the most appropriate variation of the image. To use the library, just include the Javascript file in your project. Usage ----- [](#usage) The syntax is similar to a normal srcset implementation, however you can only define conditions for height and width: ``` ``` Thus the `data-srcset` attribute has the syntax "filename condition \[condition\],..". It's important to note two things: 1. Leave the `src` attribute empty 2. Order your `data-srcset` from largest to smallest The image handler will look from left to right and test conditions, if the condition passes it will use the filename for the `src` value. Putting your largest images at the end will pass when really we want to use a smaller image. If all conditions fail, the first filename will be used. A condition can be in the form 'xxxh' or 'xxxw' (eg '100w', '75h') representing a height and width requirement respectively. It only makes sense for the condition to match a forced dimension. If height is auto, setting a condition of 100h will make no sense. Controling Image Updates ------------------------ [](#controling-image-updates) Only images with `data-srcset` will be updated. Updates occur when you first load the page and when the browser screen is resized. If you load content via an AJAX request, you will want to call `ResponsiveImages.update()`, this will trigger a run of the update process which will update your new content. Restraints for the Device Pixel Ratio ------------------------------------- [](#restraints-for-the-device-pixel-ratio) The pixel ratio is the image dimension coefficient required to get the optimum image size for devices with a high pixel density or a browser window that has been zoomed. For example, modern mobile devices fake their screen width but offer a pixel ratio (of 2.0 or 3.0, for example). This allows you to offer a higher-res image to get the most out of their screen resolution. A desktop browser that is zoomed out now requires less pixels to render the image, so you can now offer a lower-res image to complete the request without any loss of quality. To control this you can set the `min|max_pixel_ratio` properties of the `ResponsiveImages` object. If you're trying to optimise bandwidth, you might want to set the `max_pixel_ratio` to a low value (eg 1.0) to offer a practical image size instead of transmitting desktop-quality images to physically small devices with very-high-res screens. ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community7 Small or concentrated contributor base Maturity64 Established project with proven stability 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 ~112 days Total 2 Last Release 4002d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0a82084f38dfacd80655e26cd45b5bb9ab43eaa09b3a97c5c4a2350fe41b0c20?d=identicon)[jordonsc](/maintainers/jordonsc) --- Top Contributors [![jordonsc](https://avatars.githubusercontent.com/u/347611?v=4)](https://github.com/jordonsc "jordonsc (3 commits)") ### Embed Badge ![Health badge](/badges/bravo3-srcset/health.svg) ``` [![Health](https://phpackages.com/badges/bravo3-srcset/health.svg)](https://phpackages.com/packages/bravo3-srcset) ``` ### Alternatives [vuestorefront/magento2-vue-cart-sync Synchronize Magento cart between Vue Storefront 1958.5k](/packages/vuestorefront-magento2-vue-cart-sync)[inspiredminds/contao-glightbox Contao extension to integrate GLightbox. 1223.3k1](/packages/inspiredminds-contao-glightbox) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)