pelock / yii2-imgopt

Image widget with an auto WebP file generation for Yii2 Framework. Generate HTML <picture> tag with WebP and fallback PNG or JPG images.

Image widget with an auto WebP file generation for Yii2 Framework

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

https://www.yiiframework.com/extension/pelock/yii2-imgopt

How to make my website faster?

My website 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 & AVIF conversion

I have decided to create a Yii2 widget that would automate this task.

What it does? Instead of static images like this:

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

it will automatically generate an extra image in new WebP format (in the same directory, where the provided image is located) and serve it to your browser in HTML <picture> 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:

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

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

And once run, the widget code will generate a new WebP & AVIF image files on the fly (original image is left untouched) and he following HTML code gets generated:

<picture>
    <source type="image/avif" srcset="/images/product/extra.avif">
    <source type="image/webp" srcset="/images/product/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.

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:

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

The generated output looks like this:

<picture>
    <source type="image/avif" srcset="/images/product/extra.avif">
    <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 (new in v1.3.0)

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

Automatic WebP generation for updated images (new in v1.2.0)

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 pelock/yii2-imgopt "*"

Or add:

"pelock/yii2-imgopt": "*"

to therequire section within your composer.json config file.

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

The Yii2 extension is available at https://www.yiiframework.com/extension/pelock/yii2-imgopt

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

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)

If the generated WebP or AVIF image is larger than the original image, the default <img> tag will be generated.

Disable WebP/AVIF images serving

If for some reason you want to disable WebP file serving via the HTML <picture> tag, you can do it per widget settings:

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "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:

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "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;

Lightbox 2 integration

You can also generate Lightbox (https://lokeshdhakar.com/projects/lightbox2/) friendly images.

Instead of:

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <img src="/images/sunset-thumbnail.jpg" alt="Sunset">
</a>

You can replace it with more compact widget code:

<?= \PELock\ImgOpt\ImgOpt::widget(["lightbox_data" => "image-1", "lightbox_src" => "/images/sunset.jpg", "src" => "/images/sunset-thumbnail.jpg", "alt" => "Sunset" ]) ?>

And it will generate this HTML code:

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <picture>
        <source type="image/avif" srcset="/images/sunset-thumbnail.avif">
        <source type="image/webp" srcset="/images/sunset-thumbnail.webp">
        <img src="/images/sunset-thumbnail.png" alt="Sunset">
    </picture>
</a>

Bugs, questions, feature requests

If 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. I'll be happy to answer all of your questions.

Bartosz Wójcik

• Visit my site at — https://www.pelock.com
• Twitter — https://twitter.com/PELock
• GitHub — https://github.com/PELock

yii2-imgopt's Issues

Fatal error when image cannot be converted to WebP

PHP 7.4.

I expected to be a fallback option with original image, but it throws an error
imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error: Not a JPEG file: starts with 0x89 0x50

It happens when PNG image was saved with .jpg extension (and vice versa). So in this case better solution is to use exif_imagetype function to determine real image type, instead of image extension.

help

``[root@localhost advanced]# composer require --prefer-dist pelock/yii2-imgopt "*"
Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been updated
Running composer update pelock/yii2-imgopt
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Root composer.json requires yiisoft/yii2-symfony, it could not be found in any version, there may be a typo in the package name.

Potential causes:

• A typo in the package name
• The package is not available in a stable-enough version according to your minimum-stability setting
  see https://getcomposer.org/doc/04-schema.md#minimum-stability for more details.
• It's a private package and you forgot to add a custom repository to find it

Read https://getcomposer.org/doc/articles/troubleshooting.md for further common problems.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Does not work in the bundle "Yii2 Images\costarico"

Does not work in the bundle "Yii2 Images\costarico", a simple jpg file is output. I've tried everything already. Help what could be the problem? Instead of the expected result as in the examples, I get a simple <img src="bla-bla.jpg ">. But if not the path that returns "yii2images", but to pass a static image, then everything works. By the way, with the extension "zxbodya/yii2-gallery-manager" - everything works