Magento image optimization howto

in Tools

If you want a faster shop, you have probably looked at Google Pagespeed Insights for useful sugestions. It probably told you to optimize your images. Which means, reducing the size-on-disk without losing quality. This is a very cumbersome process if you do this by hand (opening in Photoshop, saving-as, etcetera). But it is very easy if you use Hypernode. If you follow this article, it will take you only a couple of minutes to set up automatic image optimization.

Thanks to Peter Jaap for doing the initial research (in Dutch).

How much can you win?

First, log in on your Hypernode by SSH and type this command:

$ hypernode-image-optimizer ~/public/media
[46%] /data/web/public/media/custom_options/quote/h/o/46f68f14df54b639546a583a942cd7c2.png (255 KB smaller)
[50%] /data/web/public/media/custom_options/quote/h/o/8a45641021fb82d172b9712f6631c49a.png (405 KB smaller)
[30%] /data/web/public/media/custom_options/quote/p/l/a74e500c8e08c48e54ea65d8422bc68e.png (114 KB smaller)
[77%] /data/web/public/media/custom_options/quote/L/i/8969288f4245120e7c3870287cce0ff3.jpg (426 KB smaller)
[ 0%] /data/web/public/media/custom_options/quote/T/a/6bfddcd09ff981b24fc96e442700f2df.png (0 KB smaller)
[... long list of files ...]
Optimization profit over all files: 226 MB (30%)

Great! It has not changed anything yet, but has calculated that you can save 226MB (or 30%) of disk-usage by optimizing your images.

Saving the optimized images for real

Make sure you have a backup of your media files. Then use this command to replace the old images with the optimized images:

$ hypernode-image-optimizer --write --newonly ~/public/media

Visit your site, do a CTRL-F5 (Mac: CMD-R) to refresh your cache and visually inspect the results. You will most likely not see a difference, apart from a much quicker page 😉

Recommended: periodic optimization using cron

To keep the disk usage reduced and your shop fast, we recommend you to add a cronjob to optimize new images every night.

NB: checks for a cronjob that optimizes your images periodically. If you optimized your images only once, the check will come out red.

$ crontab -e

And add this line:

30 4 * * * chronic hypernode-image-optimizer --write --newonly ~/public/media

Presto, every night at 4:30 all new images (uploaded the previous day) will be optimized.

Pro tips

The image optimizer will do two things.

First, it will set the image compression level to 90% for JPG images, which is a very safe, conservative value. Many image optimization guides even recommend setting it to 80%. You can do so as well, by running hypernode-image-optimizer --quality 80. See below for samples at different quality levels.

Second, it will shrink big images: 2000+ pixels in width or height. If you want to change the threshold (for example, 3000 pixels), you can use hypernode-image-optimizer --size 2000.

Experimental mode

Since 21 June 2016, an --experimental mode is available. This yields better compression results (notably for PNG) but is slower. Example runs on our test images:

$ hypernode-image-optimizer ~/public/media
Safe optimization profit over 1002 files: 11 MB (37%)

$ hypernode-image-optimizer ~/public/media --experimental
Safe optimization profit over 1002 files: 17 MB (56%)

So this is another huge win in size! It takes 2 to 3 times more time, so especially the first run (where all image files are considered) may take a while (e.g. several days if you have hundred thousands of products). This should not be a problem, as the image optimizer runs in the lowest possible priority, so will not disturb your live performance.

As with the regular optimizer, ensure you have a backup before using the experimental mode.

Examples of different quality levels