Image compressors compared

I recently saw a question on reddit asking what the best way to optimize images was. Everyone seemed to respond with a different answer, with some recommending apps, some websites, and others CLI utilities.

For the last couple of years, I've relied soley on tinyjpg and compressor.io. However, the reddit question got me thinking:

• What are all the cross-platform image compressors?
• How well do they compress with different settings?
• What is the quality of the image the comes out?
• What are the smallest file sizes that can be achieved with only a minor loss in quality?

Overview

imagemin

Imagemin works by utilizing plugins such as jpegtran, jpeg-recompress, mozjpeg and pngquant.

tinyjpg

I've used tinyjpg.com for a while now. They support compressing pngs or jpegs. This compressor is on the more aggressive side, so you need to watch the output quality.

compressor.io

compressor.io is an online uploader. It supports compressing svgs, pngs, jpgs, and gifs, with the option to go for lossy or lossless compression for pngs and jpgs. It seems to be on the less aggresive side, but has good output quality.

Abraia

I had never heard abraia optimizer before writing this article, but I decided to add it in last second. I did have an image return corrupted (at 37 bytes) https://unsplash.com/photos/7ACuHoezUYk.

ImageOptim

According to their website, their app doesn't do lossy compression by default. Also, their app isn't on the App Store, so you need to download it from the website.

Comparing compression

We'll have four different jpgs images to compress. The output size and quality of the resulting image will be compared between the compressors. Each section will have a comparison tool, where the left side will show the original image, and the right will show the compressed version.

SSIM

Apparently, there's a neat way to compare how similar two images are called Structured Similarity (SSIM). For each comparison, I'll also be including the SSIM number for each compressed image. The package I used, ssim.js, gives a simple explanation of how it works:

“Get a 0 to 1 score on how similar two images are. The closer SSIM is to 1 the higher the similarity.”

- ssim.js

Settings

Name                 |  Settings
---------------------|-------------------------------------
recompress-low       |  jpeg-recompress with quality=low min=40 max=85
recompress-medium    |  jpeg-recompress with quality=medium min=60 max=85
mozjpeg              |  mozjpeg with quality=95
mozjpeg-medium       |  mozjpeg with quality=80
jpegtran             |  jpegtran
jpegtran-progressive |  jpegtran with progressive=true
imageoptim           |  https://imageoptim.com/online with quality=medium
compressorio         |  https://compressor.io
tinyjpg              |  https://tinyjpg.com

One thing you'll note, is the mozjpeg actually outputs larger images than the original. I'm not sure how that happened or if I've done it wrong. The repo for how I compressed the images lives at:

Image: Leaves

If you look closely, you can see that both abraia, recompress-low and tinyjpg changed some of the darker greens into a lighter green. Interestingly, those three also have the lowest SSIM score. However, I don't see any notable artifacting produced by any of the three, and they did produce the smallest file sizes.

The rest look fairly close to the original, and have very close SSIM scores. I would say imageoptim and mozjpeg-medium both take the win here for most smallest file size without changing the quality of the image.

Image: Work Harder

The aggressive compression from abraia, recompress-low, and tinyjpg created fairly obvious artifacting and gradient banding. Besides jpegtran, the rest of them created artifacting, but isn't to a much lesser extent. It's really only noticeable if I turn my monitor brightness all the way up.

At this point, I would say recompress-medium and mozjpeg-medium had the best compression while still retaining fairly good quality, although artifacting is still noticeable if you look hard enough. imageoptim and compressorio did very well, but produced a small amount of pixelated banding, but isn't as noticeable.

Image: Flowers

While switching back and forth between the tinyjpg and the original in different tabs in Firefox, I noticed a difference in color that wasn't noticeable in Chrome. As it turns out, Firefox renders several of the compressed versions with more saturation, but Chrome doesn't.

As far as bytes saved, recompress-low took a good chunk out of the file size, and it certainly shows. It made the image look quite pixelated, while tinyjpg is looks acceptable. To my eyes, the others look the same as the original.

Image: Coffee

Once again, if you view this in Firefox, you'll see a more saturated image on the right for several of the compressed versions. I imagine that's a bug with Firefox. In any case, I don't see any noticeable artifacting for any of the compressed images.

Results

tinyjpg

tinyjpg has fairly aggressive compression, which, depending on the image, produces noticeable artifacting and color shifting. Whether or not the artifacting is acceptable is up to you. I have a hunch jpeg-recompress and mozjpeg could be tuned to get slightly closer to tinyjpg's compression without as much loss in quality.

Abraia

abraia did about the same as tinyjpg. It reduced the file sizes quite well, but also produced barely noticeable artifacting and color shifting, aside from the Work Hard image, of course, which had farily obvious gradient banding.

jpegtran

According to the SSIM scores, it truly is a lossless compressor. However, I'm usually looking to save a lot more bytes than what it does, so I'm not really interested in this compressor. However, if I need a lossless compressor, I know where to look.

jpeg-recompress and mozjpeg

Again, I've no idea why mozjpeg with default settings outputs a file greater than the input size. However, with a quality setting of 80, it reduced the file size quite well while retaining nearly identical quality. jpeg-recompress also did well with the "medium" settings.

Basically, for these two plugins, it's not, "These plugins are too aggressive or not aggressive enough". The quality and size reductions are the result of what settings you pass to them. They can either achieve good compression while sacrificing a good deal of quality, compress decently (as compared to tinyjpg) while retaining good quality, or somewhere in between.

imageoptim

Out of all of them, I would say imageoptim, with the preset medium settings, did the best at reducing the file size while retaining as much of the quality as possible. I used their website uploader, so I'm not quite sure what settings their app has.

Conclusion

Interestingly, even for different images compressed by the same compressor, the quality of the images differed. Some looked pixelated and some didn't. This just goes to show that you need to be always look at the end result to make sure it doesn't look the output quality is acceptable.

To decide which compressor is best for you, or even what settings you choose for the compressor, you have to decide what you value. This is a seesaw decision. Do you value bytes saved or image quality? As we've seen, some of the compressors can be tuned to be somewhere in the middle.

Personally, I value bytes saved reduction, and I highly doubt, the majority of users aren't going to notice the minor artifacting. I'll probably do more testing, but imageoptim and jpeg-recompress or mozjpeg all look like great choices for the most bytes saved while retaining quality, if the settings are right.