Making the web better one site at a time, with a focus on performance, usability & SEO
· 5 min read · RSS Feed
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:
Next, the image optimized with jpegoptim:
And here is the same image optimized with mozjpeg:
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!
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
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.