Same file size of AVIF and WebP

Kirby 3 Solved ✅
1

Hi there,

since we have AVIF and WebP support out of the box in Kirby 3.6., I want to give it a try in a current project, combined with picture and srcset. Here is my setup, maybe its useful to some.
In the config.php I have the following code to set the widths for srcset:

'thumbs' => [
	'quality'   => 80,
	'srcsets' => [
		'avif' => [
			'640w' => ['width' => 640, 'format' => 'avif'],
			'1280w' => ['width' => 1280, 'format' => 'avif'],
			'1920w' => ['width' => 1920, 'format' => 'avif'],
		],
		'webp' => [
			'640w' => ['width' => 640, 'format' => 'webp'],
			'1280w' => ['width' => 1280, 'format' => 'webp'],
			'1920w' => ['width' => 1920, 'format' => 'webp'],
		]
	]
],

In the template I’m using it as follows:

<picture>
	<source srcset="<?= $image->srcset('avif') ?>" type="image/avif">
	<source srcset="<?= $image->srcset('webp') ?>" type="image/webp">
	<img src="<?= $image->thumb(['format' => 'jpg'])->url() ?>" alt="<?= $image->alt() ?>" loading="lazy">
</picture>

This works fine, so far.

I’m just wondering why the file sizes of the created .avif and the .webp are always exactly the same. They both are smaller than the corresponding JPEG, but I’d assume that AVIF should be even smaller than the WebP.
I’m using the default GD Lib as thumb driver.
Any ideas?

1 Like
2

From the docs, haven’t checked if there is a newer version of GD that supports AVIF now:

The GDLib/SimpleImage driver currently only supports webp , ImageMagick supports webp and avif .

1 Like
3

Ah, my bad. I read it the other way around.

I tried adding

'driver'    => 'im',

to the thumbs config, but it doesn’t seem to create any files, then.

Ok, seems like I have to install IM locally, first :grin:

4

If ImageMagick is installed on your server, you might have to provide the path to the convert binary:

5

Thank you, but it seemed to work right out of the box after install.

I did a quick comparison, but still the AVIF is larger than the WebP.

IM:
quality => 85:
AVIF: 260 kB
WebP: 216 kB

quality => 60:
AVIF: 130 kB
WebP: 124 kB

Only if I go down with quality, the AVIF gets smaller. But the images look bad already with anything
under quality of 70.

quality => 50:
AVIF: 86 kB
WebP: 110 kB

Also compared the same image to GD Lib.with AVIF not relevant, as ist seems to be just a JPEG:

GD Lib:
quality => 85:
AVIF: 261 kB
WebP: 261 kB

quality => 60
AVIF: 145 kB
WebP: 145 kB

Checked other images with similar results. With these findings, I think I can drop AVIF and only go with WebP. Or do I miss something?

6

So, the initial problem is solved with ImageMagick as thumb driver, the rest is turning into a thread about image quality.

Just one last note:

It seems that AVIF needs less quality (which then results in less file size) to be visually at the comparable quality as WebP. See also this article from Smashing Magazine about this topic.

To get better file size for AVIF we therefore need to set a different quality for both formats. So the final code for the config file looks like:

'thumbs' => [
	'driver' => 'im',
	'quality' => 90,
	'srcsets' => [
		'avif' => [
			'640w' => ['width' => 640, 'quality' => 70, 'format' => 'avif'],
			'1280w' => ['width' => 1280, 'quality' => 70, 'format' => 'avif'],
			'1920w' => ['width' => 1920, 'quality' => 70, 'format' => 'avif'],
		],
		'webp' => [
			'640w' => ['width' => 640, 'format' => 'webp'],
			'1280w' => ['width' => 1280, 'format' => 'webp'],
			'1920w' => ['width' => 1920, 'format' => 'webp'],
		]
	]
],

First, I changed driver to ImageMagick, second, in the afiv settings I added a different quality setting. This way I save around 30% in file size compared to WebP and even more compared to JPEG.

Thanks, @pixelijn for your support!

4 Likes
7

Hi Christoph

I had the same issue a few weeks ago and I also ended up in lowering the quality for AVIF files. But even with this adjustment I still had a few single AVIF images that were larger than WebP.

So I added a few queries to my image component. I take the smallest (640w in your example) and largest (1920w) srcset for each format and create a thumb with the related options. And then I compare the file sizes of them and only return AVIF sources in my picture element if they are smaller than WebP.

This way I avoid unnecessary markup for files that are too big anyway.

8

Wow, that sounds really sophisticated!
What I’ve tested so far, the AVIF is always smaller, but it might depend on settings and image content.
Most importantly, they both are smaller than JPEG :slight_smile: