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?