Le meilleur format d’image pour le référencement SEO dépend notamment du contenu de votre infographie. Dans cet article, vous saurez lequel choisir et surtout pourquoi ! Pour améliorer le référencement SEO de votre article et enrichir de façon considérable votre contenu, il est fortement conseillé d’utiliser des visuels sur vos pages.

Mais alors pourquoi ? Et bien, les contenus de types « images et illustrations » peuvent être une solution pour mettre en avant votre page de façon à captiver l’internaute, illustrer et dans certains ca,  sublimer votre contenu. Dans la plupart des cas, les articles contiennent une image mise en avant. Elle est nécessaire pour représenter tout votre article, en un seul visuel.

Les images peuvent être exportées et intégrées sur votre site web de différentes manières. De plus, une image possède un format, plus précisément le format de fichier de votre image. Dans le monde du SEO, vous ne pouvez pas utiliser n’importe quel format d’image pour afficher cette dernière sur votre page. Effectivement, des optimisations seront à prévoir afin de disposer du format le plus efficace possible.

Les bénéfices des images en SEO

Pour les moteurs de recherche, les images peuvent être considérées comme une source de contenu supplémentaire. Le fait qu’une image soit sur une page web ne fait aucun doute que son référencement s’appuiera dessus. Si votre page ne dispose d’aucune image, alors l’optimisation interne de votre page ne sera pas maximale.  Il est donc conseillé d’utiliser des visuels très fréquemment. Si vous souhaitez en savoir plus sur les bienfaits des visuels sur votre site, notamment d’un point de vue référencement web, nous vous invitons à lire des conseils pour le référencement de vos images  !

Pour une expérience utilisateur plus agréable

Dans le monde du référencement naturel, beaucoup de facteurs sont à prendre en compte pour ranker sur Google. Entre taux de rebonds, taux de clics, et profondeur du contenu, plusieurs éléments sont à prendre en compte mais l’un est fondamental : L’expérience utilisateur. Effectivement, une image doit être représentative de l’article, elle doit être intéressante, et elle ne doit pas gâcher l’expérience de votre visiteur. 

Pour une meilleure expérience, nous vous invitons à privilégier la qualité de vos infographies, mais également à ne pas en « faire de trop ». Si votre image peut vous offrir un contenu divers, il ne permet pas de vous offrir un contenu riche et plus intéressant qu’un texte. Google ne peut pas lire vos images.

Par contre, Google prend en compte les expériences passées des visiteurs de votre page, et ainsi en tire des conclusions. Par exemple, est-ce que votre précédent visiteur s’est arrêté au niveau de votre image pour lire l’infographie ? Ou bien est-ce que votre utilisateur a quitté subitement la page après l’apparition d’une image ? Vous l’aurez compris, les images sont indispensables mais surtout dédiées à vos visiteurs, et non pas seulement pour les robots d’indexation.

Pour afficher des données structurées qui donnent envie

Sur les résultats de recherches de Google, qu’on pourrait appeler SERP : Les données structurées servent à afficher des informations d’une page, et ce, d’une manière assez particulière. Grâce à ces informations enrichies, vous pouvez donner plus l’envie aux internautes de cliquer ! 

L’affichage des données est très graphique. Il en existe plusieurs types, comme par exemple les recettes de cuisine ou bien les barres de recherche. Le format de données structurées contenant une image est sans doute le plus utilisé sur le web. Les images sont les types de données structurées les plus faciles à mettre en place, notamment sur WordPress !

Les formats à utiliser sur votre site

Vous avez créé votre magnifique infographie, ou pris une réelle photo et vous souhaiteriez l’intégrer à votre site internet. Cependant, vous ne savez pas quel type d’image choisir. Pas de panique, ici, nous vous donnons les meilleurs conseils ainsi qu’une explication des formats principaux, et les plus recommandés. 

Pour bien comprendre comment fonctionne une image, nous utiliserons deux termes techniques, bien connus des infographistes : Les formats de fichiers vectoriels, et les formats de fichiers matriciels. 

Un format vectoriel comprend simplement votre illustration sous forme de vecteur, alors qu’un format matriciel comprend des pixels. Une image pixélisée est bien plus longue à calculer pour un ordinateur, qu’une image matricielle. Mais encore une fois… cela dépend de son contenu ! 

• Le poids d’une image pixélisée se calcule sur la dimension de cette dernière, et plus précisément sur le nombre de pixels qu’elle intègre. 
• Pour les images vectorielles, c’est en fonction du nombre de vecteurs, et du nombre d’informations de points d’ancrage sur votre illustration qui est pris en compte.

Format PNG

Le format PNG est l’un des formats les plus connus du web. Grâce à ce format de fichier d’image, vous pourrez intégrer un objet ou une silouhette sans forcément intégrer le fond de celui-ci. C’est propre à l’utilisation d’un outil de détourage : Il vous sert à détourer une partie d’une photo, et de l’exporter sur un fond transparent.

Cependant, les images au format .PNG peuvent être très lourdes, et donc très longues à charger par le navigateur client. Nous vous recommandons donc de vérifier le poids de chaque image PNG de votre site web. Pour optimiser au mieux le poid de votre fichier PNG, n’hésitez pas à vous servir de PhotoShop pour l’exportation du fichier, en réglant la taille de votre visuel.

Enfin, si votre image possède un fond mais est actuellement au format PNG, nous vous invitons à choisir le format suivant de cette liste.

Format JPG

Le format JPG est le format le plus connu du web. Il s’agit d’un format matriciel, donc totalement pixelisé. Plus sa taille est grande, plus il y a de pixels, et donc mieux la qualité se portera ! Par contre, il peut être également très lourd dans certains cas, notamment où la dimension de votre image est trop grande, ou bien que le format JPG n’est pas compressé.

