Compress the PNG images better than the default system provides using ImageMagick in Drupal 7

A lot of Drupal developers download the ImageMagick module and configure it to make it work. It compresses the PNG images by default but doesn't give the expected output. 

The reason is -quality parameter value. This parameter value has the different meaning for JPG/JPEG and PNG images. We know how it behaves with JPEGs in general, let’s see how it works for PNGs

1 - Understand the “-quality” parameter-

For JPG or JPEG format, the quality value works in % but for PNG format, it has a different meaning. 
The -quality parameter is a two digit number. The first digit describes the compression level and 2nd digit describes the filter-type. So for example, the default value is 75 where the 7 is the compression level and 5 a -filter-type.

For reference: https://www.imagemagick.org/script/command-line-options.php#quality

Try this-

$ convert <original_uncompressed.png -strip -quality 75  -resize WxH -alpha background PNG24:compressed/<img_name>.png

Now check the output folder and compare the file size and quality.

2 - Check what quality parameter works for you best?

Now when you are already done with step 1, you need to check what compression level will work for your application. For that, I wrote a bash script, which generates 100 copies of the single image with different values. 

#!/bin/bash
# Compress the images using imagemagick
# variables
i=0
# Compress
while [ $i -lt 101 ]
do
  convert <image_name>.png -strip -quality $i  -resize 1244x739 -alpha background PNG24:compressed/<img_name>_$i.png
  echo $i
  i=`expr $i + 1`
done
echo "Finished!"

Copy this into a new file and name it as “Image_compresison.sh” (or of your own choice)

After that, open the folder and sort by size to check the image name like mytest_85.png. Observe the size of the image which has been compressed up to 60%.

After that, open the folder and sort by size to check the image name like mytest_85.png. Observe the size of the image and confirm if the image has been compressed with the same quality.

That’s it, you found the value for -quality parameter works for your application best.
If you understand step 1 and 2 well,  It becomes easy for you to understand the how to improve the site performance. Next step is to integrate this with existing Drupal 7 system.

3 - Implement hook and compress the png images
Download the ImageMagick module is not downloaded (https://www.drupal.org/project/imagemagick) 
There is a hook hook_imagemagick_arguments_alter(), use it and after the arguments put the code in your custom module.

function mycustommodule_imagemagick_arguments_alter(&$args, &$context) {
   $imageinfo = image_get_info($context['source']);
   if ($imageinfo["mime_type"] ==  'image/png') {
     $args['quality'] = ' -quality 85';
     $args['alpha'] = ' -alpha background'
       $context['destination'] = 'PNG24:'.$context['destination'];
     } 
 }

Note: 
1- PNG24 or PNG32 needs to be implemented based on your requirement, if you are looking for high-quality images, then go with PNG:32 bit else go with PNG24. 
2. To see this code in action, add watchdog as this won’t show on your screen even after adding the die(); command
2. Read more about image compression on https://developers.google.com/speed/docs/insights/OptimizeImages 

The above code simply works with all image presets created by Drupal. Flush the style folder and give the correct permission to recreate and reload the pages.