If you don’t know, Mozjpeg is a modified version of libjpeg-turbo-tools that will compress jpeg images more than standard jpegtran/jpegoptim without loss of any quality (lossless).
But what’s really magical about Mozjpeg is the utility cjpeg which compresses the jpeg files - this is where you can really save bytes without losing much quality.
You can read more about mozjpeg here: http://calendar.perfplanet.com/2014/mozjpeg-3-0/
I’ve been playing around with mozjpeg (mostly cjpeg) to see if I can’t optimize my client’s images kinda automatic without much loss of quality.
In this example, I’m only using one image for quality checks.
This jpeg image is of 99% quality factor and is 500kB (huge).
The jpeg image is a huge background image in a “hero” area in above the fold.
[attachment=479]
Here are the results of my experiments:
-rw-r--r-- 1 sigurdur sigurdur 480142 feb 1 11:34 home-page-image-big-1jpegtranmozjpeg.jpg
-rw-r--r-- 1 sigurdur sigurdur 481715 feb 1 11:34 home-page-image-big-1jpegtranorig.jpg
-rw-r--r-- 1 sigurdur sigurdur 74494 feb 1 02:26 home-page-image-big-1mozjpegcjpeg75.jpg
-rw-r--r-- 1 sigurdur sigurdur 79487 feb 1 12:27 home-page-image-big-1mozjpegcjpeg80.jpg
-rw-r--r-- 1 sigurdur sigurdur 95119 feb 1 12:28 home-page-image-big-1mozjpegcjpeg85.jpg
-rw-r--r-- 1 sigurdur sigurdur 126882 feb 1 12:28 home-page-image-big-1mozjpegcjpeg90.jpg
-rw-r--r-- 1 sigurdur sigurdur 183337 feb 1 12:29 home-page-image-big-1mozjpegcjpeg95.jpg
-rw-r--r-- 1 sigurdur sigurdur 83587 feb 1 12:51 home-page-image-big-1mozjpeg75-notrellis.jpg
-rw-r--r-- 1 sigurdur sigurdur 102665 feb 1 12:51 home-page-image-big-1mozjpeg75-notrellis-sample1x1.jpg
-rw-r--r-- 1 sigurdur sigurdur 90285 feb 1 02:32 home-page-image-big-1mozjpeg75-psnr.jpg
-rw-r--r-- 1 sigurdur sigurdur 91033 feb 1 12:48 home-page-image-big-1mozjpeg75-sample1x1.jpg
-rw-r--r-- 1 sigurdur sigurdur 96669 feb 1 02:33 home-page-image-big-1mozjpeg75-ssim.jpg
-rw-r--r-- 1 sigurdur sigurdur 64634 feb 1 02:33 home-page-image-big-2mozjpeg75-ms-ssim.jpg
-rw------- 1 sigurdur sigurdur 85863 feb 1 02:04 home-page-image-big-75.jpg
-rw------- 1 sigurdur sigurdur 99570 feb 1 02:04 home-page-image-big-80.jpg
-rw------- 1 sigurdur sigurdur 118615 feb 1 13:45 home-page-image-big-85.jpg
-rw------- 1 sigurdur sigurdur 152589 feb 1 13:45 home-page-image-big-90.jpg
-rw-r--r-- 1 sigurdur sigurdur 502793 feb 1 01:36 home-page-image-big.jpg
So originally, the image is 502793, and if we use jpegtran/jpegoptim to losslessly optimize it, it shrinks to 481715 bytes.
If we use Mozjpeg 3.0 jpegtran the image losslessly shrinks to 480142 bytes (~1.5kB smaller than original jpegtran)
The image is still friggin’ huge (because of quality factor 99%)
Well, after testing various things on this image and how it affects the size, quality and download speed, I’ve found that using 90% quality with mozjpeg (or 85% quality using “normal” compression tools) is probably the best in regards to quality/size.
The difference between “normal” jpeg quality 85 and mozjpeg quality 90 is huge, quality wise.
Even when only comparing the quality between Mozjpeg Q85 and normal Q85, it looks to me as if it has fewer artifacts (due to some smoothing algorithm or my internal bias).
[attachment=478]
If we calculate how much download time difference there is with Q85 and Q90 (31kB) on Cable (5mbps), we find that we only add about 60ms…
31÷(5000×.85÷8) = 0,058352941
Of course if there were multiple files like this needed for the initial download, then the 60ms aren’t worth it, but since this is the only big image then it’s worth it.
TL;DR
Mozjpeg is better at losslessly compressing (0-10% better than jpegoptim) jpeg files
cjpeg from Mozjpeg is a fantastic way to do an extreme lossy compression without losing much quality.
Have you played with Mozjpeg?