URL: https://github.com/mozilla/mozjpeg

I've written about mozjpeg before where I showed what it can do to a sample directory full of different kinds of JPEGs. But let's get more real. Let's actually install it and look at one thumbnail and one big photo.

To install, I used the pre-compiled binaries from this wonderful site. Like this:

# wget http://mozjpeg.codelove.de/bin/mozjpeg_3.1_amd64.deb
# dpkg -i mozjpeg_3.1_amd64.deb
# ls -l /opt/mozjpeg/bin/cjpeg
-rwxr-xr-x 1 root root 50784 Sep  3 19:03 /opt/mozjpeg/bin/cjpeg

I don't know why the binary executable becomes called cjpeg but that's fine. Let's put it in $PATH so other users can execute it:

# cd /usr/local/bin
# ln -s /opt/mozjpeg/bin/cjpeg

Now, let's actually use it for something. First we need a realistic lossy thumbnail that we can optimize.

$ wget http://www.peterbe.com/static/cache/eb/f0/ebf08e64e80170dc009e97f6f9681ceb.jpg

This was one of the thumbnails from a previous post called Panasonic Lumix from 2008 or a iPhone 5S from 2014.

Let's optimize!

$ jpeg -outfile ebf08e64e80170dc009e97f6f9681ceb.moz.jpg -optimise ebf08e64e80170dc009e97f6f9681ceb.jpg
$ ls -l ebf08e64e80170dc009e97f6f9681ceb.*
-rw-rw-r-- 1 django django 11391 Sep 26 17:04 ebf08e64e80170dc009e97f6f9681ceb.jpg
-rw-r--r-- 1 django django  9414 Oct 10 01:40 ebf08e64e80170dc009e97f6f9681ceb.moz.jpg

Yay! It's 17.4% smaller. Saving 1.93Kb.

So what do they look like? See for yourself:

I have to zoom in (⌘-+) 3 times until I can see any difference. But remember, the saving isn't massive but the usecase here is a thumbnail.

So, let's do the same with a non-thumbnail. Some huge JPEG.

$ time cjpeg -outfile Lumix-2.moz.jpg -optimise Lumix-2.jpg
real    0m3.285s
user    0m3.122s
sys     0m0.080s
$ ls -l Lumix*
-rw-rw-r-- 1 django django 4880446 Sep 26 17:20 Lumix-2.jpg
-rw-rw-r-- 1 django django 1546978 Oct 10 02:02 Lumix-2.moz.jpg
$ ls -lh Lumix*
-rw-rw-r-- 1 django django 4.7M Sep 26 17:20 Lumix-2.jpg
-rw-rw-r-- 1 django django 1.5M Oct 10 02:02 Lumix-2.moz.jpg

In other words, from 4.7Mb to 1.5Mb. It's 68.3% the size of the original. And the visual difference?

Again, I have to zoom in 3 times to be able to tell any difference and even when I've done that it's hard to tell which is which.

In conclusion, let's go ahead and use mozjpeg to optimize thumbnails.

Comments

Anonymous

Lumix-2.jpg is compressed at quality 97.
mozjpeg recompresses it a default quality 75 for Lumix-2.moz.jpg

Comparison is flawed until you recompress Lumix-2.jpg with 'regular' cjpeg from libjpeg-6b, at quality 75 too.

Anonymous

(and same thing for the thumbnail: original quality is 81, recompressed one is 75).

Anonymous

Thank you for this information. I use a conversion to webp for some of my images (mainly PNG) and have good results (I have nginx configured to return the webp if the browser supports it, based on accepts header) so this can be thrown into my toolchain for the rest. Those size savings can make quite a difference on image heavy sites.

Your email will never ever be published.

Previous:
localStorage is not async, but it's FAST! October 6, 2015 Web development, AngularJS, JavaScript
Next:
And bash basics October 16, 2015 Linux, macOS
Related by category:
set -ex - The most useful bash trick of the year August 31, 2014 Linux
brotli_static in Nginx November 8, 2024 Linux
Fastest way to find out if a file exists in S3 (with boto3) June 16, 2017 Web development
Be very careful with your add_header in Nginx! You might make your site insecure February 11, 2018 Linux, Web development
Related by keyword:
Fastest way to uniqify a list in Python August 14, 2006 Python
mincss "Clears the junk out of your CSS" January 21, 2013 Python, Web development
Django ORM optimization story on selecting the least possible February 22, 2019 Python, Web development, Django, PostgreSQL
Fastest way to match a filename's extension in Python August 31, 2017 Python