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:
- Format
- Resolution
- 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:
- 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!
- Clear convertion to WebP don't provide any benefits (actually it is more harmful)
- 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)
- 10% quality reduction gives a huge benefit on WebP and AVIF compared to JPEG
- WebP even by being older format shows better performance comparing to AVIF
- 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?)