You optimize your content for the web? Don’t forget the images! They have a significant impact on your SEO performance!
Your site is getting slower and slower? In 90% of the cases it is the fault of your images because they are not sufficiently optimized!
Well, to be honest, it’s mostly your fault
When it comes to embedding an image on a web page, our first reflex is often to upload it and add it as it is.
It’s the laziness that speaks, we all know!
But it’s a pity, because a too heavy and badly optimized image will impact the performance of your website.
So let’s see in this article the best practices to optimize your images for the web!
Why do we need to optimize images on the web?
Yes it’s true that? What’s the point of optimizing your images, it takes time but what’s the benefit?
Well, the main reason is not to harm the natural referencing (SEO) of your site.
SEO is based on 3 main pillars:
The content
The technique
The authority
It is the technical pillar that interests us primarily here.
To summarize, a technically optimized site for SEO is fast, secure and adapted to mobile navigation.
With a fast site, you will satisfy Google’s technical criteria regarding SEO, but you will also improve the UX (user experience).
Because yes, a site that is too slow to load is the best way to lose visitors before they have even read any content on your page!
And UX is not just a funny acronym, it’s a criterion that Google takes more and more into consideration in SEO.
Just look at the trend that the algorithm is taking with the addition of the Core Web Vitals in particular.
And if you still don’t believe me, do the test!
Go to Google Page Speed Insight and copy and paste the url of one of your web pages.
You will get a performance score out of 100 and the reasons why the score is more or less good.
I bet that the main problem of your page is the weight of the images!
To a lesser extent, you can also optimize your images for SEO with the “image alt” tag. But we will come back to this in one of the parts of this article.
The 3 steps to compress an image for the web
Do I lose quality by compressing my image?
First, let’s agree on the terms used. Compressing an image means reducing its weight so that it is as light as possible.
For example, an image that “weighs” 2MB will be reduced to 50KB.
And the answer is no. By compressing using the method described here, you will not lose image quality.
In fact, it is possible to reduce the weight of an image by up to 90% without the difference being noticeable to the naked eye!
#1 – Resize your image to the maximum display size
The very first step is to resize your image to the maximum size it will be displayed on your site.
Let’s take the example of a team photo that you want to include on your company’s presentation page.
You have used your new 400 billion pixel DSLR, and the photo is of very good quality. It is 12000px wide and weighs 25Mb.
If you know that at most it will fit at 600px wide, then resize it to that size. Not one pixel more, it will be useless.
With this step alone, you should be down to an image that is less than 1MB!
It is very important to go through this step first.
Because resizing mathematically decreases the weight of an image exponentially.
For this, you can use recognized tools like Photoshop, or online solutions like Pixlr.
The next step, compression, will be even more effective if the base image is already reduced in size!
#2 – Compress your image using the right tools
The second step is to compress your image.
There are dozens of free online tools to do this efficiently in 2 clicks. For example, you can use :
TinyPNG
Compressor.io
Imagify
…
Nothing complex here. You just have to drag and drop the image to compress and the tool will compress it in a few seconds.
Some of them even offer the possibility to send several images in the queue to save even more time.
This compression step can reduce between 60% and 90% of the weight of the original image.
But that’s not all, you can go even further!
#3 – Use a plugin on your CMS
Are you using a CMS like WordPress, Joomla, Shopify, Prestashop, etc?
There are plugins that will automatically compress all the images you upload on your website.
On WordPress, there is for example WP Smush, ReSmush.it, or TinyPNG.
Take a look at the extension library of your CMS and install one you trust.
Most of them have a very handy feature that also allows you to compress images that have already been uploaded to your site without having to re-upload everything by hand.
By working this way, you will get a second compression pass.
It’s also a good way to make sure that no heavy images are uploaded by accident if you have several people embedding content on the site.
BONUS: If you use graphic design tools to create your images
Are you using tools to create your own visuals?
Here again, a few good practices are necessary.
First, as we have seen, remember to create a document with the maximum display dimensions. All tools allow you to do this, and in the worst case, you can resize in a few clicks.
Then, remember to take a good look at the different saving options offered by your tool.
On Photoshop for example, there is a save option dedicated to images used on the web. Simply select “export for web”.
These default settings offer a qualitative rendering of the images for a minimal weight.
And of course, nothing prevents you from going through the 3 steps seen above.
If, like us, you are not a graphic design professional and you use online tools like Canva, be careful!
Even if the tool is dedicated to web content, the images created are not always properly optimized. It is therefore necessary to resize it (this can be done directly on the tool), then go through the compression step.
Which formats should be used for images on the web?
JPEG vs PNG: which is better?
On the web, the most commonly used file formats are JPEG and PNG.
JPEG is an already compressed image format adapted to images broadcast on the web. PNG is much less compressed because it also manages transparency.
Use JPEG by default and reserve PNG for needs that require the use of transparency.
The SVG format: for your simple visuals
You may also know the SVG format. It is dedicated to simple images (icons, pictos, logos…) and has the big advantage of being a vector format.
That is to say that it manages perfectly the automatic resizing following the passage on different screen sizes. Basically, the image is displayed in a clear manner regardless of its size.
If you have the ability to produce these types of visuals in SVG format, do so. They are designed specifically for the web and offer optimal performance.
The WebP format: the new kid on the block
The WebP format is the format recommended by Google himself!
First of all because it was created by Google, but especially because it is much lighter than standard image formats such as PNG and JPEG.
Find out if the CMS you use supports it. Many extensions can help you!
Can we use GIFs on a website?
The GIF format is very often not recommended on web pages. Why not? Because the files are generally heavy and not very optimized.
In reality, you can use them as long as you treat them like any other visual. That is to say, you will have to resize and compress them.
So down with the received ideas, you can integrate GIFs to a page of your website (with parsimony all the same) if you have optimized them before!
How to optimize image tags for SEO?
It is possible to improve your natural referencing thanks to images.
To begin with, you should know that it is possible to reference your images in Google Images. This can be of interest depending on your activity.
Prospects who come across your image and click on it, can become visitors to your site that you will try to convert into leads.
Then, when you upload images to your site, you have the possibility to fill in tags. When properly filled in, they can bring a significant gain to the natural referencing of your page.
The 2 important tags to fill in here are the alternative text tag (or alt image tag) and the image title tag.
How to optimize the image title tag?
Even though the weight of the image title tag seems quite low in SEO, use this opportunity to incorporate your main keyword into the file name.
To be more effective, I recommend naming it after the search intent you want to address with the page it is displayed on.
Avoid using underscores and prefer the single dash, which is better taken into account by search engines.
How to optimize the alt tag of an image for SEO?
The alt tag, also called alt text, is the description you will give of an image in cases where the display does not go as expected.
It is used to replace the image in case of display problem. And it is also the text that will be read by reading aids for visually impaired people for example.
It is therefore very important for the accessibility of content on the web!
But it is also very useful in SEO.
Indeed, Google still has difficulty in deciphering an image alone, especially when it is complex.
The alt tag will therefore help it to understand what the image represents and thus contribute to improving the understanding of your page overall.
There are 3 good practices to keep in mind to optimize the alt tag of your images:
#1 – Stay concise
It is recommended to stay under 125 characters and to go to the point. Here, think of accessibility before SEO!
#2 – Be relevant
Don’t try to fool Google by placing too many keywords, you will pay dearly! So fill in this tag with contextualized content in relation to what you say in the paragraphs surrounding your image.
#3 – Be precise
The alt tag of images must be descriptive. You will have to be as precise as possible to make Google understand what the image is really about.