How to fix website performance (Image optimization)

After I made some design changes on this blog I decided to check it at PageSpeed Insight (pretty obvious decision for developer). To my surprise results were very far from what I have expected.

When I’m fixing things I approach it with idea of “first contact”. What doest it means- optimise first visit first. There is no point to optimise stuff for returning users first, because if it awful for those who visit only once, it will be awful for those who visit multiple times also. So let go through.

Defining problem

As we can see from results, PageSpeed insight says that I can reduce total image size by 1171 KiB. With what I disagree at this point as it assums that I use jpeg with 100% quality (actually 70%, but I will make comparison based on optimized and unoptimized jpegs), but I assume that I can get 500 KiB (will be optimistic and hope for 700 KiB) reduction anyways.

So first I need to unederstand what are my problems here, and as it is an image most likely it will be:

1. Format
2. Resolution
3. Lazy loading

Image format

So fist thing which I will do here is change format. PageSpeed recommends WebP and AVIF. Me would not be me, if I would not make a comparison at this point.

Support check

Lets check support of both at this point, and for that I will use the Can I Use, and here I can see that most of the platforms I want are supported. IE11 is not supported on both, but it means nothing to me as I have zero intensions to support something what is retired. So actual differences are: KaiOS browser, Opera Mini and QQ Browser. So at this point there is no any obvious reasons to choose one over another (yes- more support doesnt mean better for me at this point).

Format change

So now I want to check filesize difference of those 5 images which are on the website based on format only.

To convert images to WebP I run 3 commands (one to change format and leave quality the same and another two to change format and reduce quality (compress))

mogrify -format webp -quality 100 *.jpg
mogrify -format webp -quality 90 *.jpg
mogrify -format webp -quality 70 *.jpg

File size was recorded after every command separately. After that next three commands were exeecuted:

mogrify -format avif -quality 100 *.jpg
mogrify -format avif -quality 900 *.jpg
mogrify -format avif -quality 70 *.jpg

And after receiving output results were again written down.

Result Comparison

So here is the table of results I got (all file sizes are provided in KiB).

Initial image	Initial filesize	WebP filesize	WebP 90%	WebP 70%	AVIF filesize	AVIF 90%	AVIF 70%
Image 1 (100% quality)	297	385	44	28	291	50	26
Image 2 (100% quality)	894	1331	232	82	770	335	114
Image 3 (100% quality)	740	1228	127	59	546	187	69
Image 4 (100% quality)	1228	1740	420	208	991	513	280
Image 5 (100% quality)	2457	4270	547	125	2048	807	204
Image 1 (70% quality)	82	227	47	28	197	54	27
Image 2 (70% quality)	228	833	190	81	619	205	110
Image 3 (70% quality)	159	513	113	58	343	123	70
Image 4 (70% quality)	411	1433	395	205	925	383	259
Image 5 (70% quality)	390	2836	377	132	1433	358	183

And results are pretty interesting:

1. I was surprised that by converting images to WebP filesize increased, at some moment even by 627% (Image 2 with 70% quality) or if we take rough numbers- extra 2.3MiB!
2. Clear convertion to WebP don't provide any benefits (actually it is more harmful)
3. Clear convertion to AVIF provides benefit only over uncompressed JPEG and WebP files (so for automated tasks I would really avoid that one, because a lot of picture in internet are already optimised, so it would only harm)
4. 10% quality reduction gives a huge benefit on WebP and AVIF compared to JPEG
5. WebP even by being older format shows better performance comparing to AVIF
6. PageSpeed Insight was "wrong"- size reduced by 768KiB (yes, that number can be increased up to 850KiB or even 950KiB, but is it really worth it?)