Comment optimiser les images pour le web : gain de performance et meilleur SEO

Poster le: 18 mars 2021

L’utilisation des images sur un site internet est primordiale. Ces dernières permettent de donner vie à votre site, de présenter votre travail, vos créations, d’illustrer vos textes, etc. Il est donc nécessaire d’optimiser les images de son site. En règle générale, un site ne contient pas une seule, mais des dizaines voire des centaines d’images ce qui augmente considérablement le poids des sites internet. Dans cet article, je vais vous expliquer pourquoi il est important d’optimiser vos images avant de les intégrer à votre site. Dans un second temps, je vous expliquerai le processus d’optimisation.

Pourquoi optimiser les images est important

Améliorer la vitesse de chargement de votre site 

La vitesse de chargement d’un site internet est cruciale. De nombreuses études montrent que si votre site internet est trop lent à s’afficher, les utilisateurs quittent votre site. On considère qu’au délai de 3 secondes pour afficher votre page, vous avez perdu la moitié des internautes. Oui, vous avez bien lu, 3 secondes, c’est peu et pourtant chaque jour, je constate que de nombreux sites mettent plus de 9 secondes à s’afficher sur mon navigateur. 

“Ok Jonathan, c’est jolie tout ça, mais il est ou le rapport avec mes images”

– Lecteur/lectrice – 

Et bien dans au moins la moitié des cas, les sites sont lents, car le poids des images à charger est trop important. Lorsque vous allez sur un site internet, celui-ci tente de charger sur votre ordinateur ou smartphone, tous les éléments présents sur la page demande, alors si vous avez 50 images à afficher cela peut mettre à mal votre connexion internet et retarder l’affichage de la page désirée.

Pour illustrer mes propos, imaginez que vous avez 50 images sur votre page d’accueil, celle-ci, on été prise avec votre bel IPhone (Samsung, Huawei, etc. Pas de jaloux comme ça ^^), si vous n’avez pas touché au réglage de votre appareil, chaque photo doit peser entre 3 et 4 Mo chacune. 

Ce qui fait 50 *3 = 150 Mo à afficher en moi de 3 secondes. Une musique mp3 pèse en moyenne 5-10 Mo, vous mettez combien de temps à la télécharger ? 1 à 2 minutes avec une connexion ADSL.

Vous comprenez maintenant l’importance d’optimiser ces images.

Améliorer le référencement naturel (SEO)

En optimisant vos images, vous améliorez la vitesse de votre site internet, mais également son SEO. Si vous vous demandez encore ce qu’est le SEO, c’est le référencement naturel de votre site internet dans les moteurs de recherche.

Donc pour revenir à nos moutons 🐏🐑🐏 , optimiser vos images va permettre à votre site d’être plus rapide à s’afficher sur les différents supports (ordinateur, tablette, smartphone), cela va vous permettre de booster également votre référencement. L’algorithme de Google, pour ne citer que lui, est particulièrement attentif à la vitesse de chargement de vos pages, il recommande d’ailleurs une vitesse de 2 s, une cohérence des images avec le sujet de votre page (une image de dauphin sur un site de kebab n’est pas a son goût a priori ^^) et que la balise Alt (nous y reviendrons plus bas.) soit correctement remplis pour chaque images dans les bonnes pratiques.

Si vous respectez tous ces critères, alors vous obtiendrez de meilleures chances de remonter dans les meilleurs résultats de recherche.

Comment Optimiser, ses images

Les caractéristiques techniques (poids, dimensions, format, etc.)

Après avoir vu pourquoi optimiser ses images, nous allons voir maintenant comment les optimiser.

Le choix de la taille de votre image influe directement sur son poids final. Les images que vous allez mettre sur votre site internet n’ont pas pour but d’être imprimé au format A3 (sauf cas exceptionnel), et bien souvent, elles seront affichées sur mobile (vous savez le petit boîtier rectangulaire qui vous sert à passer des appels.) qui pour les plus grands font la taille d’une carte postale. Il est de ce fait inutile de les importer dans leur format d’origine. Nos smartphones créent des fichiers avec une dimension trop importante. Il est donc nécessaire de les redimensionner depuis votre ordinateur ou depuis un service en ligne.

