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?
|Name||App||Online Uploader||Uploader Limit||API|
|ImageOptim||Free (macOS only)||Yes||N/A||Paid|
|imagemin||Free (all platforms)||No||N/A||No|
Imagemin works by utilizing plugins such as jpegtran, jpeg-recompress, mozjpeg and pngquant.
Each plugin has its own settings that can be configured. This is a great article on how
jpeg-recompress settings work:
Quality, min and max with jpeg-recompress
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 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.
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.
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.
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
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:
If you look closely, you can see that both
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
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
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
mozjpeg-medium had the best compression while still retaining fairly good quality, although artifacting is still noticeable if you look hard enough.
compressorio did very well, but produced a small amount of pixelated banding, but isn't as noticeable.
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.
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.
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
mozjpeg could be tuned to get slightly closer to
tinyjpg's compression without as much loss in quality.
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.
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.
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.
Interestingly, different pictures produced a different quality of output for the same compressor with the same settings. Some pictures were pixelated and some weren't. This just goes to show you should always look at the end result to make sure 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?
Personally, I value bytes saved, and I highly doubt the majority of users are going to notice the minor artifacting. In fact, I found the artifcating to only be noticeable on a high ppi screen with the brightness turned all the way up.
mozjpeg all look like great choices for the most bytes saved while retaining quality, if the settings are right.