How To Optimize Your Website Images To Rank

Currently, 33% of Google search results show featured images right at the top of the page.

And that's just one of the reasons why you should worry about optimizing your site's images.

Images can affect many aspects of a website, such as loading speed , user experience , mobile experience , accessibility , and Google ranking .

Want to understand more about the power of image optimization?

Check out the post we prepared!

What is image optimization for the web?

The images used on the internet need to have some characteristics to have fast loading and to be understood by search platforms, such as Google, as friendly.

Therefore, optimizing images for the web can have several meanings, such as:

• Compress your size to one that is suitable while maintaining quality;
• Ensure responsiveness (loading and formats also suitable for mobile devices, such as cell phones and tablets);
• Include alternative text to enable the robots of the aforementioned platforms to read the images.

4 Reasons to optimize your website images

It may seem like a simple action — and it really is! — but proper images have many benefits for your site, your brand, and your visitors.

Check out 4 reasons to optimize images on your website:

1. Increases loading speed

According to the HTTP Archive , images represent an average of 21% of the total weight of a page .

So, by reducing this size, we also reduce the time it takes for the page to fully load.

According to Matheus Angeli, web designer at Leadster:

“2 or 3 extra seconds on loading is enough to miss a conversion or degrade your website experience.”
It is useless for your website to have excellent content and visuals if the user cannot see it or if it takes a long time to appear completely.

2. Provides a complete mobile experience

Imagine that the images on your website are designed only for access through a computer.

What happens when a visitor accesses it through a cell phone or tablet?

Or still viewing on a monitor of a different size?

Images may not be displayed correctly.

This messes up the experience, which is different depending on the access source .

Therefore, optimizing the images and making them responsive also guarantees the experience you envisioned when developing the site on all devices.

3. Improves SEO results

Website speed counts for many points in the ranking of pages in organic searches carried out on platforms such as Google.

So, by making your site load faster, you also earn SEO points.

Today, about 33% of Google search results pages show images, without having to enter the “images” tab.

In addition, an image that has alternative text becomes readable by search engines, which can then display it in searches.

Check out some tips from our web designer on this point:

The “alt” attribute was created so that when the system is unable to load an image, text is displayed instead. Today it does not have much practical use in this regard, as systems, servers and internet connection have evolved a lot. So it ends up being used as a channel to tell the Google bot what that image contains.

Matheus Angeli, Web Designer
In addition, the use of alternative text in images contributes to making the internet more accessible to people who are blind, have low vision – or who make use of digital readers.

4. Wake up with Core Web Vitals

Core Web Vitals is a set of metrics and guidance related to user experience.

It is taken into account across all Google tools and platforms and focuses on three parameters:

• Loading;
• Interactivity (interactivity);
• and Visual Stability.

Optimized images meet these criteria.

What is the best image format for the internet?

There are a few factors that impact image optimization.

One of them is the file format chosen and loaded on the pages.

For internet, we should give preference to three file types:

• PGN : Better quality than JPEG, less lossy, with file size that can be larger. Pay attention to this factor when uploading PNG images;
• SVG : XML-based vector image format, it is a format indexed by Google, which improves SEO results. Also, an SVG file is smaller in size than a PNG;
• WEBP : with high color depth, this is an interesting format also because it offers a high compression rate. As a disadvantage the WEBP file may not be supported in all browsers.

How to convert the format of an image

If you have an image in one format and you want to transform it into another one more suitable for the web, know that this is possible!

You can explore tools like Photoshop and Adobe Spark or some sites like Convertio or CloudConvert , to change formats.

How to optimize and make an image lighter without losing quality?

As much as an optimized image is important for the ranking of the site, this adjustment must be done correctly, so that you don't end up with a light image, but with very low quality.

Such a situation can ruin the user experience.

There are a few ways to make the image the ideal size without losing quality.

We present some here:

How to optimize an image in Photoshop?

One of the simplest and most professional ways to optimize the image is to use specific image editing software.

We recommend, if you choose this option, Adobe Photoshop .

To reduce the size for use on websites and blogs, simply open the original image in the program and select the “ Save for Web ” option in the “ File ” menu .

The software will offer some formats and quality options, already ideal for use on the internet.

In addition, you can still preview how the image will look before saving it.

The process is quite simple and Photoshop has many other features that can be explored.

However, it takes a bit of technical knowledge to use other functions and the software is paid for after a 7-day trial period.

Designer Matheus also gave a valuable tip about using this tool:

Photoshop is not the most efficient tool for optimizing images for the web, but one thing I recommend is to take care to create the images already in the correct size they will be used, to avoid loss of quality when upscaling or downscaling.

How to optimize image online?

Another option, for those who do not want to depend on more technical software, is to use online tools designed for this purpose.

Whichever you choose, you'll need to upload the image to the tool's website, choose from the possibilities offered for image format, size and quality, and then wait for the conversion to download the optimized image.

Online image compressors

We have selected some indications, if you choose online image compressors :

• TinyPNG : in the free version, it compresses up to 20 images, in WebP, PNG and JPEG formats, with a maximum size of 5MB;
• I Love Img : with the advantage of selecting images directly from Google Drive or DropBox, you can use this option to compress JPG, PNG, SVG or GIF files;
• Optimizilla : also limited to 20 images at a time, it works with JPEG, GIF and PNG formats.

How to optimize image in WordPress

Last but not least is the option to optimize images using WordPress plugins.

If your site is based on this platform, you can install tools that will automatically compress images to a suitable size, saving you a lot of time and manual work.

Plugins to optimize images

Some of the most suitable WordPress plugins for this case are:

• TinyPNG : the online image compressor that we mentioned in the previous topic also has a version for websites made in WordPress. The plugin automatically optimizes all images uploaded to the site, and even integrates with popular online compression services TinyJPG and TinyPNG.
• Imagify : compresses images without loss of quality and, when installed, adjusts existing images on the site, making it load faster. You can choose between three types of image compression and the plugin is available in free and paid versions. It should be noted that, if uninstalled, it automatically restores the images in the gallery to their original size;
• Smush : also with different versions (paid and free), this plugin can reduce the size of up to 50 images at a time and helps to identify images that are too heavy for the application;
• Optimole : in addition to compressing images for WordPress, this plugin stands out because it accelerates the speed of the site, as it is all in the cloud and because it identifies the visitor's connection speed and adapts the image quality to each context.