Wednesday 8 november 2023

The positive role of images on a site is indisputable, particularly on an e-commerce site. However, it is not enough to “stupidly” add images to your site. There are good practices to follow so that your images are not only attractive but also useful for your SEO.

Images on a website

There are several advantages to using images on a website:

• They illustrate the site and therefore make it more pleasant to visit, more attractive
• They make the texts more digestible, simpler to read.
• If the content is more attractive and more digestible, Internet users will spend more time on a page which sends a positive signal to Google
• In addition, images play a role in your natural referencing via the name of the files and the alternative text

On an e-commerce site, they are obviously essential to present the products nicely and effectively.

Optimize your images for SEO (SEO = Search Engine Optimization)

Name your images

You've probably already noticed: when you do a search on Google, you often get results in images!

And yes, the images are also referenced and offer a gateway to your site!

For your images to have a chance of appearing in these searches, they will need to be well named. We therefore definitely forget the images called:

• IMG6785.webp
• Screenshot 2023-09-29 at 09.56.51.png

Best practices for naming your images

• Name your images BEFORE uploading them to your site
• Write names in lowercase
• You can use letters and numbers
• Do not use accents, spaces, punctuation and other special characters
• Separate words from “middle-hyphens” (not with “under-hyphens”)
• Choose a descriptive name using as few words as possible
• If it is possible and relevant, think about your keywords
• If it is relevant, add it name of your brand / store in the image name

What should we do if we have images with the same name?

The answer is: make a little effort! There is necessarily a difference between 2 images that you want to upload to your site, otherwise you will have to explain to us why you want to put 2 identical images.

Play on the difference in color, point of view (seen from above, in profile, from the front), comfort, material, or any other point of differentiation that will allow you to find 2 different names.

Example for a pair of sneakers:

• brand-model-color
• brand-model-color-view-profile

Add alt text

Alt text allows you to accurately describe an image using richer text than just the image name. This text does not appear on the site (but it is present in its code in the alt attribute).

Why is this important?

• Voice assistants can read this text which is very important for people who use this type of assistant, especially blind or visually impaired people.
• And if the voice assistants can read them… Google too! Your alternative text allows Google to understand your image in context.
• But be careful, don't tell it just anything. Google is perfectly capable of understanding that you are lying to it if your description does not match the image. And in this case he will penalize you.

How to write alt text:

Accurately describe your image in context. And if you can, use a key word or phrase.

Unlike the name of your image, for alt text you will write normally with capital letters, spaces, etc.

Optimize the weight of your images

This is about not being penalized by Google. If you had 2 identical sites, one of which had lighter images, it is the latter that would be favored by Google.

Indeed, as Internet users tend to quickly leave a page that loads too slowly, Google tends to penalize sites that are too slow. Loading speed is an important factor for SEO.

However, current images are increasingly larger in size (pixels) and increasingly heavy in weight (MB). And a heavy image uses a lot of bandwidth and this impacts the loading speed of your pages and your site.

Images, due to their weight, are therefore a real obstacle to rapid loading. But we definitely agree: we can't do without it, especially on an e-commerce site. We will therefore have to optimize them!

Optimize weight or dimensions?

It is essentially the weight of our images that we will seek to optimize by compressing them and deleting information from their file that is not necessary.

But rest assured, there are tools for this. They allow you to reduce the weight of your images as much as possible while maintaining excellent image quality.
Example: Photoshop, Tinypng or Compress Image

Note: If your site allows it, promote the optimization of your images directly on your site by installing an extension for this. On WordPress for example, you can use extensions like imagify or tinypng which will allow you to optimize the images you load but also those which are already on your site.

And the dimensions?

This is less important but obviously there is no point in uploading an image of 4000 pixels per side if it will only be displayed on a mobile phone or as a mini photo on your site.

So think about the size of your images based on the use that will be made of them on your site. A full-width banner image should be larger than a small mobile photo.

Go further with the WebP format

As we have seen, the “lighter” an image is, the less resources it consumes to be loaded on your site, the faster it will be loaded, the better it will be for your SEO!

If you have the choice, prefer the jpg format to the png (unless you need transparency).

In addition to the jpg and png formats, there is a more recent format: the WebP format which allows you to further improve the optimization of your images. We are talking about 30% still being eaten up on jpg and png files.

The same image in WebP format will therefore be lighter than its equivalent in jpg or png format. And this, even if you have already optimized them by compressing them! However, some people find that there is more loss of quality with the latter format. It's up to you to try and judge.

Some additional advice:

• Choose good hosting so as not to penalize your loading speed. It is better to pay a little more each year to avoid seeing potential customers flee to the competition because our site is too slow.
• To make your site unique, favor your own images rather than those of data banks. If you can afford it, hire a photographer or do them yourself.
• And if they are not your images, always make sure you have the right to publish them on your site (either by purchasing them , either by asking permission from the owner, or by using royalty-free images).

Good luck !

Return