Automating image optimisation with Drupal to improve performance

Have Drupal do the heavy lifting to optimise your uploaded images, because it's not a task you should push back on your content creators.

Some time ago we undertook a performance audit for the website of a substantial local news service. One of the areas I found that we could increase the performance of their website was to compress their numerous images.

After identifying the commands to apply using the various optimising programs we found that the ImageAPI Optimize module got us some of the way there. We were then able to develop a patch to implement the extra binaries and later gain co-maintainer status, allowing us to improve the module further.

What is the ImageAPI Optimize module

The ImageAPI Optimize module allows you to preprocess and optimise uploaded JPG and PNG images that get generated via an Image Style rather than use Drupal’s inbuilt compression which only affects JPG files.

Despite the name, the D7 version of this module does not depend on ImageAPI. It depends only on the core image.module.


It allows the use of multiple binaries, some of which are lossy compressors, so note that you may want to only use some of the tools listed below.

1. Download and enable the required module
https://www.drupal.org/project/imageapi_optimize

2. Configure appropriately

Navigate to /admin/config/media/image-toolkit in your site and select the ImageAPI Optimize radio button, then click Save.


Now you will need to set your ImageAPI Optimize Base Toolkit, you’ll if you have Imagemagick on your server you may want to select that instead of GD.

Then you want to configure the ImageAPI Optimize Service settings.

To find the path for each of the binaries you can run the following commands in terminal on your server, one at a time, and copy the output into the relevant fields, if there is no output then you can follow the instructions in step 3 to install the binary in question.

which advpng
which optipng
which pngcrush
which advpng
which advdef
which pngout
which jpegoptim
which jfifremove
Then in the advanced settings for the jpeg tools I recommend you set the output to be a progressive jpeg. For more on why this is a good idea see the following links:
http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html

3. Set-up image compressors on your webserver & development computer if they weren’t on your server

I will only provide instructions for Debian based Linux variants, and OS X (where homebrew is installed) here.

advpng (lossless) which is part of the advancecomp package http://www.advancemame.it/comp-readme.html

    Linux: apt-get install advancecomp
    OS X: brew install advancecomp

OptiPNG (lossless) http://optipng.sourceforge.net

    Linux: apt-get install optipng (ensure you are using a version 0.7.5 or higher)
    OS X: brew install optipng

Pngcrush (lossless) http://pmt.sourceforge.net/pngcrush/

    Linux: apt-get install pngcrush (ensure you are using a version 0.7.5 or higher)
    OS X: brew install pngcrush

pngout (lossless) http://www.jonof.id.au/kenutils
    Linux: download binary archive and extract to /usr/local/bin
    OS X: download binary archive and extract to /usr/local/bin

pngquant (lossy) https://pngquant.org/

    Linux: apt-get install pngcrush (ensure you are using a version 0.7.5 or higher)
    OS X: brew install pngquant

jpegoptim (lossless & lossy) https://github.com/tjko/jpegoptim

    Linux: apt-get install jpegoptim
    OS X: brew install jpegoptim

jpegtran (lossless) which is part of jpeglib package http://jpegclub.org/

    Linux: apt-get install libjpeg-progs
    OS X: brew install libjpeg

jfifremove (lossless) http://lyncd.com/files/imgopt/jfifremove.c

You need to compile it and then copy it into your path:

wget http://lyncd.com/files/imgopt/jfifremove.c
gcc -o jfifremove jfifremove.c
mv jfifremove /usr/local/bin