How to Optimize Your Images
If you want a faster shop, you have probably looked at Google Pagespeed Insights for useful suggestions. 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).
@Hypernode_com hypernode-image-optimizer is pretty effective “Optimization profit over all files: 502812 KB (82%)”. Thanks for that!
— Sander Mangel (@sandermangel) March 16, 2015
How Much Can You Win?
First, log in on your Hypernode by SSH and type this command:
app@83f01a-example-magweb-cmbl:~$ 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:
app@83f01a-example-magweb-cmbl:~$ hypernode-image-optimizer --quality 80 --write --newonly ~/path/to/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 ;)
To use the
hypernode-image-optimizer and exclude one or more directories, specify
--exclude with one or more paths. For example:
app@83f01a-example-magweb-cmbl:~$ hypernode-image-optimizer /data/web/public | wc -l 431 app@83f01a-vdloo-magweb-cmbl:~$ hypernode-image-optimizer /data/web/public --exclude /data/web/public/static/frontend /data/web/public/static/adminhtml/Magento | wc -l 12 # In this example images from the following directories were ignored: # /data/web/public/static/frontend # /data/web/public/static/adminhtml/Magento
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: Magereport.com checks for a cronjob that optimizes your images periodically. If you optimized your images only once, the check will come out red.
app@83f01a-example-magweb-cmbl:~$ crontab -e
And add this line:
30 4 * * * chronic hypernode-image-optimizer --experimental --quality 80 --write --newonly ~/public/media
Presto, every night at 4:30 all new images (uploaded the previous day) will be optimized.
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.
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:
app@83f01a-example-magweb-cmbl:~$ hypernode-image-optimizer ~/public/media [...] Safe optimization profit over 1002 files: 11 MB (37%) app@83f01a-example-magweb-cmbl:~$ 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