Comment optimiser les images de votre site internet ?

Comment optimiser les images de votre site internet ?
optimiser images

Que cela soit pour la lisibilité ou pour les performances SEO de vos pages web, savoir optimiser une image est devenu un enjeu essentiel pour assurer les performances de votre site internet. Aujourd’hui, le design est tout aussi important que le contenu. L’information donnée peut être de très grande qualité, mais si elle ne donne pas envie d’être lue, l’internaute ira la chercher sur un autre site. Mise en page, organisation des idées, intertitres… il existe de nombreux moyens pour améliorer la lisibilité de votre contenu. Ces derniers sont mêmes pris en compte par Google pour hiérarchiser les sites entre eux.

L’un des éléments qui permet facilement d’aérer son contenu, est l’intégration d’images. Rien de mieux qu’un visuel pour illustrer ses propos et rendre la lecture plus agréable. Mais si les images ne sont pas optimisées, elles peuvent impacter le temps de chargement de vos pages web. Un site qui met longtemps à se charger n’est pas agréable pour l’internaute, mais surtout, cela a un impact sur vos performances SEO. Afin de l’éviter, il faut bien penser à optimiser chaque image que vous uploadez, que celle-ci soit utilisée dans un article de blog, ou pour les pages dites statiques de votre site.

Voici quelques points d’attention :

  • La taille du fichier
  • La taille de l’image
  • Sa résolution

L’objectif ici n’est pas de réduire au minimum le volume des données. Il faut trouver un juste milieu entre avoir une image de bonne qualité et un visuel qui se charge rapidement.

Comment optimiser la taille du fichier ?

Le premier élément à observer est la taille du fichier. Plus il sera lourd, plus il mettra longtemps à s’afficher. La taille recommandée est d’avoir une image de 200 Ko (maximum), pour illustrer un article de blog, et de 500 Ko quand elle est utilisée pour le design de votre site.

Si votre fichier ne respecte pas cet ordre de grandeur, alors il faudra se pencher sur son format. Sur de nombreux sites, on trouve des visuels en .PNG. Ce format a l’avantage de gérer la transparence, mais cela se fait au détriment du poids du fichier. Dans de nombreux cas, l’utilisation d’une image en .PNG n’est pas justifiée. Il est donc recommandé d’utiliser un format plus compact, comme le .JPEG.

Les .GIF sont également un type de fichier particulièrement lourd. Très tendance pour illustrer un contenu, ils alourdissent considérablement le temps de chargement d’une page. Même si on peut, tout de même, utiliser ce type d’animations, il faut le faire avec parcimonie pour éviter que cela impacte trop la vitesse de votre site.

Compression image jpeg

Afin d’optimiser la taille de votre fichier, il faut également faire attention à la manière dont vous avez sauvegardé votre image. Les logiciels de graphisme étant utilisés pour des productions print et digitales, les sauvegardes sont en haute définition. Or le web ne nécessite pas le même niveau de détails qu’une impression. C’est pour cela que les logiciels proposent des modes d’enregistrement spécifique au web. Dans la suite Adobe, elle se nomme « enregistrer pour le web ». L’image sera alors assez détaillée pour une publication digitale, sans avoir le poids d’un fichier destiné au print.

Malgré ces optimisations, si votre fichier ne respecte pas les poids recommandés, cela veut dire que la taille de votre image, ou/et sa résolution sont trop grandes.

Comment optimiser la taille et la résolution de l’image ?

La taille d’une image se mesure en pixels. Plus elle en affichera, plus elle sera grande. Mais cela n’est pas utile d’avoir de grandes dimensions si elle n’est jamais affichée comme telle. Pour illustrer ces propos, prenons l’exemple d’une image de 2 000 px x 1 000 px. Sur votre site internet, elle sera affichée avec une largeur maximum de 800 px. Le visuel d’origine sera donc redimensionné afin de l’afficher sous le bon gabarit. Une étape qui va ralentir le temps de chargement de votre page web, et qui va dégrader la résolution de votre image.

