How to optimize your e-commerce images to have a website as fast as the wind

Did you know that one of the aspects that users value the most in an online shop is its loading speed? for this, optimize your images!
There is nothing more frustrating than clicking and having to wait far too long for the website to load. In fact, if it takes more than one second, the normal thing that happens is that the clients go to the competitors.
How can we improve our speed in an easy way?
By starting to optimize all of our e-commerce images
Pictures are one of the “heaviest” files and the most difficult ones for the server to work with. That is why, the lighter they are, the better for the speed, the clients, and the sales.
Get ready because today we are going to bust out our “virtual scissors” on all of your pictures so that your e-commerce can load at lightning speed.
3, 2, 1… let’s go!

Why is it important to optimize your online shop’s images?

In this post, we already talked about the importance of taking quality pictures of your products. Don’t forget that many times these are the pictures that make a person decide whether or not to buy.
But there’s a problem here.
Uploading lots of quality pictures means flooding our server and making it load much slower. That is why optimizing each and every picture we upload is so important.
Let’s take a look at the advantages one by one:

• Loading speed: the time it takes your e-commerce to load has a huge impact on the user’s experience, and therefore on sales — so much so that Amazon states that for every tenth of second that they improve their speed, their income increases by 1%.
• Web positioning: if you are worried about your e-commerce SEO (and you should be), you should optimize your images since, as we have seen before, they have a direct impact on loading speed (one of the criteria that Google’s algorithm takes into account).
• Optimizing your resources: lighter pictures mean less space used in your hosting.
• More conversion: a happy client buys more. Obvious, right? (Remember that 1% in Amazon).

As you can see, the advantages of optimizing for your images are plentiful. So now we just need to know how to do it.

How to optimize an image with Photoshop before uploading it to your online shop

The first step to optimize an image is to adjust it to its ideal size. Don’t worry, this is very easy.

1. Dimensions

The first thing that we have to do is find out the exact sizes of your template. Once you are in WooCommerce, go to “Settings/Products/Show”.
There you’ll see the default sizes of the pictures. If the product images are 600×600 pixels, uploading a bigger image will only mean using unnecessary space and slowing down the website.

2. What’s the “ideal weight”

The goal is to find balance between a quality picture and reasonable size. The ideal size would be less than 70 kB, but if it’s not possible, less than 100 kB will do.

3. The right format

Use .PNG for images with transparency or screenshots and .JPG for everything else.

4. Cropping and adjusting the size with Photoshop

In order to explain the process in an easier way, here you have a video where you can see how to use the basic adjustments in Photoshop. For example, changing the image’s size (not the canvas one) and the useful “save for website”.

As an alternative to Photoshop you can use the online tool called Pixlr (a simpler version of Photoshop). Another option is Gimp, an open-source software for photo editing.
And if you work with a Mac. then ImageOptim is your tool, a native MacOS app in case you don’t want to deal with a photo editor at all.

 5. Resizing images directly on WordPress

If you uploaded an image that is too big, you can change its dimensions directly within WordPress.
In “Multimedia/Library”, click the image and then edit. Here you can make it bigger or smaller in relation to the aspect you want to give it (we recommend the square format).
It is easy and fast, but it has a disadvantage; what WordPress does is create a new image with the new dimensions. Thus, you will have both the original heavy image and the lighter copy.
If you don’t delete the former, the loading speed won’t improve.

How to optimize images even more without losing quality

There are many websites to reduce picture size without affecting their quality. Here you have some:

1. Webresizer

Not only does it allow you to resize your pictures online, it also lets you apply some basic editing in terms of light, color, etc.
While keeping the same dimensions, they claim to reduce the file size by 68%.

2. TinyPNG

This is one of the most well-known and free pieces of software for compressing images. It allows you to optimize several images at once, up to 20 images of up to 5 mB each.
It works by deleting the necessary colors so the human eye can’t catch the changes. If you have to work with many images at the same time, this is your tool.

3. Compressor.io

Even though it doesn’t allow you to optimize in mass, its limit is 10 mB per image. Another useful feature is that it allows you to save the optimized file directly to Google Drive.
These online tools are very useful and fast, but if you have some basic knowledge about image editing and retouching, you can get a better result by doing it manually.

Plugins to optimize images on WordPress and improve loading speed

These are the plugins that we like the most for optimizing images on e-commerce sites and to improve their speed.

1. WPSmush

A 100% free of charge plugin to compress and resize all the images on your website.
It is easy to use and it allows you to work on all the WordPress images, themes, or plugins.

2. EWWW Image Optimizer

Another free plugin, this one allows you to optimize all of the pictures at the same time and to optimize, it distinguishes between formats: JPG or PNG.

3. Lazy Load

The lazy load is about images that don’t load until they are shown on the screen.
Imagine that you have a website or a blog post that includes a very heavy picture. When using this plugin, it will only load when users get to that screen (so the rest of website will load faster).

4. Imsanity

The main difference with other plugins is that this one specializes in mass optimization.

5. Caching plugins

Two of the most well-known free plugins are:

• W3 Total Cache.
• WP Super Cache.

Though it includes a fee, another option and perhaps the most recommended is WP Rocket.

Plugins to optimize images on Prestashop

One of Prestashop’s advantages is that it allows cache activation directly. From “Advanced Settings/Performance”, you will have access to the Smarty settings in order to compress, compile, and search without using extra modules.
In addition to this, with the following plugins you will gain extra speed:

1. Resmush

It works with images of up to 5 mB in JPG, PNG, and GIF formats, and after just a couple clicks you will have all of your images optimized.
If you like this tool, but you use WordPress, there is also a similar plugin for this CMS.

2. PrestaSpeed

If you want to invest in a more comprehensive package, you can buy PrestaSpeed for less than €50.
Besides optimization of images, it will speed up the loading time by cleaning the database and deleting information that is not useful anymore. For example, old orders or abandoned carts.
In addition, with this modules (after optimizing), you could have access to the original image or include an infinite scroll to show just the necessary parts.

How to optimize images for SEO in WordPress

When we talk about optimizing images, we can also apply it to SEO. You can modify them so that they also help your positioning.

1. Describe your photos in their filename: a file named IMG_1234 doesn’t give Google any information about the content.
2. Use the “alt” label: this label can be found among the image options and it is shown as “alternative text”. Don’t always use the same keyword, bear in mind that these texts help those people who use reading assistants.

Just by applying these two tips, your product (or category) cards will climb to better positions with search engines.

Do you want to know whether your e-commerce images are properly optimized?

To answer to this question we will use a free of charge tool that Google itself offers; PageSpeed.
You just need to enter your url and you will get a speed grade regarding your website.
But we are not stopping just there. If you have a deeper look, you will see that there is a section called “Possible optimizations”. If you can see “Optimize images” below this section, it means that you have work to do. 😉

Another tool that may be useful is the Pingdom Speed Test.
Once you apply all the tips that we gave you today, measure your loading speed and compare it to the one you had before.

Start optimizing your e-commerce images!

In this post you have everything you need to start reducing and optimizing your images so your online shop loads as quickly as possible.
Now you just need to start working on it.
Are you feeling lazy?
Surely that income increase of 1% for every tenth of second that Amazon earns will get you motivated.
To the images!