Optimize images for the web

Why optimize images for web Is it such a relevant and practically essential task that you have to do?

No matter the type of website you have, it is a fact that every time we use and upload more images to our websites, it is an unstoppable upward trend.

At the same time, for a few years the importance that Google gives to the WPO of a website to position it has been greater.

You may also be interested in: WPO optimization guide

In this optimization of the loading times of a website, the elements that tend to have the most weight and influence loading times are usually the images.

Thus, this is one of the main factors why the image optimization is key.

Throughout this post we are going to see how we can correctly optimize each and every one of the images you have on your website.

When is an image considered optimized?

An optimized image is one that both its weight and its size are necessary and correct to be displayed on various screen sizes of different devices.

Or what is the same, an optimized image must be displayed correctly on any type of device.

The way to optimize images is based on two key tasks to perform:

  • Reduction in size: adjust its size to the maximum to be displayed on the screen
  • Reduced your weight: compress the file without a noticeable loss of quality in its display

We have to bear in mind that the formats of the file itself also affect the weight.

The most common on the web are the following:

On the other hand we have to bear in mind that this process is totally relative depending on the use that we are going to make of the images and where they are shown.

For example, the use of an image that we are going to use in the main header slider of a full-width website is not the same as that of the internal image of a post like this one that you are reading right now.

Obviously, the slider image must have a larger size so that it is displayed correctly and therefore it will also be inevitable that it weighs more.

If the image of that slider has the maximum width at which it is going to be displayed, it has an appropriate format, and its weight has been compressed as much as possible, we will have it optimized.

On the other hand, an image like the one in the post if we do not reduce it in size to the width of the blog in which it is displayed, and this is larger, even if we compress it and the final weight is much lower than the image of the slider, that image it will not be optimized.

Therefore, it is not a question of obtaining the least possible weight in any case.

What methods can we use to optimize the images?

We can distinguish two ways of carrying out the entire optimization process.

Manual method

It is the one that we carry out and that we apply on this website, it will also be the one that we will explain extensively throughout this post.

It is a completely manual process whose optimization tasks we carry out form prior to uploading the images to our website.

Therefore, once we upload the images to our website, they are already perfectly optimized and ready to be displayed.

This method has an important advantage that we want to highlight:

  • It allows us to have a total control especially the image optimization process

By cons, the main disadvantage it has:

  • Is heavier and requires certain routines

Server automation method

It is the process by which we optimize the images once they are uploaded to the server where our website is hosted.

Its optimization can be done in WordPress automatically through plugins that are responsible for modifying the size, compressing the weight or even changing the formats of the images themselves, even creating copies.

The main advantage of this method:

  • We don’t need to do practically anything, except for an initial configuration for the whole process.

And the main disadvantage:

  • We are using resources from the server itself that your website also requires for other processes

Optimize images manually

Next we are going to explain the steps that we usually carry out to carry out a manual optimization before uploading the images to the web server.

1- Reduce the size of the images

This is the first step of all, but first we need to know the maximum size at which our images are going to be displayed.

In general, it will be enough for us to know the maximum width to set the final size to fit each image.

To know this maximum width we can use the “inspect” functionality (it is called like that in Chrome) but you also have it available in other browsers.

Simply go to that section of your website where your image will go and activate this functionality of your browser.

Inspector Google Chrome

This way you can know the exact size in pixels of your images when they are displayed.

Once we have these measurements we can use the tool that we are most interested in using, such as Photoshop, Gimp, Paint, Canva or some free online tool like this one that we show you below.

This is Picresize and reduces the size of our images individually or in batches.

Among the advantages of this tool are that we can modify both the width and the height with the exact measurements for that place but also that we can choose change the format original for another more appropriate and weighing less.

optimize images with picresize

In which cases to change the format?

In most cases it is advisable to change from PNG to Jpg due to the lower weight and compression that this other format supports.

Of course, it converts to Jpg as long as your image does not have a transparent background or graphics that require a higher quality of display.

Using this tool is very simple:

  1. Access and select one or more images that you can simply drag or select from your computer
  2. Upload that image or images to the tool
  3. Select final size and format settings
  4. Select “save to disk”

2- Compress the weight of the images

Once we have the images reduced to the ideal size, now it is necessary to compress those images so that they weigh less, but without losing quality in an apparent way.

It is important that you follow these steps and do not compress before adjusting the size.

To compress the weight again you can use the same offline tools that we indicated before to modify its size or you can also use the same online tool that we use: Tinypng.

Tiny png optimize images online

With Tinypng you can compress the weight of images in PNG or Jpg format indistinctly individually or in batch (up to 20 files at a time) and obtain weight reductions of a large percentage and without losing quality in any case perceptible in our images.

We challenge you to take the test and analyze the photo once compressed!

Its operation is very simple:

  1. We drag or select the image / images
  2. We click download individually or in batch to download a .zip with all images

And with this we would already have our images ready to upload them optimized to our website!

Optimizing images automatically

Well, so far we have told you the procedure that we usually carry out and which is the one that we recommend but we are also going to indicate other automatic modes of optimize once images are uploaded to server.

For what cases or situations can it be useful and necessary?

  • When the management of that website is shared or the uploading of images to other people is allowed. It can be the case of a forum.
  • When previously uploaded images already exist and need to be optimized

As we said at the beginning of this post, in WordPress there are plugins that make it very easy for us.

These are our recommendations.

Litespeed Cache

Plugin LiteSpeed Cache

This is one of our favorite plugins, one that we also recommend in this post.

Among the many great features it brings, it also offers the compression of images without losing quality.

You should also know that to take advantage of the full potential of this plugin, your hosting must have this technology available from the server itself.

Of course at Host-Fusion we include it in all plans for our clients.

You can learn more about the full potential of this plugin here.

Imagify

optimize images with imagify plugin

Imagify is a great plugin that automatically compresses all the images you upload to your website in batch, and you can also choose the compression you want to apply in advance.

In addition, another functionality that we like a lot and that incorporates is the conversion of images to WebP format, of much less weight, with greater compression and similar quality.

Tinypng

tiny png WordPress plugin to optimize images

Yes, we have talked to you about Tinypng before, but in addition to being an online tool, they also have a plugin for WordPress (even for Photoshop) that compresses images just as well, so we couldn’t stop recommending it.

As simple as installing and starting to optimize the images that you upload automatically on your website!

Conclusions.

Throughout this post we have told you about the available methods to carry out a correct optimization but we want you to really stay with the most important thing that we want to convey to you:

The important thing is not the tools you use but that you understand the importance of having optimized images on your website

Again, if you are concerned about loading times and the SEO of your website, you cannot do without optimizing your images.

If you have not already done so, get on with it, we hope that this small guide that we have prepared to optimize images for the web will help you!