12 Aug

Brian Gilbert

Recently I blogged 6 tips for manually optimising images, now I’m going to show you how to do it automatically with Drupal!

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 advancecompOptiPNG (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 optipngPngcrush (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 pngcrushpngout (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/binpngquant (lossy) https://pngquant.org/
       Linux: apt-get install pngcrush (ensure you are using a version 0.7.5 or higher)
       OS X: brew install pngquantjpegoptim (lossless & lossy) https://github.com/tjko/jpegoptim
       Linux: apt-get install jpegoptim
       OS X: brew install jpegoptimjpegtran (lossless) which is part of jpeglib package http://jpegclub.org/
       Linux: apt-get install libjpeg-progs
       OS X: brew install libjpegjfifremove (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

What is the real world effect?

This acts on any image that is displayed via an image preset. The original images are not affected. I can’t personally think of a case any time recently where we are displaying original uploaded images so for our usage this is perfectly acceptable.

Filesize saving in a really simple test of an iPhone6+ screenshot in PNG format showed a reduction in size of around a quarter.

What to do If you are using shared hosting..

Odds are that you won’t be able to install the tools above using the method shown. You’ll likely need to create statically linked binaries so that you can upload them to the server.

A statically linked binary is an executable that doesn’t require any support libraries as they are included in the binary itself. This results in a binary that will run on any system of the right CPU type (i386, x86_64) The downside of this is that the resulting binary ends up being larger.

Normally, when you download a tarball of source code, you’ll do the standard “configure; make; make install” to build it. If you want a statically linked binary, replace the plain “make” with:

    make SHARED=0 CC='gcc -static'

You will need to do this on a machine with the same architecture as your shared hosting.

Pro tip

It’s possibly worth using the ImageCache Actions module to automatically convert gif’s to png, because there isn’t really any good case for using gif’s now, especially with the above in place, unless your site expects animated gifs to be uploaded but if displayed via an image style these animations would become static anyway.

drupal planet