Optimizing your images

As part of the refresh we’re doing here at The Linux Experiment we wanted to see if we could optimize the image files we serve to our visitors as well. Image optimization is essentially the process of removing or re-encoding the image files in the most data efficient way as possible without sacrificing too much of the quality. While it would be simple to just go and re-size all of our existing images to serve lower quality versions that’s not exactly what our goal was. Instead we wanted to make use of some of the excellent tools available to the Linux community to really wring as much quality out of a lower file size as we could.

As an example of this let’s take everyone’s favourite mascot image:

This is a PNG image with a resolution of 300×300 which currently weighs in at about 41 KiB. I think we can do better than that!

Optimizing PNG files

For this task we’re going to make use of the excellent tool OptiPNG which performs a crazy number of tweaks to re-encode the file in the most optimized way possible. You can read all about how it actually works on their website here.

sudo apt install optipng

Once installed it’s as simple as running the tool against our good friend above and checking the results:

$ optipng the-linux-experiment-mascot.png
$ optipng the-linux-experiment-mascot.png ** Processing: the-linux-experiment-mascot.png
300×300 pixels, 4×8 bits/pixel, RGB+alpha
Input IDAT size = 40701 bytes
Input file size = 40877 bytes
Trying:
zc = 9  zm = 8  zs = 0  f = 5 IDAT size = 39674

Selecting parameters:
zc = 9  zm = 8  zs = 0  f = 5 IDAT size = 39674

Output IDAT size = 39674 bytes (1027 bytes decrease)
Output file size = 39802 bytes (1075 bytes = 2.63% decrease)

With that simple command we were able to decrease the file size by 2.63% down to 39.8 KiB. Not a major decrease but every little bit counts right?

Alright but what about a larger image, say one of the Big distributions, little RAM 9 post graphs?

This file is a bit bigger and possibly more complex than our mascot example. So what happens when we run it through OptiPNG?

$ optipng big_distro_little_ram_9_first_boot_memory_usage.png
$ optipng big_distro_little_ram_9_first_boot_memory_usage.png
** Processing: big_distro_little_ram_9_first_boot_memory_usage.png
1408×609 pixels, 3×8 bits/pixel, RGB
Input IDAT size = 60266 bytes
Input file size = 60344 bytes

Trying:  zc = 9  zm = 8  zs = 0  f = 0 IDAT size = 46597

Selecting parameters:  zc = 9  zm = 8  zs = 0  f = 0 IDAT size = 46597

Output IDAT size = 46597 bytes (13669 bytes decrease)
Output file size = 46675 bytes (13669 bytes = 22.65% decrease)

Nice! This time we see a 22.65% decrease in file size, down to 46.7 KiB overall.

Optimizing JPEGs

OK so that works for PNGs but what about for JPEGs? Well lucky for us we have a tool for that as well called jpegoptim.

sudo apt install jpegoptim

It works in a very similar way to OptiPNG as you can see below:

$ jpegoptim fedora11updates-1024×552.jpg
fedora11updates-1024×552.jpg 1024×552 24bit N JFIF [OK] 124235 –> 113879 bytes (8.34%), optimized.

Just like that we’ve shrunk our image by 8.34% without any noticeable loss in quality!

Conclusion

We ran both tools against all of the media files on The Linux Experiment and reduced the overall size by a substantial amount. That should result in a faster loading site for you!