Benchmarking Guetzli - Comparing Size vs Optimization Time
Images are one of the biggest contributors to web page size. In fact, according to many web performance experts, reducing image sizes should be your number one priority to help improve overall performance. There are various methods you can use to optimize your images such as using lossy vs lossless compression or converting your images to another format like WebP or SVG.
Since optimizing images is an important topic in the web performance world, Google recently released a new way to optimize JPEG images, called Guetzli. This article will go over what exactly Guetzli is, how to use it, and how it compares against other image optimization methods.
What is Guetzli?
Guetzli, known as "cookie" in Swiss German, is Google's new JPEG encoder. According to Google's release post, Guetzli can reduce JPEG image sizes by up to 35% more than other methods currently available. Guetzli is fairly similar to Google's Zopfli algorithm in that it allows users to progress their images without having to introduce a new format.
To demonstrate the difference between using Guetzli to compress an image compared to libjpeg, Google provided the following image.
The image on the far left is uncompressed, while the image on the far right uses Guetzli and the image in the middle uses libjpeg. As you can see, there are fewer artifacts in the Guetzli compressed image.
Now, although Google states that you can achieve smaller image sizes without sacrificing quality, the tradeoff with Guetzli is that it takes considerably longer to process images and it doesn't generate progressive JPEGs. This may or may not already be a deal breaker for you, however if not, check out the comparison tables in the section below to see how Guetzli stacks up against other image optimization methods.
How to compress images with Guetzli?
Before getting into the comparison details, you may be wondering how exactly to compress images with Guetzli. It's still relatively new and therefore its adoption is still in the preliminary stages. However, there are a few methods you can use to optimize your JPEG images with Guetzli, these include:
- Downloading and installing the Guetzli algorithm directly from GitHub
- Using the latest version of ImageOptim
- Using FileOptimizer
Depending upon which method you choose, the optimization process will vary. For the purposes of this article, I will be installing the Guetzli algorithm based on the instructions outlined on GitHub for macOS using Homebrew.
- Install Homebrew.
brew install guetzli.
Guetzli vs lossy vs WebP
These tests are to compare the difference in time and file size between Guetzli, lossy compression, and the WebP image format. For all image optimization methods, we defined the quality level to be 85. The snippet used to encode JPEG images with Guetzli was:
time guetzli --quality 85 --verbose imagename.jpg output.jpg
It should be noted that Guetzli's quality parameter only goes as low as 84 so if you need to further optimize your images you won't be able to do so with Guetzli. We chose 85 as the quality setting according to Google's JPEG compression recommendation.
Reduce quality to 85 if it was higher. With quality larger than 85, the image becomes larger quickly, while the visual improvement is little.
As for the lossy compression and WebP image conversion, we used the Optimus developer API. For the tests, we used the following four JPEG images.
|File name||Original size||Guetzli||Lossy||WebP|
|test-1.jpg||712 KB||67 KB in 38.30 s||83 KB in 2 s||53 KB in 3 s|
|test-2.jpg||1.7 MB||231 KB in 1 m 21 s||238 KB in 4 s||254 KB in 3 s|
|test-3.jpg||2.2 MB||346 KB in 2 m 30 s||416 KB in 4 s||344 KB in 4 s|
|test-4.jpg||4.6 MB||478 KB in 4 m 46 s||499 KB in 5 s||322 KB in 5 s|
As we can see in the results above, WebP is the clear winner in most cases both in terms of speed and file size, except for test-2.jpg. On average, the amount of time it took to optimize these 4 images using Guetzli at a quality setting of 85 was 2 minutes and 31 seconds. Although the Guetzli optimized images were smaller than the lossy images every time, it took a considerable amount of time to do so.
On the other hand, WebP generated file sizes that were smaller than both lossy and Guetzli except for test-2.jpg. Although WebP obviously requires a change in image format, which may not be suitable for everyone, it has the potential to provide webmasters with the ability to deliver images much faster.
Pros and cons of Guetzli
Based on our findings and the built-in capabilities of Guetzli, we can clearly say that there are both pros and cons to using this JPEG encoder. On one hand, it offers better compression results than other JPEG optimization libraries out there, however on the other hand, takes painfully long to perform the actual optimization.
Here are the pros and cons to using Guetzli:
- Generates a smaller image size than other lossy compression methods
- Keeps the same image extension (as opposed to WebP which requires you use a different image format)
- Compatible with all browsers as the image remains a JPEG
- Much slower than other optimization methods (including lossy compression and WebP conversion as tested above)
- Doesn't reduce image sizes as much as WebP
- Doesn't generate progressive JPEGs
- Doesn't allow you to set a quality level below 84
Although Guetzli does offer smaller file sizes when compared to other JPEG optimization methods currently available, its one major downfall is the amount of time it requires. If time is not a factor and you want to minimize the size of your JPEG files without any visible loss in quality than Guetzli is a good solution.
On the other hand, it's clear that converting images to WebP format not only produces smaller file sizes in most cases, but it is also much faster. Although WebP isn't supported by all browsers yet, it is certainly still gaining traction. Furthermore, WordPress users can take advantage of the Cache Enabler plugin to deliver WebP images to supported browsers while falling back to the original JPEG or PNG image for unsupported browsers.
Have you tried using Guetzli yet? Let us know in the comments section what your thoughts are.