Skip to main content

Better image optimisation in Drupal

When optimising a site for performance, one of the options with the best effort-to-reward ratio is image optimisation. Crunching those images in your Front End workflow is easy, but how about author-uploaded images through the CMS?

by tony.comben /

Recently, a client of ours was looking for ways to reduce the size of uploaded images on their site without burdening the authors. To solve this, we used the module Image Optimize which allows you to use a number of compression tools, both local and 3rd party.

The tools it currently supports include:

We decided to avoid the use of 3rd party services, as processing the images on our servers could reduce processing time (no waiting for a third party to reply) and ensure reliability.

Picking your server-side compression tool

In order to pick the tools which best served our we picked an image that closely represented the type of image the authors often used. We picked an image featuring a person’s face with a complex background - one png and one jpeg, and ran it through each of the tools with a moderately aggressive compression level.

PNG Results

Compression Library Compressed size Percentage saving
Original (Drupal 8 default resizing) 234kb -
AdvPng 234kb 0%
OptiPng 200kb 14.52%
PngCrush 200kb 14.52%
PngOut 194kb 17.09%
PngQuant 63kb 73.07%
Compression Library Compressed size Percentage saving
Original 1403kb -
AdvPng 1403kb 0%
OptiPng 1288kb 8.19%
PngCrush 1288kb 8.19%
PngOut 1313kb 6.41%
PngQuant 445kb 68.28%

JPEG Results

Compression Library Compressed size Percentage saving
Original (Drupal 8 default resizing) 57kb -
JfifRemove 57kb 0%
JpegOptim 49kb 14.03%
JpegTran 57kb 0%
Compression Library Compressed size Percentage saving
Original 778kb -
JfifRemove 778kb 0%
JpegOptim 83kb 89.33%
JpegTran 715kb 8.09%

Using a combination of PngQuant and JpegOptim, we could save anywhere between 14% and 89% in file size, with larger images bringing greater percentage savings.

Setting up automated image compression in Drupal 8

The Image Optimize module allows us to set up optimisation pipelines and attach them to our image styles. This allows us to set both site-wide and per-image style optimisation.

After installing the Image Optimize module, head to the Image Optimize pipelines configuration (Configuration > Media > Image Optimize pipeline) and add a new optimization pipeline.

Now add the PngQuant and JpegOptim processors. If they have been installed to the server Image Optimize should pick up their location automatically, or you can manually set the location if using a standalone binary.

JpegOptim has some additional quality settings, I’m setting “Progressive” to always and “Quality” to a sweet spot of 60. 70 could also be used as a more conservative target.

JpegOptim Settings

The final pipeline looks like the following:


Back to the Image Optimize pipelines configuration page, we can now set the new pipeline as the sitewide default:

Default sitewide pipeline

And boom! Automated sitewide image compression!

Overriding image compression for individual image styles

If the default compression pipeline is too aggressive (or conservative) for a particular image style, we can override it in the Image Styles configuration (Configuration > Media > Image styles). Edit the image style you’d like to override, and select your alternative pipeline:

Override default pipeline

Applying compression to existing images

Flushing the image cache will recreate existing images with compression the next time the image is loaded. This can be done with the drush command 

drush image-flush --all


Setting up automated image optimisation is a relatively simple process, with potentially large impacts on site performance. If you have experience with image optimisation, I would love to hear about it in the comments.

Posted by tony.comben
Front end Developer



Comment by Andy


Did you consider using mod_pagespeed at all? If you did what made you decide against it?

Comment by tony.comben


Good question, Drupal performs many of the optimisations that mod_pagespeed does but allows us more granular control. One of the benefits of this approach is being able to control compression levels per image style. As Drupal is resizing and reshaping images then anyway, I feel it makes sense to do the compression at the same time.

Comment by saj


Hi Tony,
Nice of you to post some details on this.

How does this integrate with Responsive Images and the Picture fields?

Can it crop and scale immediately after upload to get multiple files for multiple view ports?


Comment by tony.comben


Hi Saj, Responsive Images picks up its variants from the Image Styles so this works seamlessly. You can set your image dimensions and cropping in the image style, and the compression is applied after that.

Comment by Shane


Nice write up! I never knew about this Drupal module.

It'd be nice to compare the Original Image + Drupal Compression + Final Selected compression library output through some image samples.

Also might worth mentioning that PngQuant is a lossly image compression algorithm - and the others aren't (hence the big compression difference).

Comment by Christoph Weber


I'd recommend running optipng or pngcrush after pngquant to get an even more compressed image. Careful though, this can burn CPU cycles, especially with the module's obsessive parameter choices. Have a look at the $cmd entries in binaries/*.inc if you're curious.

Comment by Oli Chowdhury


Hi Christoph,

How do you define the order by which these compressions are applied?

Great article btw! The comparison metric is quite useful in knowing which tool is the best performer. I initially went for jpegtran but jpegoptim is producing way better results.


Comment by STEFY



Comment by Dalin


I recommend one of the external services when you’re on a host where you can’t install extra server software (like Pantheon).

Comment by victorkurauchi


Hi! Nice post. Which version did you use with Drupal 8 ?

8.x-2.0-alpha3 ? No issues with alpha version ? Thanks

Comment by Alex Edge


Hi! Did you try this version of the module with actual Drupal version?
What result have you got?

Comment by Jonna Mord


I am glad to read such a huge stuff about the picture optimisation in Drupal. This looks really interesting to me and I would love to try out out after my bus tours from washington dc

Comment by Lara


Hi Tony,
Nice explanation of use of imageAPI module. m a newbie in D8, working on a live site.. I had a question regarding, setting manual path of pngquant.. As understood in windows, php folder should have its dll file, but as i am working on server directly, i dont know how to proceed from that step. Please do help.

Comment by thomas


Excellent article ...

I am having trouble implementing the solution with local binaries. It's strange.. I have installed pngQuant and jpegOptim and indeed Drupal found them. I created a pipeline with both processors. However, only jpegOptim seems to work (if I upload a jpg, it does get compressed). PngQuant simply does not get 'picked up' - no matter if I upload new picture, if I run the drush command to flush all styles - nothing. I see no errors on log files. I ran PngQuant from command line, on a test picture and there it did work - compressing the image. I m puzzled, cannot understand why .. I also tried to create another pipeline, only with PngQuant and applied it to a style I am using - again nothing. For some strange reason, PngQuant simply does not run.. Any help would be appreciated :) ..

Comment by Dipayan Pramanik


Hey @Tony i am facing an issue when i am uploading an image after installing this module and setting up its processor, getting output 6kb. Then i have uninstalled this module and uploaded same image, getting output 55kb. then i have again installed the module and run drush image-flush --all and getting output is 55kb. Meanwhile my concern is it not updating already existing image size. Waiting for your reply as soon as possible. Thank you

Comment by jakson


nice sharing.

Comment by Rolf Costello


Thnx for sharing! I will try this asap.