Prenons l’exemple de cette belle photo prise sur un célèbre site internet, sa dimension standard est de 6016 x 4000 pixels pour un poids de 1.62 Mo. Sur mon blog, j’affiche rarement des images d’une taille supérieure à 1000 pixels de large. 

image test original

Voici la même image mais redimensionner en 1200 x 798 pixels le poids a chuté à 203 Ko (1000 Ko = 1 Mo).

image test 1200

Nous avons ici diminué son poids presque par 10, c’est énorme, et voyez-vous une différence ? 

Non, car nous n’avons fait que redimensionner l’image, ici elle n’a pas été compressée.

Afin de gagner encore quelques Octets (nous avons les grammes, les images ont les octets.), nous allons compresser cette image. 

Je vous conseil le très bon compressor.io

image test 1200 compress

Abracadabra 🧙 …. 53 Ko !!!

C’est meilleur qu’un régime Weight Watcher. 

Nous sommes passés de 1.62 Mo, soit 1620 Ko à seulement 53 Ko, je vous laisse faire le calcul du pourcentage de perte, c’est trop pour moi la 🤪.

Maintenant, que nous avons vu quel gain exceptionnel, nous pouvions obtenir, je vous rappelle mon exemple du début d’article.

50 images de 3 Mo en moyen = 150 Mo à charger en moins de 3 secondes.

Si nous gardons la même ration que pour l’image du dessus à savoir un poids 30 fois inférieur à la taille d’origine. Nous passons de 150 à 5 Mo ce qu’il me semble quand même plus facile à afficher dans le délai imparti ^^.

Le format de l’image est également important, je vous conseille d’utiliser le JPEG pour les photos, ce dernier permet une meilleure compression sans perte de qualité.

Le PNG sera réservé aux illustrations, dessins, images sans fond, etc.

L’emploi de fichier SVG est également très intéressant, car son poids s’adapte automatiquement à sa taille.

Les nouveaux standards du web que sont les WebP et WebM sont également à ne pas négliger. Ils ne sont cependant pas encore compatibles avec tous les navigateurs. Il est donc préférable d’attendre encore un peu avant de pouvoir pleinement exploiter leur potentiel.

Les caractéristiques cachées ( titre, balise alt)

Nous voici dans la partie qui est le plus souvent négligée lors de l’utilisation d’images “les métadonnées”. Bien que ces dernières ne soient pas visibles sur vos images, elles ont une grande importance. Les deux plus importantes, sont le titre, la description, le texte alternatif (balise Alt pour les intimes ^^).

Le titre de votre image permet au navigateur de savoir de quoi elle parle. Ces derniers ne pouvant voir ce qu’elle représente, ils se servent du titre pour faciliter son référencement en ligne. Donc si vous affichez une image d’un Boeing 747 ✈️ évité de nommer votre image IMG748949.jpg, Boeing-747-Paris.jpg sera plus approprié.

Le texte alternatif est la plus importante des métadonnées de votre image pour son référencement. C’est le texte qui va être lu par le moteur de recherche, en plus de son titre. Ce dernier va permettre au bon référencement de l’image en fonction des mots-clés présents. 

Il va également servir dans l’accessibilité de votre site internet, par exemple si votre utilisateur ne peut pas afficher votre image, c’est ce texte qui apparaîtra à l’écran et qui lui permettra de se représenter cette dernière. Ou encore ce texte peut être lu par le navigateur dans le cadre d’une consultation par une personne malvoyante par exemple.

L’accessibilité d’un site internet au plus grand nombre est un critère très important du SEO, c’est donc un élément a optimisé sur chaque image.

L’accessibilité d’un site internet au plus grand nombre est un critère très important du SEO, c’est donc un élément a optimisé sur chaque image.

Vous avez maintenant toutes les cartes en main pour avoir des images bien optimisées sur votre site. Nous avons vu pour cela qu’il fallait bien choisir leurs tailles et les redimensionner pour votre site, comment les compresser sans perdre de qualité afin de gagner encore en efficacité. Et nous avons vu ensuite comment optimiser leur métadonnée afin de gagner en visibilité par les moteurs de recherche. Tout ceci dans le but de proposer un site plus rapide à vos utilisateurs et d’améliorer votre référencement naturel.

À vous de jouer à présent.

Cet article vous a plu et vous a été utile ? N’hésitez pas à vous inscrire à ma newsletter pour ne pas manquer le prochain (promis je ne fait pas de spam ^^).

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *