PHPackages                             rhladun/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. rhladun/yii2-imgopt

ActiveYii2-extension[Image & Media](/categories/media)

rhladun/yii2-imgopt
===================

Widget with an auto WebP/AVIF files generation for Yii2 Framework. Generate HTML <picture>/<img> tags or inline CSS style (background-image) for WebP/AVIF formats (with ability create resized copies) and fallback PNG or JPG images.

024PHP

Since Oct 11Pushed 1y agoCompare

[ Source](https://github.com/rhladun/yii2-imgopt)[ Packagist](https://packagist.org/packages/rhladun/yii2-imgopt)[ RSS](/packages/rhladun-yii2-imgopt/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependenciesVersions (2)Used By (0)

Widget with an auto WebP/AVIF file generation for Yii2 Framework with resizing for different HTML tags.
=======================================================================================================

[](#widget-with-an-auto-webpavif-file-generation-for-yii2-framework-with-resizing-for-different-html-tags)

**ImgOpt** is an image optimization widget for [Yii2 Framework](https://www.yiiframework.com) with auto [WebP](https://developers.google.com/speed/webp) & [AVIF](https://caniuse.com/avif) image formats generation from `PNG` and `JPG` files.

Widget forked from [pelock/yii2-imgopt](https://www.yiiframework.com/extension/pelock/yii2-imgopt). The main addition to the original widget is the possibility of automatic resizing images for different screen extensions and for different HTML tags.

How to make my website faster?
------------------------------

[](#how-to-make-my-website-faster)

A frequent cause of low `PageSpeed ​​Insights` scores is the use of heavy PNG/JPG images, so if you want to optimize image loading, you should use WebP & AVIF image formats. The use of modern formats saves up to 30% of the file size without significant loss of quality.

The automatic image generation process eliminates the need to manually use an image conversion tool, upload new WebP/AVIF images to the server, and update your HTML code.

Automate PNG & JPG to WebP & AVIF conversion
----------------------------------------------------

[](#automate-png--jpg-to-webp--avif-conversion)

Widget will automatically generate an extra image in new WebP/AVIF format (which will save in the corresponding directory $\_path (by default `/webp`), relative to the directory of the parent file) and will return HTML code (according to the specified type $type\_src `picture_webp / picture_avif / srcset_webp / srcset_avif / background_webp / background_avif`).

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 files on the fly (original image is left **untouched**) and it following HTML code gets generated:

```

```

The 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.

Another simple example with the output generation of the AVIF format image saved in a separate directory "/avif".

```

```

Output `HTML` result will be

```

```

For even greater optimization, it is possible to generate images for different screen widths (for example, for slider images).

An example auto resize images for specific dimensions (width: 576, 768, 992 (px))

```

```

Output `HTML` result will be

```

```

If you want to use `IMG` html tag, use `"type_src" => "img_webp"`.

Therefore, according to the previous examples presented:

```