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.

dev-main 2024-10-13 17:19 UTC

Requires

• php: >=5.4.0
• yiisoft/yii2: >=2.0.4

Apache-2.0

• Roman Hladun

• generator
• image
• optimization
• png
• jpeg
• yii2
• jpg
• Webp
• avif
• auto resize images
• optimization background images

README

ImgOpt is an image optimization widget for Yii2 Framework with auto WebP & AVIF image formats generation from PNG and JPG files.

Widget forked from 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?

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

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:

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "type_src"=>"picture_webp", "alt" => "Extra product" ]) ?>

(Image path is relative to Yii2 Framework @webroot alias)

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:

<picture>
    <source type="image/webp" srcset="/images/product/webp/extra.webp">
    <img src="/images/product/extra.png" alt="Extra product">
</picture>

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

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "type_src"=>"picture_avif", "_path"=>"/avif" "alt" => "Extra product" ]) ?>

Output HTML result will be

<picture>
    <source type="image/avif" srcset="/images/product/avif/extra.avif">
    <img src="/images/product/extra.png" alt="Extra product">
</picture>

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))

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", 'type_src'=>'picture_webp', 'sizes' =>[576, 768, 992]]) ?>

Output HTML result will be

<picture>
    <source type="image/webp" srcset="/images/product/webp/[e-mail]" media="(max-width:576px)">
    <source type="image/webp" srcset="/images/product/webp/[e-mail]" media="(max-width:768px)">
    <source type="image/webp" srcset="/images/product/webp/[e-mail]" media="(max-width:992px)">
    <source type="image/webp" srcset="/images/product/webp/4.webp">
    <img src="/images/product/extra.png" alt="Extra product">
</picture>

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

Therefore, according to the previous examples presented:

 <?=\rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", 'type_src'=>'img_webp']) ?>   

Output HTML result will be

<img src="/images/product/extra.png" srcset="/images/product/webp/extra.webp" alt="Extra product">  

And with resizes:

<?=\rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "type_src"=>"img_webp", "sizes" =>[576, 768, 992]]) ?>  

Output HTML result will be

<img src="/images/product/extra.png" srcset="/images/product/webp/[e-mail] 576w,/images/product/webp/[e-mail] 768w,/images/product/webp/[e-mail] 992w,/images/product/webp/extra.webp" alt="Extra product">  

If browser not support WebP/AVIF formats (these are mostly old internet browsers), will be output original PNG/JPG file.

In case you need to display a background image through css inline style, use:

<div class="some-class" style="<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png",  "type_src"=>"background_webp"]) ?>"></div>   

Output HTML result will be

<div class="some-class" style="background-image: image-set(url(/images/product/webp/extra.webp') type('image/webp'), url('/images/product/extra.png'))"></div>   

Image lazy-loading

Lazy images 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:

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "type_src"=>"picture_webp", "loading" => "lazy" ]) ?>

The generated output looks like this:

<picture>
    <source type="image/webp" srcset="/images/product/extra.webp">
    <img src="/images/product/extra.png" loading="lazy">
</picture>

Use it to make your website loading times even faster.

AVIF image generation

ImgOpt will automatically generate AVIF file (when type_src param has value picture_avif/srcset_avif/background_avif) if it's supported by the existing PHP installation. If the conversion function is not available, it will just skip this step.

PHP has AVIF support in its GD extension since PHP version 8.1

Noticed that the generation time of an AVIF picture is slightly longer than that of WebP.

Automatic WebP/AVIF generation for updated images

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

The preferred way to install the library is through the composer.

Run:

php composer.phar require --prefer-dist rhladun/yii2-imgopt "dev-main"

Or add:

"rhladun/yii2-imgopt": "dev-main"

to therequire section within your composer.json config file.

The installation package is available at https://packagist.org/packages/rhladun/yii2-imgopt

Source code is available at https://github.com/rhladun/yii2-imgopt

Image quality

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.

Disable WebP/AVIF images serving

If for some reason you want to disable WebP/AVIF file serving, you can do it per widget settings:

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", 'type_src'=>'srcset_webp', "disable" => true ]) ?>

Recreate WebP/AVIF files

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

If you wish to force the widget code to recreate it anyway, pass the special param to the widget code:

<?= \rhladun\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "type_src"=>"picture_avif", "recreate" => true ]) ?>

You might want to recreate all of the WebP and AVIF files and to do that without modifying, change the widget source code from:

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP and AVIF 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;