Back

How to Optimise Images in Magento

22.06.2016

Image optimisation is important for any e-commerce site. Images are the features on a page that your customers are most drawn to and without clear images, your conversion rates are likely to suffer.

They tell the customer what your product looks like and play a major part in encouraging your customer to purchase, so they need to be high quality.

However, many people associate high-quality images with large file sizes. And we all know that large files can slow down your website!

Luckily, we have compiled a few ways for you to optimise images in Magento.

But first, let’s answer a few questions on why it needs to be done.

What is Image Optimisation?

It means shrinking large files, in the right format and for the right purpose on the page, so that they remain of a high quality but don’t slow down your website loading time.

Why should you use it?

Image optimisation is important because it helps to improve your page load times.

And a quick website also has many secondary benefits:

Firstly,  speed significantly impacts user experience. Your website’s loading time determines what kind of browsing experience your customer has.

Up to 40% of customers will give up on a web page that takes more than three seconds to load.

So if customers are seeing a blank space where an image should be, or scrolling down a web page is interrupted by a loading image, then you need to be optimising your images.

Secondly, site speed can influence ranking positions. When Google says they’re obsessed with site speed, you know you should be too.

Thirdly, it can help to increase user engagement metrics such as pages per visit and average session duration. In short, the higher these metrics are the more time a user is browsing the products on your site.

We briefly touched on this point earlier, but, finally, as well as improving page load times, having high-quality product images can help a potential customer to complete the purchase.

If there is no image of the product on the page, the customer may feel unsure about whether to buy the product. However, if there is a clear image which complements a description, the customer will know exactly what to expect when placing the order.

Here is an example:

Nigel Hall Embroided Shirt

Source: Nigel Hall

 

How to Optimise for Magento

Depending on your level of technical knowledge, there are two methods you can use to optimise images.

  1. You can download extensions from the Magento Connect Manager

This is the easier option, as it does not require any coding knowledge. It’s generally less time-consuming, but you’ll have to pay for the module.

  1. Use the command line from your operating system.

This requires a developer or knowledge of the backend of Magento.

Many of the Magento extension modules are equipped with the strings of code that can be used in advanced image optimisation.

Extension Modules

Many of the available extensions can be found on the Magento Connect Manager; the library of downloadable add-ons.

This is the easier and faster method as each process is automated and can be activated with a click of a button.

  1.   Image Optimisation by Extendware (~£53/year)

 

extendware

Source: Extendware

Extendware are confident that users will like their service, so it offers a 30-day money back guarantee.

Within the licence period (usually one year) customers receive extension updates for free. Thereafter users have to pay for further updates and receive a 50% discount when they renew their licence.

Extendware uses a version of Yahoo!’s former Smush.it extension to provide you with high-quality compressed images. Therefore, it doesn’t require any server software.

With this extension, you can optimise images in the background so that your servers don’t become overloaded with requests.

Optimisation options are also available on Content Delivery Networks (CDN), and the extension can automatically enable cron jobs, that allows for scheduled optimisation processes.

It also enables you to reduce bandwidth usage by improving the browser cache management.

  1. AppTrian Image Optimiser (Free)

Apptrian

Source: Apptrian

With Apptrian, image optimisation happens at the click of a button or by configuring cron jobs.

Users can type the file paths of the images they want to be optimised, and the extension features a button that can scan and reindex images.

It also offers test resources that allow you to test the extension’s compatibility before using it on your website.

Although this extension is free, the user is required to pay for support.  Additionally, the extension has to be compatible with your server configuration.

Apptrian is designed as a last step to improve your page speed. The user should prepare the right format and resolution for their images beforehand.

To install and use Apptrian, follow these steps:

  • Open Magento Connect Manager and install the extension
  • Go back to the Magento Admin page
  • (Optional) Navigate to System > Tools > Compilation and disable the Magento Compiler
  • Navigate to System > Cache Management > Flush Magento Cache
  • Log out from Magento and log back in
  • (Optional) Enable Magento Compiler by navigating to System > Tools > Compilation > Run Compilation Process
  • Set execute permissions on files
  • Test your images on your newly optimised site.

 

  1. Kraken.io (from £2/month)

Kraken.io

Source: Kraken.io

Kraken is an extension that has price plans to cater to Magento sites of all sizes. Their customers include Tesla, Hallmark and Microsoft, and using the extension is simple.

