Image Optimization for your Magento store: Why & How?

Images are everything

They say, “A picture is worth a thousand words” and it holds true in the eCommerce world too. An online store is nothing without the images of the products as we all love to interact with images more than the text. Thus, for the merchants it is important to provide high quality images of products to the online store visitors so they can explore all angles before making a purchase decision. At the same time, if the images are heavy and utilising more resources, it will make the page load slow and thus affect the bottom line. Striking a balance is imperative. 

How image size affects the performance?

Image size is directly proportional to page performance. On an average, approx. 64% of a website’s weight is because of the images, according to HTTP Archive. If the image size is reduced without compromising on the quality of the images, it will surely have a direct positive impact on the load speed. 

What can be done?

If we run the Google page speed insights test or a GTMetrix test, there is a list of recommendations that come on how to improve Magento performance. Paying close attention to the images gives the details on where the scope of improvement lies. There are a number of things that can be done that include:

Command line tools: Command line tools such as Gifsicle, Jpegtran, or OptiPNG are widely used to optimise the images. These tools help rewrite the current images to an optimised version without changing the file names. All cached images will also be optimized.  

Extensions: Popular Magento 2 extensions that help in image optimisation include Apptrian, Potatocommerce, etc.  Amasty page speed optimiser helps achieve overall speed improvement including image optimisation. 

What makes the difference?

Apart from optimising the images, one thing that really makes the difference is image lazy load.   Lazy loads makes the images on the website load asynchronously only when above-the-fold has loaded fully or when below-the-fold section appears in the browser’s viewport. This simply means that the lower sections on a web page will load only when the first section has loaded fully or the user scrolls all the way down. In Magento stores, specifically the ones where the number of images is huge, this really makes the difference in load times. 

We recently applied the same for one of our clients- Discount Equestrian, which was facing issues because of image optimisation. This was done using Amasty Google Page Speed Optimiser. Upon configuration and appropriate settings here:

There has been a considerable improvement in the load times and sales.  

If you too feel the need to boost the speed and performance of your eCommerce store, talk to us today!

Leave a Reply