Malheur pour les pages web, ce dernier scénario peut considérablement faire ralentir votre site. C’est ce que je constate sur la plus part des sites internet : Des images JPG non optimisées… Alors il vous faudra vous orienter vers le rapport qualité/poids de votre image, en réduisant sa taille par exemple. En réduisant considérablement cette dernière, vous gagnerez en poids, étant donné que moins de pixels seront présents sur votre image. Par contre, notez que la qualité de celle-ci se détériore au fur et à mesure.

Il est tout de même important de garder une qualité d’image optimale pour l’expérience utilisateur de votre page. Vous n’aimeriez pas lire un article de superbe qualité en tombant sur une image qui n’apporte aucune valeur… Veillez donc à ce que votre image au format JPG soit de taille optimale à votre page web, afin d’optimiser la vitesse de sa page.

Format SVG

Le format SVG est quant à lui un format vectoriel, comprenant tout simplement un code HTML et permettant d’afficher une illustration vectorielle sur un site internet. Vous pouvez par exemple créer votre illustration sur le logiciel Adobe Illustrator, et exporter ce fichier au format .SVG afin de l’intégrer dans vos lignes de code. Très pratique, il permet d’intégrer facilement un logo, une icône ou tout type d’illustration vectoriels et ce, très facilement. La qualité de votre image sera optimisée au maximum grâce au format SVG. 

De plus, si vous avez des compétences en CSS, il vous sera alors possible d’établir n’importe quelle animation sur votre image en SVG ! Cependant, si votre illustration comprend beaucoup de vecteurs, les lignes de code intégrant votre fichier SVG seront nombreuses, il n’est donc pas toujours optimal. C’est à vérifier en fonction de chaque illustration et à vous de faire la part des choses. Par défaut, le CMS WordPress ne prend pas en charge les fichiers SVG, vous devrez vous servir d’une extension, nous vous conseillons SVG support pour sa simplicité.

Format WEBP

Le format WEBP est comparable au format JPG. Cependant, la compression des fichiers WebP est impressionnante. Elle vous permet de récupérer un maximum de données sur votre image, en optimisant son code interne, et ce, pour établir une diminution du poids de votre image. Le seul problème du format WEBP est qu’il n’est pas lisible et compréhensible par quelques navigateurs importants.

Nous citons en priorité Safari sur iOS. Dans ce cas, il vous est possible d’intégrer les deux formats, et ainsi faire télécharger à l’utilisateur le WebP si son navigateur l’autorise, ou bien un .JPG si c’est la seule solution. Sur WordPress, vous pouvez utiliser le plugin Imagify, permettant de convertir un fichier JPG en fichier WebP automatiquement ! Il ne vous reste plus qu’à l’installer, et téléverser vos images comme d’habitude, le plugin s’occupe de tout !

Format GIF

Et enfin, le format GIF, adapté entièrement à l’animation. Si vous souhaitez créer une jolie animation, vous pouvez passer par exemple par Photoshop, et ainsi créer une timeline avec vos différents calques. Seul hic, les formats GIF sont lourds et très souvent de mauvaise qualité.

Si vous avez des compétences en CSS/SVG/JS, nous vous conseillons de vous orienter vers le format SVG et d’inclure votre animation indépendamment de votre fichier. Le format GIF est en quelque sorte plusieurs fichiers PNG à la suite. Suite aux nouvelles technologies de ces dernières années, le format .GIF est très mal « vu » par la plupart des professionnels, cependant, certains l’utilisent encore. C’est sûrement dû à sa facilité de création d’animation. 

Images contextuelles ou image de décor ?

Sur un article, ou plus particulièrement sur une page web ( navigationnelle, informationnelle ou commerciale ), vous aurez forcément des images pour illustrer votre contenu, mais également des images de décors ! 

Ces deux types d’images ne doivent pas être codés de la même manière. Pour Google, une image contextuelle est bien plus importante et a pour but d’être référencé sur internet. Pour bien distinguer les deux, nous ferons appel à deux méthodes. Les voici : 

• Image contextuelle : Nous coderons simplement votre image en HTML, pour définir le contenu de l’image. Voici la ligne de code à ajouter à votre page web : <img src=”monimage.jpg” alt=”la description de mon image pour informer Google de son contenu ”>
• Image de décor : Cette fois-ci, hors de question d’utiliser le HTML. Il faut s’orienter vers le CSS afin de définir le style de votre page. L’attribut background-image est dédié à ce type d’utilisation. Voici un exemple : background-image:url(mon-image.jpg)

Conclusion

Le meilleur format d’image est sans doute le format WEBP pour les photographies, et le .SVG pour les logos simples et comprenant peu de vecteurs. La méthode de compression est fastidieuse sur les fichiers WEBP et la qualité de l’image reste très optimale.

Cependant, certains navigateurs ne l’autorisent pas, il faudra donc faire appel à une méthode de condition d’image en HTML. Pour compresser ces images en JPG, nous vous conseillons d’utiliser Photoshop ou un logiciel de compression d’image facile à prendre en main, et surtout très complet. 

Enfin, ne prenez pas cet article pour une généralité, tout peut dépendre de ce qu’intègre votre image et de la façon dont elle est chargée sur votre site. Pour finir, et ce… avec un bon conseil, n’hésitez pas à utiliser les fonctions de mise en cache d’image.

Également, il peut être adéquat d’utiliser une fonction de type « lazy load » afin de charger votre image au bon moment ! Le but ici, c’est de montrer à votre visiteur une image captivante, sans pour autant détruire son expérience utilisateur. Plus précisément, évitez à tout prix un ralentissement du chargement de votre page !