Loading..
Processing... Please wait...

Product was successfully added to your shopping cart.



Image Optimization in 3 easy steps

I optimize images as a part of my Magento speed optimization service. Ecommerce sites powered by Magento are the complex catalogs with thousands of images. It is impossible to manually optimize every JPEGs or PNGs so I utilize a couple of automatic size reducing techniques.

Command line

First I use gifsicle (https://www.lcdf.org/gifsicle/) for GIFs, jpegtran (http://jpegclub.org/jpegtran/) for JPEGs and optipng (http://optipng.sourceforge.net/) for PNGs. Those are the command line utilities which you can download and compile or install prebuilt packages for your OS. I am using the following bash script to find every image and optimize it on the fly:

#!/bin/bash
find ./media -iname '*.gif' -exec sh -c ‘gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out" "{}"' \;
find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;
find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \;

This script could be added to cron daemon (https://linuxacademy.com/blog/linux/the-cron-daemon/) to optimize the new images as they come in.

Google PageSpeed Module

The second technique I use is called Google PageSpeed Module (https://developers.google.com/speed/pagespeed/module/). This is a server extension which you can install either for Nginx or Apache. This magic tool optimize your images on the fly and cache them optimized in the special folder on the server. The configuration is simple:

ModPagespeedRewriteLevel CoreFilters

CoreFiters filter includes image optimization as well as many other useful speed optimization tools (https://modpagespeed.com/doc/configuration).

Google PageSpeed Insights

There is the third method that I sometimes use to polish images that are already optimized by the first two techniques. Run your page through Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/) then download the optimized image pack google compiled just for you (you can find the download link at the bottom of your pagespeed report see instructions https://developers.google.com/speed/docs/insights/OptimizeImages). Honestly even with PageSpeed module installed Google Insights can still sqeeze a few kilobytes here and there. The third method requires a lot of manual work and patience but it will pay off.

 

 

If you find this post interesting do not hesitate to sign up for our newsletter and join the 811 people who receive Magento news, tips and tricks regularly.

Thank You!

 

 

One thought on “Image Optimization in 3 easy steps”