PHPackages vladovinkin/yii2-imgopt - 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. vladovinkin/yii2-imgopt ActiveYii2-extension[Image & Media](/categories/media) vladovinkin/yii2-imgopt ======================= Image optimization widget for Yii2 Framework with auto WebP image format generation from PNG/JPG files. 1.2.1(3y ago)024Apache-2.0PHPPHP >=5.4.0 Since Oct 20Pushed 3y agoCompare [ Source](https://github.com/vladovinkin/yii2-imgopt)[ Packagist](https://packagist.org/packages/vladovinkin/yii2-imgopt)[ RSS](/packages/vladovinkin-yii2-imgopt/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (1)Versions (2)Used By (0) Image widget with an auto WebP file generation for Yii2 Framework ================================================================= [](#image-widget-with-an-auto-webp-file-generation-for-yii2-framework) **ImgOpt** is an image optimization widget for [Yii2 Framework](https://www.yiiframework.com) with auto [WebP](https://developers.google.com/speed/webp) image format generation from `PNG` and `JPG` files. How to make my website faster? ------------------------------ [](#how-to-make-my-website-faster) [My website](https://www.pelock.com) had all the beautiful images and screenshots, but there was one problem. Most of them were in `PNG` format, some of them weighted around 200 kB. And it adds up to the point where my website loading time was just slow. I found about the WebP format, read that it's supported in the latest browsers and if it's not (only older Safari browsers), there's a way to overcome this and serve the default `PNG` or `JPG` images. Perfect. *But* the entire process would require me to go manually and use some sort of image conversion tool, upload new WebP images to the server and upgrade my `HTML` code. To hell with that! We can do better! Automate PNG & JPG to WebP conversion ----------------------------------------- [](#automate-png--jpg-to-webp-conversion) I have decided to create a Yii2 widget that would automate this task. What it does? Instead of static images like this: ``` ``` it will automatically generate an extra image in new [WebP](https://developers.google.com/speed/webp) format (in the same directory, where the provided image is located) and serve it to your browser in HTML `` tag, with a default fallback to the original image for browsers that don't support WebP images. Replace your `IMG` tag within your `HTML` templates with a call to: ``` ``` (Image path is relative to [Yii2 Framework @webroot alias](https://www.yiiframework.com/wiki/667/yii-2-list-of-path-aliases-available-with-default-basic-and-advanced-app)) And once run, the widget code will generate a new WebP image file on the fly (original image is left **untouched**) and he following HTML code gets generated: ``` ``` The browser will pick up the best source for the provided image, and thanks to revolutionary WebP compression, it will make your website loading faster. Image lazy-loading ------------------ [](#image-lazy-loading) [Lazy images loading](https://web.dev/browser-level-image-lazy-loading/) makes the browser load the images when it reach a certain point, after which the image became visible in the current browser tab. You can use this pure HTML feature (no JS involved) from within the widget: ``` ``` The generated output looks like this: ``` ``` Use it to make your website loading times even faster. Automatic WebP generation for updated images (new in v1.2.0) ------------------------------------------------------------ [](#automatic-webp-generation-for-updated-images-new-in-v120) ImgOpt will set the modification date of the generated WebP image to match the modification date of the original image file. If ImgOpt detects that a file modification date of the source image file is different than the date of the previously generated WebP image file - it will automatically re-create the new WebP image file! Installation ------------ [](#installation) The preferred way to install the library is through the [composer](https://getcomposer.org/). Run: ``` php composer.phar require --prefer-dist vladovinkin/yii2-imgopt "*" ``` Or add: ``` "vladovinkin/yii2-imgopt": "*" ``` to the`require` section within your `composer.json` config file. The installation package is available at The Yii2 extension is available at Source code is available at Image quality ------------- [](#image-quality) I knew you would ask about it! By default the conversion tries all the steps from 100% output image quality down to 70% to generate the WebP file that is smaller than the original image. Original PNG (181 kB)Optimized WebP (60 kB)[![Social Media Bot](https://camo.githubusercontent.com/9751b73b8265812e8274a03bbb46398cdb18ffe4500a0e0da8bf3d3f0e668f8d/68747470733a2f2f7777772e70656c6f636b2e636f6d2f696d672f6d656469615f736f6369616c5f626f742e706e67)](https://www.pelock.com/products/social-media-bot)[![Social Media Bot](https://camo.githubusercontent.com/2be586326b6df4e94237fed24b527447f1a9c0fcbb252ebe662bfa14eb1d37e0/68747470733a2f2f7777772e70656c6f636b2e636f6d2f696d672f6d656469615f736f6369616c5f626f742e77656270)](https://www.pelock.com/products/social-media-bot/install)If the generated WebP image is larger than the original image, the default `` tag will be generated. Disable WebP images serving --------------------------- [](#disable-webp-images-serving) If for some reason you want to disable WebP file serving via the HTML `` tag, you can do it per widget settings: ``` ``` Recreate WebP file ------------------ [](#recreate-webp-file) The widget code automatically detects if there's a WebP image in the directory with the original image. If it's not there - it will recreate it. It's only done once. If you wish to force the widget code to recreate it anyway, pass the special param to the widget code: ``` ``` You might want to recreate all of the WebP files and to do that without modifying, change the widget source code from: ``` /** * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional) */ const RECREATE_ALL = false; ``` to: ``` /** * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional) */ const RECREATE_ALL = true; ``` Lightbox 2 integration ---------------------- [](#lightbox-2-integration) You can also generate Lightbox () friendly images. Instead of: ``` ``` You can replace it with more compact widget code: ``` ``` And it will generate this HTML code: ``` ``` Bugs, questions, feature requests --------------------------------- [](#bugs-questions-feature-requests) Hope you like it. For questions, bug & feature requests visit my site: Bartosz Wójcik | ### Health Score 20 — LowBetter than 14% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community8 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% 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 Unknown Total 1 Last Release 1300d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3340ead18f92ac86c29d024c600b72d32abadafbe57f384e5d3b9ad08e5370ce?d=identicon)[vladovinkin](/maintainers/vladovinkin) --- Top Contributors [![PELock](https://avatars.githubusercontent.com/u/7449321?v=4)](https://github.com/PELock "PELock (16 commits)")[![vladovinkin](https://avatars.githubusercontent.com/u/54041894?v=4)](https://github.com/vladovinkin "vladovinkin (4 commits)") --- Tags imagegeneratorpngjpgoptimizationyii2Webp ### Embed Badge ![Health badge](/badges/vladovinkin-yii2-imgopt/health.svg) ``` [![Health](https://phpackages.com/badges/vladovinkin-yii2-imgopt/health.svg)](https://phpackages.com/packages/vladovinkin-yii2-imgopt) ``` ### Alternatives [choowx/rasterize-svg A PHP library for converting SVG to JPEG, PNG, and WEBP 2261.7k](/packages/choowx-rasterize-svg)[vajiral/php-image-compare A light weight PHP class that can compare two (jpg/png) images to find if they are similar. 1797.9k1](/packages/vajiral-php-image-compare)[rosell-dk/webp-convert-cloud-service Cloud service for converting JPEG & PNG to WebP 545.6k3](/packages/rosell-dk-webp-convert-cloud-service)[kinglozzer/tinypng TinyPNG PHP API 1292.1k2](/packages/kinglozzer-tinypng)[codeblog/conveter-php-webp Easy WebP conversion library for PHP 124.1k1](/packages/codeblog-conveter-php-webp) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)