Les images donnent vie à votre site et le mettent en valeur. Mais si elles sont si importantes, c’est aussi et surtout parce qu’elles se retiennent mieux et sont plus susceptibles de convaincre et « convertir » vos visiteurs. Cependant, des images mal choisies, trop lourdes ou mal optimisées, peuvent vous faire perdre des visiteurs.

L’optimisation des images consiste à réduire autant que possible la taille de fichier de vos images sans sacrifier la qualité, de sorte que les temps de chargement de vos pages restent court avec un design attirant et un  meilleur référencement.

Voici alors 6 astuces sur la façon d’optimiser les images pour le web ainsi que quelques autres techniques pour en tirer le meilleur profit.

 

1. Choisissez le bon format de fichier

 

Avant de commencer à modifier vos images, assurez-vous d’avoir choisi le meilleur type de fichier. Il existe plusieurs types de fichiers que vous pouvez utiliser

• Le format JPEG (.jpg) :Les images JPEG peuvent être considérablement compressées, ce qui permet d’obtenir des images de qualité avec des fichiers de petite taille. L’inconvénient est que le format jpg ne gère pas la transparence. Il est conseillé d’utiliser le format png pour des images avec transparence.
•  Les images GIF (.gif) sont de qualité inférieure aux images JPEG et sont utilisées pour des images plus simples, telles que des icônes et des images décoratives. Les GIF prennent également en charge l’animation.
  Pour les images et les photos complexes, les GIF ne sont pas toujours aussi attrayants. Cela est particulièrement vrai pour les grandes images.
•  Les images PNG sont très populaires en tant qu’alternative aux GIF. Les fichiers PNG prennent en charge beaucoup plus de couleurs que les fichiers GIF et ne se dégradent pas avec le temps lors des ré-enregistrements, contrairement au format JPEG. L’inconvénient des images png est le poids des fichiers qui peut être supérieur aux .jpg.

En résumé, utilisez le .jpg pour les images de type photo, le png lorsque vous devez intégrer des photos avec de la transparence et du gif si vous voulez une image animée.

 

2. Compressez vos photos

 

La question qu’on peut légitimement se poser, c’est : quel est le poids idéal d’une image web ? La réponse dépend bien sûr de toute une série de facteurs :

• Quel est l’objectif de votre site (si vous êtes photographe ou architecte, vous n’aurez pas les mêmes exigences qu’un consultant ou un avocat)
•  Combien d’images voulez-vous insérer sur votre page et pour quelle utilisation (photo plein écran, plusieurs photos pour un site parallax, etc.).

Quoi qu’il en soit, même si tout est relatif, voici quelques indications :

•  Un logo ne devrait pas peser plus de quelques ko.
•  une image à l’intérieur d’un article de blog ne devrait pas dépasser 50-100 ko
  et plus vous ajoutez d’images à votre page, plus vous devrez veiller à ne pas l’alourdir inutilement
•  Une image en pleine page (2000 px) atteint vite 200 ko et plus, tout dépend de vos objectifs.

L’essentiel est que la page reste agréable à regarder et se charge en moins de 5 secondes.

 

3. Nommez bien vos images

 

Nous restons toujours dans le même sujet : optimiser les images, mais là il ne s’agit d’avoir un bon rapport qualité poids d’une image, mais optimiser l’image pour qu’elle nous ramène du trafic à notre site. L’optimisation de nos images va donc optimiser automatiquement notre SEO.
Il est important d’utiliser des mots-clés pour aider Google à référencer votre page web. L’idée est donc d’utiliser des mots-clés dans le titre de l’image pour décrire l’image et pour que le robot des moteurs de recherches puisse comprendre de quoi il s’agit et d’afficher entre autres votre image dans la liste de recherche.
Et même si cette étape peut sembler fastidieuse, prenez le temps de renommer chaque fichier AVANT de le télécharger sur votre site. Après, ce ne sera plus possible.
Renommer chaque fichier vous donnera un petit avantage sur vos concurrents. Voici pourquoi :

•  Si Google comprend vos images, il pourra les interpréter et les référencer. Vous serez donc visible sur Google Image également.
•  Si le nom et la description de votre image sont explicites, les internautes pourront arriver sur votre site à partir d’une recherche d’image
•  Si vous faites attention à l’usage correct des espaces, accents, etc. dans votre nom de fichier, vous évitez les erreurs 404 ou les url illisibles

 

