Optimize images jpg and png in bulk for the SEO

by Jessy Seo noob


This article is an adaptation from my french seo blog on love-moi.fr


Google have announced his mobile first index, and the speed of a website will matter.
I was working on a demo Magento website with a lot of images but when I try to look at the pagespeed test on gtmetrix (because there's google pagespeed test and yslow test in the same panel), there was always a red flag on « image optimisation ».

The easy way if you're a sysadmin and have your own server, is to use mod_pagespeed. it works for apache and nginx. You just have to activate it, and let him do the job. You will have Grade A and nearly 100% on your pagespeed test.



If you are on a shared server, that's not the same, you can't install server scripts.
I was worry about pagespeed, it's like if he tell you : hey this is the optimize image I've done, you're a looser.

On my firebug developer tools, there's pagespeed and yslow, and for images, there was a link to smush-it, where you can download the optimized images.

That's what I've done : Download image, replace the old with the new ones, and it was ok, I've gt my 98% on pagespeed. But downloading files one by one, is not a good solution.




So I was interested on what was used by pagespeed and yslow to compress the image and use it before sending images on the server. I saw better result on yahoo tools.

How to create an automate process to optimize images ?

What tools yahoo use to compress images and what's their setting ?
Yahoo uses jpegtran that you can find on Libjpeg to optimize jpg, and pngcrush to optimize png files.

They talk about it on this page :

http://developer.yahoo.com/performance/rules.html#opt_images

So my idea was to install both libraries and make the same thing on my macbook. using libjpeg for jpg and Pngcrush (pngcrush is a part of optipng).

How to install libjpeg libraries and pngcrush on macosx ?

We need to install homebrew, because macosx is a linux base os but not all commands are available, and it will be easy to manage.

This is the command

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

The other day I have a discussion with Gary Iles from google on twitter about a new google tool called guetzli. This tool can save 35% of loseless compression. So I decide to use it in my script.

Install command for libjpeg optipng and guetzli

brew install libjpeg optipng gueztli

Create the optimisation image script

WARNING : because I want to use it directly, i replace the image on the directory they are, I create a special directory imagesrc folder where I put my images to be converted, and they are converted in the same place. No copy. don't use your originals photos or you loose them.

I found a script made by real deprez and adapted for using guetzli
https://gist.github.com/realdeprez/1512294



Create a file optimizeimage.sh
You can use any text editor you like, I'm using nano.
On your command line console :

nano optimizeimage.sh
and put this inside :
#!/bin/sh



# script for optimizing images in a directory (recursive)

# pngcrush & jpegtran settings from:

# http://developer.yahoo.com/performance/rules.html#opt_images



# pngcrush

for png in `find $1 -iname "*.png"`; do

    echo "crushing $png ..."

    pngcrush -rem alla -reduce -brute "$png" temp.png



# preserve original on error

   if [ $? = 0 ]; then

    mv -f temp.png $png

   else

    rm temp.png

   fi

done



# guetzli



for jpg in `find $1 -iname "*.jpg"`; do

   echo "gueztling $jpg ..."

   guetzli --quality 85 --verbose "$jpg" temp.jpg



# preserve original on error

   if [ $? = 0 ]; then

    mv -f temp.jpg $jpg

   else

    rm temp.jpg

   fi

done

Ctrl+O
Ctrl+x
Your file is create !

You can modify the quality but not below 84 for guetzli parameter.

How to launch the image optimisation script ?

Now you must chmod your file to be executable :

chmod 644 optimizeimage.sh

and now to use it ;

./optimizeimage.sh yourdirectory

The script is recursive, so if you have subdirectory, it will convert your images. I activate the verbose command to see what the script is doing but you can desactivate it.


Guetzli is taking a lot of ressources : 300mo for 1mo, so use it on small photos. don't hesitate to crop image at the size you need on your design and launch image optimizer after.

Let's try it on the Gary Illes photos :



The image take 114ko

Then after guetzli optimisation :


The size is only 84ko

You can now compare the result image. What's the original photo ?




Feel free now to adapt at your own needs. Things to improve : verify that images are not already optimized, create image not at the same place.