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.



Other articles you might be interested in:

  1. Magento TTFB optimization to reduce time to first byte
  2. Xhprof and PHP 7
  3. Pagespeed distribution of top 2k Magento websites
  4. Magento 2 upgrade to the latest version - 3 simple ways
  5. Does site speed really matter to SEO?


Our Magento extensions you might be interested in:


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

Thank You!



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