How to optimize the images of your website or online store

In this article we are going to talk about a very important topic that is a fundamental part of web optimization tasks, the optimization and compression of website images .

More and more people, with little knowledge, decide to learn how to design their website or online store. However, they do not realize that before uploading the images to the website, it is very important to perform an optimization to compress the image, reducing the size and weight without compromising the quality of the image at visual levels.

Why is it important to optimize images before uploading them to the web platform?

An image, like the rest of the elements of the web, occupies a space and is also part of the elements of the web, and therefore influences the loading speed of the site when it is displayed in the browser.

When someone tries to access the web, the browser makes a request to the server and this processes all the elements that the site contains and sends them to the browser to be displayed. It is really not just a request, but it is a request for each element that makes up the web, so the more elements the website has, the more requests have to be made to the server to display the site completely.

As you can imagine, the more requests, the longer it will take for the server to process all the data and the longer it will take for the browser to display all items . S If the image that the server has to process, it is not optimized or compressed and it takes up a lot of space, so the response time of the server increases considerably.

What happens when the images are not optimized?

After the explanation above, the fact that the server takes longer to process non-optimized items, such as images, results in a reduction in performance and loading speed.

This can be seen reflected inpoor scores on web metrics tools like Google Page Speed Insight or GTMetrix

And the most important thing is that if your website gets a bad score for having a slow loading speed and it takes time to display the elements, this will be a very important factor that will negatively influence SEO (Search Engine Optimization) .

The better optimized the website is, the better it will be valued by search engines and it will significantly improve SEO. But it should also be noted that this is not entirely decisive, but there are other things that also influence the positioning: preparation of quality content, good web structure, maintenance of the headers (h1, h2, h3 …) in correct places and with the ideal content, avoid spam practices, etc …

How can I optimize the images?

The process of optimizing images before uploading them to the web server can be done in several ways:

• Manually.
• Image optimization tools
• Through a API (Application Programming Interface)

Manually

This procedure can be done from any image editing program (Paint, Photoshop …). If we choose this method, we can only modify the size of the images and their format (jpg, png, gif, etc …), and only in Some programs like Photoshop can control and modify the image quality a little more to reduce its weight and compress it in certain image formats. However, it is not a very effective procedure and is subject to the ability and skill of each one to achieve better results.

IMPORTANT: You should know that the JPG compression format is a format that occupies less size than the PNG format.

Image optimization tools

There are several free alternatives that you can download from the internet. These are programs that you install on your computer and what they do is process the images by reducing their size, file weight and modifying the pixels of the images.

The engines of these programs are very well designed to do the job of optimizing the images without impairing the quality of the image to the human eye. And what they really do is reduce the quality of the image but it is barely perceptible by the eye unless you try to enlarge the image considerably.

We recommend the program RIOT (Radical Image Optimization Tool) . It is free, free to use and can be installed on any computer with minimal requirements.

Next, we show you an example of an image that we have optimized with this tool. You can see that the quality loss of the optimized image is imperceptible, however Image size reduced from 352.76KB to 49.34KB (a reduction of 86%)

 

 

Image optimization API

About this method there are several alternatives that you can find online. If you are a programmer, you can develop a tool or plugin that uses some of these APIs.

The main characteristic of these image optimization methods is that they are carried out through web platforms, WordPress plugins, Prestashop modules, etc … Therefore, you have to have an internet connection and on many occasions you have to subscribe to services of payment to be able to make use of these utilities.

In this case we recommend the following Image Optimization API:

KRAKEN.IO

It stands out for its subscription plans that are quite cheap and its optimization engine that performs the process obtaining very good results in the optimized images.

Characteristics

• Easy to use.
• Excellent image optimization engine without excessive loss of quality.
• Quite cheap service plans.
• Possibility of optimizing images in a massive way.
• Image optimization is done internally from the application server.
• Automatic subscription renewal.
• Possibility of developing a module or plugin to use its API.

There are other APIs to optimize images like resmush.it , smush.it , optimizilla

How can I optimize the images that I have already uploaded to the website before?

Both in the case of manual method like making use of a web image optimization tool , it would only be possible for the images you want to optimize before uploading them to your web server. However, you may run into the situation that you had already created your website and now you realize that you have not optimized the images.

In that case, don’t worry, then the appropriate method will be to use one of the APIs designed to optimize images through a module or plugin developed for the web platform you are using (WordPress, Prestashop, Magento, etc …). These addons allow you to optimize the images that are already uploaded to the web server, they even show you the optimization data and the total size reduced after the work.

 

In short, the image optimization task is one of the most important in the web optimization process and tasks of improving site performance and SEO. Start right now to optimize the images on your website and you will see the good results that we indicate.