WebPerf 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.


Image Source: Googleblog


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 Mac OS using Homebrew.

1. Install Homebrew
2. Enter 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 Guetzli and lossy, we defined the quality setting to 85, and added the --verbose and time parameters. 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 test, we used the following four JPEG images.

File Name​

Original Size​

Guetzli (85 Quality)​

Lossy (85 Quality)​

WebP​

test-1.jpg 712KB 67KB in 38.30s 83KB in 2s 53KB in 3s
test-2.jpg 1.7MB 231KB in 1m21s 238KB in 4s 254KB in 3s
test-3.jpg 2.2MB 346KB in 2m30s 416KB in 4s 344KB in 4s
test-4.jpg 4.6MB 478KB in 4m46s 499KB in 5s 322KB in 5s

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:

---

Pros

• 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

Cons

• 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

Summary


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.

Related Articles

• Convert to WebP Format – The Successor of JPEG
• Smart Image Compression with Optimus WordPress Plugin
• How to Optimize and Compress Image Files

The post Benchmarking Guetzli – Comparing Size vs Optimization Time appeared first on KeyCDN Blog.

Continue reading...

 

Wow more optimisations for page load speed are welcomed

Coincidentally, I am working on a batch image resizer and image compression/optimiser script called optimise-images.sh too GitHub - centminmod/optimise-images. Will add Guetzli into it too

ouch Guetzli is a resource hog though Extremely slow performance · Issue #50 · google/guetzli · GitHub

from GitHub - google/guetzli: Perceptual JPEG encoder

 

Nope as there is no updating xf database for images' md5 hashes available. Though I guess if i understood xf attachments database schema and md5 hashes better, i could certainly script it as well

 

now you have me thinking about it hehe.. all i need is mysql queries for retrieving xenforo attachments and updating their md5 hashes i think as well as xenforo attachment structure - though xf addons can muddle up where they are placed heh. But my GitHub - centminmod/optimise-images script is really meant just for standalone batch resize/optimising of images within a directory right now. I am thinking of adding a simple gallery static html generator and image srcset breakpoint generator though

 

New web dev & web performance forum to continue image optimisation discussions https://community.centminmod.com/forums/web-development-web-performance.60/