The Kraken.io extension supports lossless and intelligent lossy optimisation options in custom mode. In Lossless mode, the extension will reduce the file size of the image without compromising quality.

In the intelligent lossy mode, the file size can be significantly reduced with some, highly unnoticeable, quality changes.

You can also opt to keep backups of your original images.

Upon installation, you can sign up for a free account which gives you 50MB of testing allowance before you commit to buying a price plan.

  • Download kraken.io from the Magento Connect Manager
  • In the extension’s menu, click API configuration
  • Enter the API details and secret phrase and click Save Config
  • On advanced options, you can have backups of the original images, select compression mode settings and other features.
  • To optimise images that already appear on the site, navigate to the Kraken.io menu > Image Optimiser > Flush Catalog Images Cache. This only needs to happen once upon initial installation.

In doing so the user is presented once with unoptimised images on a product page. The optimisation process begins in the background, generating a new cache. The next time the user visits that page, they are presented with the optimised images.

All of these extensions can be easily customised to suit your needs and you can install them yourself. They also have other capabilities available that can help you optimise your Magento site in other areas.

Advanced Image Optimisation Using a Command Line

The following methods are a little trickier, as they require a developer or knowledge of the Linux command line coding. These methods should only be used if you use Ubuntu or another Linux-based OS.

As previously mentioned, many of the extensions will have the coding modules pre-installed, thus, these codes will provide the same functionality as the extensions.

Depending on your level of expertise, this can be more cost-effective than buying a module.

Be warned: it can be time-consuming, requires manual input and coding knowledge.coding

Source: Pexels.com

 

For JPEG Images

JPEGs are typically the default file type for photographs, as they are more lossy file types than PNG, and not good for line drawings or graphics containing text.

  • Backup your Magento installation. The app overwrites the images with the newly optimised versions.
  • Open the command line and type in:

sudo apt-get install jpegoptim

or do so using your Ubuntu Software Centre.

  • This command optimises jpg images whilst preserving the quality of the image. To begin the process type “jpegoptim” followed by the location of the image.
  • You can also use the command line to reduce the file down to a specific size. However, doing so may reduce the overall quality of the finished image.

For example, you can reduce a file that is 933kb into 100 kb using this example command:

jpegoptim –size=100k {image name.jpg} -–overwrite

The overwrite will replace the existing optimised image attempt with the new one.

  • For other options on usage or commands, type man jpegoptim.

 

Alternative Method

This method can be used to optimise all images in the specified folder and its sub folders, thus a backup of your files is essential.

  • Backup your Magento installation, or more specifically the “media/catalog/product” path folder.
  • In the command line, type:

find . -type d -exec  sh -c “/usr/bin/jpegoptim –strip-all -t {}/*.jpg” \; | perl -e ‘@a=<>; $a=join(“”, @a); @b = $a =~ /%\s+\((\d+)k\)/g; foreach my $n (@b) {$sum = $sum + $n}; print “Total saved ${sum}k\n”‘

find . -iregex “.*.jpe?g” -exec jpegoptim –max=80 –strip-all –all-progressive {} \;

  • Reset the permissions of the image files once this has been completed.
  • Test your optimised images on your test website to observe if there are any broken images.

 

For PNGs (PNG Crush)

PNGs are used for graphics such as graphs, charts and infographics, or photos that need transparency.

  • In the command line type:

sudo apt-get install pngcrush

  • This app has 114 ways to optimise your images. To allow PNGCrush to automatically optimise your images, type:

pngcrush -brute -e “.compressed.png” image.png

  • The “brute” command is the automatic optimise selection. The “-e” command lets you add “.compressed.png” to the end of the initial file name so that it is easy to differentiate between the original and compressed versions.
  • To optimise all of the images in a folder and replace the original versions with the compressed versions, type:

pngcrush -brute -d “/folder/location” *.png

  • For help or other options type:  man pngcrush or pngcrush –help

There are many other options available to compress your images for your Magento store. Following the steps above can reduce the size of your images, enabling them to load faster on your website.

To test your site speed there are many tools you can use:

Using these tools will allow you to determine what you can do to optimise your website, and as a result, improve your conversions and rankings in the SERPS.

Share It! Tweet it! Publish It!