Image format - webp vs AVIF

[312erik123]

Hello,

Did some experiments with the newly added AVIF capabilities. I was a bit suprised that webp seems to perfom better across all the image sizes that I use: 

What are you guys using?

Br

Erik

[datakick]

It's hard to compare, as it's very subjective.

You have to tweak the  Image quality settings. For each algorithm it is slightly different.

avif will have better image sizes as you increase compression = lower image quality settings

[ quality 50 ]
5950 - 1-Niara_thickbox.avif
8342 - 1-Niara_thickbox.webp


[ quality 70 ]
10591 - 1-Niara_thickbox.avif
10196 - 1-Niara_thickbox.webp

[ quality 90]
26193 - 1-Niara_thickbox.avif
19052 - 1-Niara_thickbox.webp

The nice think about avif is that it generates much less blurry images even at low quality. At q=50, avif is much nicer than webp at the same quality. It is probably at the level of webp at q=70.

If you want to have high-quality images, you should probably keep using webp and q=90.

If you want to have fast shop with good-enough images, you might want to opt for avif with lower q

[312erik123]

Thanks - will do some experimenting. I’ll post back if I find something worth sharing.

[Yabber]

@datakick  After my tests of the latest version of "bleeding edge", I think that the support of system images in WEBP and AVIF formats already works very nicely.
However, I noticed that some native modules have their own limitations when it comes to uploading image files.
For example, the "homeslider" module:
const ALLOWED_EXTENSIONS = [ 'jpg', 'jpeg', 'gif', 'png' ];

 

[wakabayashi]

7 hours ago, Yabber said:

@datakick  After my tests of the latest version of "bleeding edge", I think that the support of system images in WEBP and AVIF formats already works very nicely.
However, I noticed that some native modules have their own limitations when it comes to uploading image files.
For example, the "homeslider" module:
const ALLOWED_EXTENSIONS = [ 'jpg', 'jpeg', 'gif', 'png' ];

 

Right. The module rewrite is not yet done and it might need some tweaks in the core again. Some modules even use their own way of generating images.

But one of my goals was, that in the future, it should be super easy to implement image support in a module 🙂

[Yabber]

@wakabayashi From my tests, it seems that for AVIF format, Imagick gets better compression, and for WEBP format, GD library has better compression.
It might also be worth adding support for Imagick to ImageManager class?

 

[Raymond]

Hello

I am testing latest TB 1.6 downloaded on 26 May 2025.

I started checking the website speed, the result was an excellent average 1.1s, but still those websites one can use to get a report do complain about several things.

One of which is images format, they suggest to use WEBP or AVIF

I thus installed the ImageMagick v1.3.1 TB native module, then went to menu preferences > images and there settled TB to use AVIF with 65% compression

I then regenerated all images.

Finally I tried to change the images in the default landing page coming with first installation into the home slider module.

I noticed that the home slider module does not allow to use webp or avif images.

As far as I know there is no other official native slider module in the Thirty bees marketplace.

What should be done to have the home slider module allow use of webp and/or avif images?

Thank you in advance for any help.

 

 

 

[the.rampage.rado]

1. Remove the ImageMagick module - it is not compatible with the recently rewritten image system of thirty bees. Nobody should use this module since thirty bees 1.5 version as it gives no benefits in 2025.
2. Configure webp or avif in Images as you did before and again regenerate all image thumbnails. As you see in this section thirty bees core is responsible for the images for manufacturers, products, scenes, categories, etc. Not for the module images - slider, blog, etc modules have their inner way of handling those and sometimes they are not compatible with webp or avif.
3. The slider module should be modified to support webp and avif and the modification i fairly simple. Look at the code. Soon this will be fixed in the codebase but the developer is currently working on other more pressing issues. Keep in mind you should add prepared and properly sized images here as the module simply stores them and shows them to the FO, it does not do any processing.

Cheers!

[the.rampage.rado]

@Raymond could you tell me if the reordering feature works for you in Home slider?

I'm now adding the native core image extension support to the module.
You can try those changes: https://github.com/thirtybees/homeslider/pull/14

[Raymond]

Hello

Thank you for the information the.rampage.rado.

"3. The slider module should be modified to support webp and avif and the modification i fairly simple. Look at the code. Soon this will be fixed in the codebase but the developer is currently working on other more pressing issues. Keep in mind you should add prepared and properly sized images here as the module simply stores them and shows them to the FO, it does not do any processing."

Yes, I fully understand and respect this, however I am quite ignorant about coding... I need to ask for each thing I stumble upon... sorry.

However, I looked into it, I think may be enough to add 'webp', and 'avif', in line 38 of the homeslider.php file of the module:

Thus the actual line 38

const ALLOWED_EXTENSIONS = [ 'jpg', 'jpeg', 'gif', 'png' ];

Should be modified to become

const ALLOWED_EXTENSIONS = [ 'jpg', 'jpeg', 'gif', 'png', 'webp', 'avif', ];

I do not know if any other line in any other file of the module should be modified and/or if anything else should be added..., seems not strictly necessary to me, but might be advisable maybe, e.g. something to validate MIME or else...  but, again, I ignore coding.. I only can imagine, cannot tell for sure.

I tested it. It accepts webp and seems to work fine in the Front End. It accepts avif. I got an error at first attempt, talked about coding, however at second attempt worked fine, and shows up in Front End too.

"could you tell me if the reordering feature works for you in Home slider?"

I do not see "reordering features" in the homeslider module interface in the Back Office, I am not understanding this question, where and/or what should I look at?

"I'm now adding the native core image extension support to the module. You can try those changes: https://github.com/thirtybees/homeslider/pull/14"

I checked that, what I understood is that I should open those files and substitute/add the code you produced, that is feasible indeed, but a bit complicated for me, I will try it maybe when I get some time to make extra experiments.

About same topic of webp and avif images support, even tough not directly related to homeslider module, I noticed that also the beesblog module does not allow to use webp and avif images, I looked into the code, but in this module the actual situation is by far length more complex, in this module I definitely do not know what to do...

Thank you for the hints, appreciated.

[the.rampage.rado]

In order to add webp and avif support find only the main module file and substitute it's whole code and you can do the same for list.tpl (those changes aim to fix the drag n drop reordering function of the slides). Refresh your BO and you should be able to add webp and avif to the slider if your core installation supports it (enable in BO and supported by your server).

All other file changes are not relevant to your request.

Bees blog also is one of those modules that needs work - it also does not support multilanguage and other things but it's quite more complicated.

EDIT: If you notice any errors with my fixes please write here and I'll try to help (if I can 🙂 )!