Andrew Welch

Andrew Welch · Insights · #devops #webperf #craftcms

Making the web better one site at a time, with a focus on performance, usability & SEO

2016.12.13 · 5 min read ·

Installing mozjpeg on Ubuntu 16.04 (Forge)

If you want to go the extra mile optimizing your images, here’s how to install mozjpeg on Ubuntu 16.04 (Forge)

Extra Mile

For those of you who read the Creating Optimized Images in Craft CMS article, and are interesting in going the extra mile… there is another lossless JPEG image optimization tool called mozjpeg that you might want to utilize.

The reason I didn’t include it in the original article is that there’s no package that you can just apt-get install. It requires a little more work, but it’s worth it. In my tests, I’m saving between 3-5% on the images created with mozjpeg vs. jpegoptim, depending on the image. Here’s a nice Comparison of JPEG Lossless Compression Tools if you like looking at stats.

For example, here’s an image I used in my blog in its unoptimized (but properly resized) glory:

Nice View Unoptimized

unoptimized image: 82,011 bytes

Next, the image optimized with jpegoptim:

Nice View Jpegoptim

jpegoptim image: 81,950 bytes

And here is the same image optimized with mozjpeg:

Nice View Mozjpeg

mozjpeg image: 79,822 bytes

Can you tell the difference between these images? You shouldn’t, because the optimization is lossless. The image itself is unchanged. The savings are not a huge difference in terms of jpegoptim vs. mozjpeg (81,950 bytes vs 79,822 bytes), but 2k is 2k… and the difference can be more than this ~3% savings depending on the image.

jpegoptim went from 82,011 bytes in the original image to 81,950 bytes, a savings of just 0.07%

mozjpeg went from 82,011 bytes in the original image to 79,822 bytes, a savings of 2.66%

Obviously the huge gains in optimizing images are in ensuring that they are properly sized & compressed to begin with, which these were, courtesy of Imager. But lopping off the unnecessary cruft in a lossless manner via mozjpeg is the cherry on top.

And it’s not that hard to install it. So if you’re on-board, and feel comfortable using a terminal… away we go!

The instructions here were all done on a VPS running Ubuntu 16.04 via Forge. They also work fine on my local dev Homestead environment, which is also Ubuntu 16.04.

First, make sure you have all of the packages we need to build mozjpeg installed via:

sudo apt-get install autoconf automake libtool nasm make pkg-config git

Next cd to your build directory (just cd ~ is probably fine) and clone the git repo:

git clone https://github.com/mozilla/mozjpeg.git

Then do the following to configure and compile mozjpeg 3.x:

cd mozjpeg
autoreconf -fiv
./configure
make

Go grab a cup of coffee, the make command will take a bit. Now we need to install it; by default it’ll be installed in /opt/mozjpeg directory:

sudo make install

Now we’ll create a symlink to the special mozjpeg version of jpegtran into a path that’s in our $PATH (and where Imager expects it to be):

sudo ln -s /opt/mozjpeg/bin/jpegtran /usr/bin/mozjpeg

Then go into the imager plugin folder, duplicate the config.php file, rename it imager.php, and copy that imager.php file into your craft/config directory. This file lets us customize how Imager works. Open the imager.php file up in your text editor, and enable mozjpeg like this:

  'mozjpegEnabled' => true,
  'mozjpegPath' => '/usr/bin/mozjpeg',

Make sure you set 'jpegoptimEnabled' => false, if you were using jpegoptim already. I also do this:

  'optimizeType' => 'runtime',

…so that Imager optimizes the images immediately, rather than via a task, because I had a situation where my CDN was grabbing & caching the images before the Imager task optimized them.

That’s it! Enjoy your super-optimized images, and congrats on going the extra mile!

I’d also highly suggest reading the article Using WebP images in Craft with Imager to add webp support via Imager.

Create Craft Cms 3 Plugin

Insights · 2017.05.24

So you wanna make a Craft 3 plugin?

#Craft 3 #PhpStorm #homestead

Ab Split Testing Second Image Deux

Insights · 2017.05.10

A/B Split Testing with Nginx & Craft CMS

#devops #frontend #split testing

Homestead Sharing

Insights · 2017.05.06

Mobile Testing & Local Dev Sharing with Homestead

#devops #homestead #sharing

Coffee Beans Static Asset Versioning

Insights · 2017.05.05

Simple Static Asset Versioning in Craft CMS

#frontend #devops #craftcms

Buried In Tag Manager Tags

· 2017.04.19

Tags Gone Wild! Managing Tag Managers

#frontend #devops #performance

Homestead Prairie Schooner

Insights · 2017.03.31

Local Development with Vagrant / Homestead

#devops #frontend #homestead

Tidal Wave Disaster

Insights · 2017.03.20

Mitigating Disaster via Website Backups

#backups #devops #craftcms

Web Host Server

Insights · 2017.03.09

How Agencies & Freelancers Should Do Web Hosting

#devops #hosting #vps

Critical Css Stopwatch

Insights · 2017.02.28

Implementing Critical CSS on your website

#critical-css #frontend #performance

${ category } · ${ blog.postDate }

${ blog.title }

#${ tag }