{"id":14966646,"url":"https://github.com/pelock/yii2-imgopt","last_synced_at":"2025-07-29T02:04:53.043Z","repository":{"id":57037591,"uuid":"348839813","full_name":"PELock/yii2-imgopt","owner":"PELock","description":"Image widget with an auto WebP file generation for Yii2 Framework. Generate HTML \u003cpicture\u003e tag with WebP and fallback PNG or JPG images.","archived":false,"fork":false,"pushed_at":"2023-02-09T09:54:11.000Z","size":136,"stargazers_count":6,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-28T09:40:45.461Z","etag":null,"topics":["composer","generator","html","image","img","imgopt","jpg","optimization","packagist","php","picture","png","webp","yii2","yii2-framework","yii2-widget","yii2-widgets"],"latest_commit_sha":null,"homepage":"https://www.pelock.com","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PELock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-17T20:13:56.000Z","updated_at":"2023-11-30T16:43:14.000Z","dependencies_parsed_at":"2024-09-02T17:50:44.906Z","dependency_job_id":null,"html_url":"https://github.com/PELock/yii2-imgopt","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"80ccc023bea97f892b241db28e5508adc80f37ef"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/PELock/yii2-imgopt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PELock%2Fyii2-imgopt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PELock%2Fyii2-imgopt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PELock%2Fyii2-imgopt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PELock%2Fyii2-imgopt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PELock","download_url":"https://codeload.github.com/PELock/yii2-imgopt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PELock%2Fyii2-imgopt/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267617643,"owners_count":24116208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composer","generator","html","image","img","imgopt","jpg","optimization","packagist","php","picture","png","webp","yii2","yii2-framework","yii2-widget","yii2-widgets"],"created_at":"2024-09-24T13:36:44.778Z","updated_at":"2025-07-29T02:04:53.019Z","avatar_url":"https://github.com/PELock.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image widget with an auto WebP file generation for Yii2 Framework\n\n**ImgOpt** is an image optimization widget for [Yii2 Framework](https://www.yiiframework.com) with auto [WebP](https://developers.google.com/speed/webp) \u0026 [AVIF](https://caniuse.com/avif) image formats generation from `PNG` and `JPG` files.\n\nhttps://www.yiiframework.com/extension/pelock/yii2-imgopt\n\n## How to make my website faster?\n\n[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.\n\nI 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.\n\n_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.\n\nTo hell with that! We can do better!\n\n## Automate PNG \u0026 JPG to WebP \u0026 AVIF conversion\n\nI have decided to create a Yii2 widget that would automate this task.\n\nWhat it does? Instead of static images like this:\n\n```html\n\u003cimg src=\"/images/product/extra.png\" alt=\"Extra product\"\u003e\n```\n\nit 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 `\u003cpicture\u003e` tag, with a default fallback to the original image for browsers that don't support WebP images.\n\nReplace your `IMG` tag within your `HTML` templates with a call to:\n\n```php\n\u003c?= \\PELock\\ImgOpt\\ImgOpt::widget([\"src\" =\u003e \"/images/product/extra.png\", \"alt\" =\u003e \"Extra product\" ]) ?\u003e\n```\n\n(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))\n\nAnd once run, the widget code will generate a new WebP \u0026 AVIF image files on the fly (original image is left **untouched**) and he following HTML code gets generated:\n\n```html\n\u003cpicture\u003e\n    \u003csource type=\"image/avif\" srcset=\"/images/product/extra.avif\"\u003e\n    \u003csource type=\"image/webp\" srcset=\"/images/product/extra.webp\"\u003e\n    \u003cimg src=\"/images/product/extra.png\" alt=\"Extra product\"\u003e\n\u003c/picture\u003e\n```\n\nThe browser will pick up the best source for the provided image, and thanks to revolutionary WebP and AVIF compression, it will make your website loading faster.\n\n## Image lazy-loading\n\n[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:\n\n```php\n\u003c?= \\PELock\\ImgOpt\\ImgOpt::widget([\"src\" =\u003e \"/images/product/extra.png\", \"loading\" =\u003e \"lazy\" ]) ?\u003e\n```\n\nThe generated output looks like this:\n\n```html\n\u003cpicture\u003e\n    \u003csource type=\"image/avif\" srcset=\"/images/product/extra.avif\"\u003e\n    \u003csource type=\"image/webp\" srcset=\"/images/product/extra.webp\"\u003e\n    \u003cimg src=\"/images/product/extra.png\" loading=\"lazy\"\u003e\n\u003c/picture\u003e\n```\n\nUse it to make your website loading times even faster.\n\n## AVIF image generation (new in v1.3.0)\n\nImgOpt will automatically generate AVIF file if it's supported by the existing PHP installation. If the conversion function is not available, it will just skip this step.\n\n## Automatic WebP generation for updated images (new in v1.2.0)\n\nImgOpt will set the modification date of the generated WebP image to match the modification date of the original image file.\n\nIf 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!\n\n## Installation\n\nThe preferred way to install the library is through the [composer](https://getcomposer.org/).\n\nRun:\n\n```\nphp composer.phar require --prefer-dist pelock/yii2-imgopt \"*\"\n```\n\nOr add:\n\n```\n\"pelock/yii2-imgopt\": \"*\"\n```\n\nto the`require` section within your `composer.json` config file.\n\nThe installation package is available at https://packagist.org/packages/pelock/yii2-imgopt\n\nThe Yii2 extension is available at https://www.yiiframework.com/extension/pelock/yii2-imgopt\n\nSource code is available at https://github.com/PELock/yii2-imgopt\n\n## Image quality\n\nI 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.\n\n| Original PNG (181 kB) | Optimized WebP (60 kB) |\n| --------------------- | -------------- |\n| [![Social Media Bot](https://www.pelock.com/img/media_social_bot.png)](https://www.pelock.com/products/social-media-bot) | [![Social Media Bot](https://www.pelock.com/img/media_social_bot.webp)](https://www.pelock.com/products/social-media-bot/install) |\n\nIf the generated WebP or AVIF image is larger than the original image, the default `\u003cimg\u003e` tag will be generated.\n\n## Disable WebP/AVIF images serving\n\nIf for some reason you want to disable WebP file serving via the HTML `\u003cpicture\u003e` tag, you can do it per widget settings:\n\n```php\n\u003c?= \\PELock\\ImgOpt\\ImgOpt::widget([\"src\" =\u003e \"/images/product/extra.png\", \"alt\" =\u003e \"Extra product\", \"disable\" =\u003e true ]) ?\u003e\n```\n\n## Recreate WebP/AVIF files\n\nThe widget code automatically detects if there's a WebP/AVIF images in the directory with the original image. If it's not there - it will recreate them. It's only done once.\n\nIf you wish to force the widget code to recreate it anyway, pass the special param to the widget code:\n\n```php\n\u003c?= \\PELock\\ImgOpt\\ImgOpt::widget([\"src\" =\u003e \"/images/product/extra.png\", \"alt\" =\u003e \"Extra product\", \"recreate\" =\u003e true ]) ?\u003e\n```\n\nYou might want to recreate all of the WebP and AVIF files and to do that without modifying, change the widget source code from:\n\n```php\n/**\n * @var bool set to TRUE to recreate *ALL* of the WebP and AVIF files again (optional)\n */\nconst RECREATE_ALL = false;\n```\n\nto:\n\n```php\n/**\n * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional)\n */\nconst RECREATE_ALL = true;\n```\n\n\n## Lightbox 2 integration\n\nYou can also generate Lightbox (https://lokeshdhakar.com/projects/lightbox2/) friendly images.\n\nInstead of:\n\n```html\n\u003ca href=\"/images/sunset.jpg\" data-lightbox=\"image-1\" data-title=\"Sunset\"\u003e\n    \u003cimg src=\"/images/sunset-thumbnail.jpg\" alt=\"Sunset\"\u003e\n\u003c/a\u003e\n```\n\nYou can replace it with more compact widget code:\n\n```php\n\u003c?= \\PELock\\ImgOpt\\ImgOpt::widget([\"lightbox_data\" =\u003e \"image-1\", \"lightbox_src\" =\u003e \"/images/sunset.jpg\", \"src\" =\u003e \"/images/sunset-thumbnail.jpg\", \"alt\" =\u003e \"Sunset\" ]) ?\u003e\n```\n\nAnd it will generate this HTML code:\n\n```html\n\u003ca href=\"/images/sunset.jpg\" data-lightbox=\"image-1\" data-title=\"Sunset\"\u003e\n    \u003cpicture\u003e\n        \u003csource type=\"image/avif\" srcset=\"/images/sunset-thumbnail.avif\"\u003e\n        \u003csource type=\"image/webp\" srcset=\"/images/sunset-thumbnail.webp\"\u003e\n        \u003cimg src=\"/images/sunset-thumbnail.png\" alt=\"Sunset\"\u003e\n    \u003c/picture\u003e\n\u003c/a\u003e\n```\n\n## Bugs, questions, feature requests\n\nIf you are interested in my software or have any questions regarding it, technical or legal issues, or if something is not clear, [please contact me](https://www.pelock.com/contact). I'll be happy to answer all of your questions.\n\nBartosz Wójcik\n\n* Visit my site at — https://www.pelock.com\n* Twitter — https://twitter.com/PELock\n* GitHub — https://github.com/PELock","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpelock%2Fyii2-imgopt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpelock%2Fyii2-imgopt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpelock%2Fyii2-imgopt/lists"}