Dans cette situation, la bonne pratique est d’enregistrer votre image directement dans le format désiré. Ainsi, il n’y aura pas de redimensionnement à prévoir, mais surtout votre fichier sera plus léger.

Difference_de_ppi_sur_une_image

Au niveau de la résolution, on a tendance à dire que le niveau recommandé pour l’impression est de 300 ppi (pixels par pouce) et de 72 ppi pour le web. Si pour le print cela s’avère vrai, ce n’est pas le cas du web. La résolution d’une image ne va avoir aucune incidence sur la qualité d’affichage. Cette dernière sera dictée par la taille de l’image (en pixels), ainsi que la résolution de l’écran utilisé (en ppi). Effectuer des traitements d’images, pour atteindre les 72 ppi est donc une perte de temps, qui va plus alourdir la taille de votre fichier que l’optimiser.

Une image optimisée est également une source de trafic

Optimiser les éléments d’une page pour le SEO, va avoir des conséquences directes sur ses performances en référencement naturel. Mais l’optimisation des images peut également être une source de trafic naturel en soi.

En respectant quelques bonnes pratiques, vos images peuvent être référencées dans google.image.fr. Sur notre site, c’est même devenu notre principale source de trafic referral. Pour ce faire, voici les quatre éléments qu’il faut optimiser.

1/ Renommer votre fichier

Renommer fichier image

Tout comme le texte, Google va toujours mettre en avant le contenu exclusif à votre site. Idéalement, il faut donc réaliser ses propres photos. Mais cela demande beaucoup de ressources qui ne sont pas forcément justifiées, surtout quand cela concerne de l’illustration d’articles.

Pour distinguer les images exclusives de celles provenant de banque d’images, Google analyse le spectre colorimétrique et le nom de chaque visuel. C’est sa façon de lire une image. Si le premier élément est difficile à tromper (vous pouvez essayer de le faire en rajoutant votre logo sur le visuel), le second est très simple. Il suffit de renommer le fichier avec les mots clés qui sont importants pour vous. Quand vous allez héberger l’image sur votre site, cela va créer une URL en fonction du nom de votre fichier. Si vous avez bien renommé votre document, il sera alors facile pour Google de relier votre visuel aux mots clés ciblés.

2/ Texte alternatif

Texte alternatif image WordPress

Afin de bien comprendre le sujet de l’image, Google va également observer son texte alternatif. Cette balise a pour objectif d’aider les personnes malvoyantes à distinguer ce qu’il y a sur l’image, mais elle est également prise en compte pour associer le visuel à des mots clés. Les bonnes pratiques, pour renseigner cette balise, sont de décrire l’image, en une phrase, tout en utilisant un maximum de mots clés.

3/ Le ratio de l’image

Plus une image va être de bonne qualité, plus elle va bien être référencée dans Google Image. Mais plus que tout, le bot de Google va prendre en compte les dimensions de votre visuel. Il doit s’approcher le plus du ratio 600 px x 300 px. D’ailleurs, on vous recommande de configurer les gabarits d’image de votre site sur ce ratio. Votre CMS redimensionnera vos visuels pour que leurs dimensions s’approchent le plus de la recommandation de Google.

4/ Adosser l’image à un texte optimisé

inbound marketing

La dernière recommandation, pour bien référencer une image sur Google Image, est peut être une évidence, mais il est important de la rappeler. Il faut que le texte qui va entourer le visuel, soit optimisé sur les mêmes mots clés que celui de votre image. Si vous rédigez un article sur l’Inbound Marketing et que vous l’illustrez d’une photo de Monica Bellucci, il y a assez peu de chances que votre image soit référencée sur le nom de l’’article.

Tout comme les cocons sémantiques, il faut travailler tous les éléments de votre page, dont les images, sur les mêmes mots clés que le reste de votre contenu.

Kevin Brun
Consultant Inbound Marketing

cta-content-marketing

0 Avis

Laisser une réponse

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

*