4.  Complétez les balises et la description de vos images

 

Pour référencer correctement vos images, Voici quelques techniques SEO qui ont fait leur preuve. il convient de compléter 3 ou 4 éléments liés à chaque image.

1.  La balise Title ou titre de la photo : C’est le seul élément obligatoire pour les CMS. Par défaut, elle reprend le nom de votre fichier image( Imaginez comme titre : dsc15968.jpg !) si vous n’avez pas changé l’url de ce fichier vous avez donc tout intérêt à créer un titre descriptif, court et pertinent  qui  les mots clés de votre page (comme l’url).
2. La balise Alt  :fournit un texte alternatif à l’image. si l’utilisateur ne peut pas voir votre image (pour cause de connexion trop lente, d’erreur technique, ou d’utilisation d’un lecteur d’écran) cette balise est essentielle pour l’accessibilité de votre site. Elle rend l’ensemble de votre page accessible à tous (y compris aux malvoyants) en toutes circonstances.
3.  La balise description vous permet de fournir des informations plus détaillées sur le contenu ou le contexte de l’image. Il vous permet même d’inclure un appel à l’action, comme « Acheter maintenant notre produit X pour xx Dh ».
4.  La légende est le texte qui s’affiche sous l’image. Choisir de remplir cet élément dépend avant tout de votre parti pris graphique. La légende permet de répéter un élément clé du message, de préciser un contexte ou d’attribuer la photo.

 

5. Gérez les images “décoratives”

 

Les sites Web proposent souvent leur lot d’images décoratives, telles que des images d’arrière-plan, des boutons et des bordures. Tout ce qui n’est pas lié au produit peut probablement être considéré comme une image décorative.
Les images décoratives peuvent entraîner une taille de fichier importante et des temps de chargement lents. Par conséquent, vous devriez examiner de près vos images décoratives afin qu’elles ne compromettent pas la capacité de votre site Web à convertir les visiteurs en clients.
Voici quelques conseils pour réduire la taille des fichiers de vos images décoratives:

• Pour les images qui forment des bordures ou des motifs simples, créez-les au format PNG-8. Vous pouvez créer de belles images d’une taille de quelques centaines d’octets seulement.
•  Si possible, utilisez le CSS pour créer des zones colorées au lieu d’utiliser des images. Utilisez autant que possible les styles CSS pour remplacer les images décoratives.
•  Prêtez une attention particulière aux images d’arrière-plan. Réduisez-les autant que possible en veillant à la qualité de l’image

 

6. Utilisez des sitemaps image

 

Si votre site utilise des galeries Javascript, des images pop-up ou autre, les sitemaps image vous aideront à référencer vos images sur Google.
Les crawler Web ne peuvent pas analyser les images qui ne sont pas appelées spécifiquement dans le code source de la page. Par conséquent, pour que les robots d’exploration soient informés des images non identifiées, vous devez répertorier leur emplacement dans un sitemap pour images.
Vous pouvez insérer une ligne dans votre fichier robots.txt, en indiquant le chemin d’accès à votre sitemap ou vous pouvez également envoyer le plan du site à Google à l’aide de la search console.
Google a de nombreuses recommandations pour la publication d’images , qui peuvent aider votre site Web à obtenir un meilleur classement sur les SERP (Résultats de recherche Google, Bing, etc…). En outre, vous pouvez utiliser les sitemaps de Google pour donner à Google davantage d’informations sur les images de votre site Web, ce qui peut aider Google à trouver davantage d’images que vous ne le feriez par vous-même.

 

Bonus : Quelques Outils et programmes d’optimisation d’image

 

Il existe beaucoup d’outils et de programmes, à la fois premium et gratuits, que vous pouvez utiliser pour optimiser vos images. Certains vous donnent les outils pour effectuer vos propres optimisations et d’autres font carrément le travail pour vous. Voici quelques uns :

• Adobe Photoshop
• Affinityphoto
• Gimp
•  GIFsicle
•  JPEGtran
•  OptiPNG
• TinyPNG
•  FileOptimizer
•  ImageOptim
•  Trimage

 

Vous connaissez désormais la base de l’optimisation des images pour un bon référencement sur le web, mais il reste encore de nombreux points qui n’ont pas été abordés dans cet article. Comment optimiser ses images pour un rendu optimum sur mobile ? Votre site est-il bien responsive ?