Sérèndesign

Quel format pour mes images WordPress ?


ou de l'importance de la compression pour le SEO

Illustrer son site web est important pour lui donner du dynamisme et de l’attrait, mais si vous faites n’importe quoi avec les images, vous risquez de vous auto-pénaliser.

Je m’explique : quand on n’est pas webdesigner, les images sont souvent le point faible qui va faire ramer votre site. Et un site qui rame, ça ne plaît pas à Google. En effet, parmi les règles de SEO, il y a celle qui stipule qu’un site doit être léger. Si vous le chargez de belles photos sans avoir compressé correctement celles-ci au préalable, vous allez alourdir votre site au point de faire régresser votre référencement de façon dramatique.

Alors, comment faire pour avoir de belles images qui ne soient pas lourdes et quel format peut vous y aider?

Bibliothèque de médias sur WordPress

Images et SEO

Il existe plusieurs règles pour que vos images soient SEO-compliant (en d’autres termes moins Jean-Claude Vandammesques; optimisées pour le référencement web). Nous allons en passer rapidement quelques unes en revue ici (si ça peut déjà vous aider à prendre les bons réflexes, c’est tout bénef ;-))

Tout d’abord, le nom du fichier. Lorsque vous sauvegardez vos images, oubliez les « photo 1 – 2 – 3.png », « DSC00569.jpg » ou « belle photo que j’aime bien.gif », il est important que le nom soit en rapport avec le sujet de l’article ou du paragraphe de la page à laquelle elle est dédiée. Optez pour un nom significatif et axé sur les mots clés, un nom qui décrit réellement l’image. Evitez à tout prix les espaces et les caractères spéciaux (sauf les tirets) et écrivez de préférence en bas de casse (minuscules). 

Les dimensions idéales d’une image qui prend 100% de largeur de la page doit être de 1200 pixels de large pour mobile et 1600 pixels (max 1920) pour les plus grands écrans (la hauteur étant définie par les proportions de l’image originale). Pour les autres images, on ne dépasse pas 800 px de large. Il vaut évidemment toujours mieux tester le résultat avant de publier pour éviter des images pixellisées. 

Quand vous téléversez une image dans la partie « Médias » de votre administrateur WordPress, n’oubliez pas de compléter le champ « Titre » avec une description de l’image en utilisant des mots-clés si possible. De même, tapez une courte description dans le champ « Texte alternatif », celle-ci est utilisée en cas de problème d’affichage mais aussi pour les malvoyants.

Enfin, le poids sera un facteur capital, surtout si vous gérez une boutique en ligne et que vous chargez un paquet d’images. Cela dépend évidemment de la grandeur que vous voulez donner à vos images, mais si vous ne dépassez jamais 200KB, vous devriez vous en tirer. Si vous voyez MB à la place de Ko, c’est que le travail de compression n’est pas tout à fait terminé. 😉

Le format d'image

Lorsque vous faites une belle photo, vous avez maintenant compris qu’il n’est pas conseillé de l’intégrer telle quelle à votre WordPress. Il vaut mieux la retravailler, réduire ses dimensions, puis l’enregistrer. Les logiciels de traitement d’image vous propose même de les exporter. Et là, vous vous retrouvez face à une liste d’extensions barbares : TIFF, PDF, PNG, SVG… 

Laquelle choisir ?

Vous ne pourrez de toute façon pas tout intégrer sur WordPress. En général, on va utiliser des GIF pour des images animées, des PNG pour avoir de la transparence ou des JPEG pour avoir du plus léger. Il y a cependant un format d’image qui va tellement compresser vos photos sans en altérer la qualité que vous pourrez ajouter autant d’illustrations à votre site que vous en rêvez sans avoir peur de ralentir ses performances: le WebP

Le format WebP a été développé comme un format d’image moderne qui offre une compression supérieure sur le Web. Par rapport aux images JPEG, les images WebP sont plus petites, avec une réduction de taille de fichier d’environ 30 % en moyenne (avec la même qualité visuelle).

Par exemple, l’image ci-contre du dessus est en WebP et celle du dessus en jpeg. Voyez-vous une différence à l’oeil nu? Vous non, mais Google le verra. La première pèse 46ko VS 468Ko pour la deuxième. And the winner is…

 

Image en webp VS image en jpeg
Image en webp VS image en jpeg

A noter que WordPress est tellement fan de ce format qu’il sont en négociation pour l’intégrer par défaut dans le programme. En effet, les sites Web WordPress peuvent désormais bénéficier de WebP car ce format est pris en charge dans tous les navigateurs supportés par WordPress et par les bibliothèques de gestion d’images GD et Imagick sur lesquelles WordPress s’appuie. Avec cette nouvelle fonctionnalité, les utilisateurs pourront continuer à télécharger et à utiliser les mêmes images JPEG qu’aujourd’hui et dans les coulisses, WordPress créera les images WebP les plus performantes et les utilisera pour le site Web. En passant de JPEG à WebP comme format de sortie par défaut, les sites WordPress sur le Web bénéficieront de performances améliorées. Mais d’ici là, il va falloir trouver des astuces pour intégrer directement du WebP à votre bibliothèque d’images…

Image en webp VS image en jpeg
Image en webp VS image en jpeg
Comment rendre une image légère

Comment obtenir un WebP ?

Si vous êtes familier de WordPress, vous savez qu’il existe des plugins pour absolument tout ( à part pour faire des glaçons, ça j’ai pas encore vu). Il y a donc forcément des plugins de compression d’images et même de ceux qui vous changent tout type de fichier en format WebP. Pour ne citer que les quelques que j’ai déjà testé, vous avez Imagify, WebP Express et aussi Smush (mais en version Pro). 

Par contre, installer un plugin pour compresser ses images ne me semble pas la solution optimale car comme dirait un ami webdeveloppeur « au moins de plugins, au mieux ton site se porte ». Et puis, il existe de nombreux logiciels de traitement d’images (le sacro-saint Photoshop qui supporte désormais le format depuis le début de cette année), même gratuits (l’affreux Gimp, mais bon les goûts et les couleurs…) qui vous feront cela en deux coups de cuillères à pot. 

Je vous conseillerai donc d’exporter, via un logiciel de traitement d’images, votre photo en WebP (avec le bon nom) AVANT de l’importer dans votre bibliothèque de médias WordPress.

Conclusion

Le format WebP offre une compression maximale avec une qualité d’image suffisante et permet de garder des sites légers qui auront donc plus de chance d’être mieux référencés. 

Il est LE format d’avenir pour le web. Le choix de WordPress d’en faire un jour son format d’image par défaut en est une preuve. 

Alors, faites comme WordPress et Sérèndesign, adoptez-le.