DEV Community

Cover image for Image widget with an auto WebP file generation for Yii2 Framework
Bartosz Wójcik
Bartosz Wójcik

Posted on

Image widget with an auto WebP file generation for Yii2 Framework

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

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 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">
Enter fullscreen mode Exit fullscreen mode

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" ]) ?>
Enter fullscreen mode Exit fullscreen mode

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

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:

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

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.

Installation

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

Run:

php composer.phar require --prefer-dist pelock/yii2-imgopt "*"
Enter fullscreen mode Exit fullscreen mode

Or add:

"pelock/yii2-imgopt": "*"
Enter fullscreen mode Exit fullscreen mode

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)
Social Media Bot Social Media Bot

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

Disable WebP 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 ]) ?>
Enter fullscreen mode Exit fullscreen mode

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:

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

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;
Enter fullscreen mode Exit fullscreen mode

to:

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional)
 */
const RECREATE_ALL = true;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" ]) ?>
Enter fullscreen mode Exit fullscreen mode

And it will generate this HTML code:

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

Bugs, questions, feature requests

Hope you like it. For questions, bug & feature requests visit my site:

Bartosz Wójcik | https://www.pelock.com

Top comments (0)