At https://www.vutuv.de we use round avatars like most other social networks. A square image is delivered to the browser which uses some CSS magic to display a round image.
I’ve been thinking about a problem with those round avatars for quite some time: We are wasting file space in the corners of it. Our medium size avatar image is 130 x 130 pixel big. But we only display a 65 pixel radius circle. The square has an area 16,900 pixels and the circle displays only an area of 13,273 pixels (ask wolframalpha.com if you forgot the underlying maths).
We transfer 21% more data than the user ever gets displayed!
File size is very important because WebPerformance is paramount. Unfortunately there is no such thing as a round JPEG file. A JPEG always has to be a rectangle. But it is possible to use different qualities of JPEG compression in the same file. We could use a 95% quality for the visible part and 75% for the invisible parts at the corners. Of course there is some overlapping because JPEG works with 8x8 matrix elements. But the result should be smaller.
Add Guetzli for an even better WebPerformance
Before I walk you through the step by step guide I’d like to introduce you to Guetzli by Google (https://github.com/google/guetzli). The webpage says:
Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20–30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression speeds they offer.
We are going to use Guetzli to compress our images. But we have to change it’s source code because by default it doesn’t support a quality setting of less than 84%. Please download the Guetzli source code and remove the following code from the file guetzli/processor.cc :
After that run makeagain.
A Step by Step Recipe
Assume you have ImageMagick installed, a file namedavatar.jpgand you are working with Linux or macOS you can follow these steps:
The file new_avatar.jpgcontains the optimized JPEG.
We recompressed all avatars on https://www.vutuv.de with this method and saved between 5% and 30% per image.
More?
The above methode is actually a quick and dirty hack which doesn’t give you the full potential of the idea. I asked Jyrki Alakuijala who is one of the guetzli inventors and a JPEG pro about this and he said:
It is actually relatively complex to do well. It would be a 2–3 month project to do well.
But even with our small solution an average saving of 20% per file is quite an improvement.
Shameless plug: Please contact me at stefan.wintermeyer@amooma.de in case you need WebPerformance consulting.
