Processing... Please wait...

Product was successfully added to your shopping cart.

Magento image optimization in 3 easy steps

I do Magento image optimization as a part of my 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.



Magento image optimization - 3 ways

  1. Using command line tools jpegtran, optipng, gifsicle.
  2. PageSpeed server module.
  3. Google PageSpeed Insights.


1. 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:

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.


2. 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).


3. 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.



Strugle with slow Magento! We can help! Fill out the form below.


Like the article? Share:


Other articles you might be interested in:

  1. How to eliminate render-blocking Javascript in Magento
  2. Magento on HHVM beats PHP7
  3. Magento vs 2.1.4 Performance Benchmark
  4. How to lower TTFB from 8s down to 0.8s
  5. Magento 2 and 1 Million Products


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

Thank You!



One thought on “Magento image optimization in 3 easy steps”