How to edit product photos and optimize for online store?

How to edit product photos and optimize the images of your e-commerce to have a website faster than the wind?

Did you know that one of the aspects that users value the most in an online store is the loading speed? To do this, optimize your images!

There is nothing more exasperating than clicking on a site and seeing that it takes forever to load. In fact, if more than a second passes, the most normal thing is that the client goes to the competition.

Why it is important to edit product photos and optimize the images of your online store?

In this post, we already talked about the importance of taking quality photos of your products. And do not forget that many times it is these images that make a person buy or not. But here a problem arises.

Uploading many quality photos to our website means saturating our server and making it load slower. Hence the importance of optimizing all the photos that we upload to our store.

But let's look at all the benefits one by one:

Loading speed: the speed with which your e-commerce loads have a brutal impact on the user experience, and therefore, on sales. See if it influences that Amazon claims that for every tenth of a second that its web speed improves, its revenue increases 1%.

Web positioning: if you are concerned about the SEO of your e-commerce (and you should), you should optimize the images because, as we saw before, they directly affect the loading speed (one of the criteria that the Google algorithm values).

Resource consumption optimization: lighter images mean less space you occupy on your hosting.

More conversion: a satisfied user buys more, obvious, right? (remember that 1% from Amazon).

As you can see, the benefits of taking care of your images are many. Now we just need to see how we do it.

How to edit product photos and optimize an image in Photoshop before uploading it to your online store

The first step in optimizing an image is to adjust it to its ideal size. Don't worry, the process is very simple.

1. Measurements

The first thing we have to do is know the exact measurements that they have in your template. Within WooCommerce, go to "Settings / Products / Show".

There you will see the default measurements of the images. If the product image is 600 × 600 pixels, uploading a larger image will only take up unnecessary space and slow down the web.

2. What is the "ideal weight"

The goal is to find a balance between a quality photo and a reasonable weight. Less than 70 KB is ideal; but if it is not possible, having no more than 100 KB is enough.

3. The correct format

For images with transparencies or screenshots use the PNG format; for all other JPGs.

4. Cropping and resizing in Photoshop

To explain the process more easily, we leave you a video where you will see how to make the basic adjustments in Photoshop. For example, image resizing (not canvas) and the "save for web" utility.

As an alternative to Photoshop, you can use the online tool Pixar (it is a reduced version of Photoshop). Another option is Gimp, an open-source photo editing program.

And if you're from Mac ... your tool is Image Optima, a native macOS application in case you don't want to fight with a photo editor.

5. Resize images in WordPress directly

If you have uploaded an image that is too large, you can resize it in WordPress.

In "Multimedia / Library", click on the image and give an edit. Here you can scale or crop with the aspect ratio you want (we recommend square).

It's quick and easy, but it has a downside; what WordPress does is create a new image with the dimensions you have told it. That implies that you will have the heavy image and a lighter copy.

If you don't delete the first one, the loading speed won't improve.

How to further optimize images without losing quality

There are many pages to reduce the size of photos without losing quality. We leave you several:

1. Webresizer

It not only allows you to resize images online but to perform some basic color, light, etc.

Within the same measures, they boast of reducing weight by 68%.

2. TinyPNG

One of the most popular free image compression programs. It allows optimizing several images at the same time, 20 in a total of up to 5 Mb each.

It works by minimizing the number of colors needed to make the change imperceptible to the human eye. If you have to work with many images at the same time, this is your tool.

3. Compressor.io

Although it does not allow mass optimization, its limit is 10 MB per photo. Another very useful function 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 a minimum knowledge of photo editing and retouching, the result of doing it manually is more complete.

Plugins to optimize images in WordPress and improve loading speed

These are the plugins that we like the most to optimize images in an e-commerce and others to improve speed.

1. WPSmush

100% free plugin to compress and resize all the images on your website.

It is easy to use and allows you to work on all WordPress images, as well as any theme or plugin.

2. EWWW Image Optimizer

Another free plugin. It allows optimizing all the images at the same time and distinguishes between optimization by formats: JPG or PNG.

3. Lazy Load

The lazy load or lazy load is that the images are not loaded until they appear on the screen.

Imagine that you have a page or a post with a very heavy photo at the end. With this plugin, it will only load if the user gets there (so the page will load faster).

4. Imsanity

The main difference between the plugin with the previous one is that it is specialized in mass optimization.

Plugins to optimize images in Prestashop

One of the advantages that Prestashop has is that it allows you to activate the cache directly. From «Advanced parameters / Performance» you will have access to the Smarty configuration to compress, compile and cache without the need for extra modules.

In addition to this, with these plugins, you will gain extra speed:

1. Resmush

It allows images of up to 5 Mb in JPG, PNG, and GIF, and in a couple of clicks you will have all the images of your store optimized.

If you like this tool but you use WordPress, there is also a plugin for this CMS.

2. PrestaSpeed

If you want to invest in a slightly more complete tool, for less than € 50 you have PrestaSpeed.

In addition to image optimization, it lightens the loading speed by cleaning the database of information that is no longer useful. For example, old orders or abandoned carts.

Also, with this module (after optimizing), you can access the previous image or include an infinite scroll to show only what is necessary.

How to optimize images in WordPress for SEO

When we talk about optimizing images, it can also be given an SEO approach. And you can modify the photographs so that they also give you a boost in web positioning.

Name your photos by describing them: a file called IMG_1234 does not give Google any clue of the content of the image.

Use the "alt" tag: this tag is found in the image options and appears as "alternative text." Do not put the same keyword all the time, keep in mind that these texts help people who use reading assistants.

Only with these 2 actions, you will get your product (or category) files to gain positions in the search engine.

Do you want to know if the images of your e-commerce are sufficiently optimized?

To get out of doubt we will use a free tool that Google itself offers, Page Speed.

You just have to enter the URL and you will get a note of the speed of the web.

But we are not going to stay there. If you look a little more, there is a section on "Possible optimizations". If "Optimize images" appears there, you have work ahead of you.

Another tool that can be very useful is the Pingdom Speed Test.

Once the advice in this article has been applied, measure the loading speed and compare it with the one obtained before the optimizations.

Get ready to optimize the images of your online store!

In this article, you have everything you need to start reducing and optimizing your images so that your online store loads in the shortest possible time.

So now you just have to get down to work.

Are you lazy?

Surely remembering that 1% more income for every tenth of a second saved that Amazon earns, motivates you to get involved.

Go for those images!

Monday, May 3, 2021