WebP vs PNG vs JPG : quel format choisir pour le SEO ?

Un point de départ honnête

Aucun moteur de recherche n’accorde de bonus à une page parce qu’elle est servie en WebP. Le format n’est pas un critère de classement. Ce qui est mesuré, en revanche, c’est le temps qu’il faut à une page pour devenir utile à la personne qui l’a ouverte, et sur la plupart des pages, les images sont l’élément le plus lourd qui sépare ces deux moments. Le format compte parce que les octets comptent, et pour aucune autre raison.

Cet article porte sur la diffusion : quel format servir, comment le servir et ce dont vous pouvez cesser de vous soucier. Si votre vraie question est de savoir quel format convient à quel type d’image, le guide simple sur JPG, PNG et WebP y répond directement, et il est inutile de le répéter ici.

Là où une image pèse sur les métriques de votre page

Sur une page d’article ou une fiche produit, le plus grand élément visible au premier affichage de la page est généralement une image. Son temps de téléchargement entre donc dans la façon dont la performance de chargement est notée, si bien qu’une image principale lourde freine la mesure même quand tout le reste de la page est rapide. Les images situées plus bas n’influencent pas ce chiffre-là, mais elles se disputent quand même la bande passante pendant que l’image importante arrive.

Gardez l’ordre des opérations en tête. Servir les bonnes dimensions en pixels fait gagner bien plus que changer de format, et réserver l’espace dans la mise en page pour que rien ne saute pendant le chargement des images ne coûte rien du tout. Le format est le troisième levier, pas le premier.

Ce que WebP vous apporte vraiment

Deux choses. Le WebP avec perte produit en général un fichier plus petit que le JPEG à qualité visuelle comparable : vous envoyez donc moins de données sur le réseau pour la même image. Et contrairement au JPEG, il gère le canal alpha, ce qui veut dire qu’un seul format couvre à la fois les photos et les graphismes transparents d’une page, et que vous n’avez plus deux chaînes de traitement à maintenir.

Le prix à payer, c’est une étape d’encodage de plus dans votre flux de travail et la question des solutions de repli. Les versions actuelles de tous les grands navigateurs gèrent le WebP, donc le repli compte bien moins qu’il y a quelques années, mais si votre trafic comprend de vieux appareils ou des clients embarqués, il vaut toujours la peine de garder un JPEG sous le coude.

Le servir sans rien casser

L’élément picture existe pour ça. Placez votre image à l’intérieur, ajoutez un élément source de type image/webp qui pointe vers le fichier moderne, et laissez dedans une balise img normale comme solution de repli, avec le JPEG dans son src. Les navigateurs qui comprennent le WebP prennent la première correspondance, les autres se rabattent sur l’img, et dans les deux cas l’image s’affiche. Les robots d’exploration des moteurs de recherche suivent les mêmes règles qu’un navigateur, il n’y a donc rien d’exotique à configurer.

Pendant que vous modifiez ce balisage, faites trois choses de plus. Mettez des attributs width et height explicites sur l’img pour que le navigateur puisse réserver la bonne place avant l’arrivée du fichier. Ajoutez un srcset pour qu’un téléphone ne télécharge pas un fichier taillé pour un ordinateur. Et rédigez un vrai attribut alt : c’est lui qui compte réellement pour que l’image puisse apparaître dans les résultats de recherche d’images.

Là où PNG et JPG gardent leur place

Le PNG reste le bon choix pour les captures d’écran, les schémas, les éléments d’interface et tout ce qui a des contours nets et peu de couleurs. La compression avec perte abîme ce type de contenu, et un article d’aide rempli de captures baveuses est une page moins bonne, quelle que soit sa vitesse de chargement. Le WebP sans perte fait le même travail dans un fichier plus petit, si vos outils savent le produire.

Le JPEG demeure le choix sûr pour les photos quand il vous faut un fichier que n’importe quel client au monde peut ouvrir, et c’est toujours lui qu’il faut placer en solution de repli dans un élément picture. Ce qu’il ne faut pas faire, c’est servir une photo en PNG. C’est la façon la plus courante dont une page finit par peser plusieurs mégaoctets de plus que nécessaire.

Un mot sur AVIF

AVIF bat généralement WebP en taille de fichier, surtout pour les contenus photographiques, au prix d’un encodage plus lent et d’une prise en charge bonne dans les navigateurs actuels, mais moins universelle. Si votre chaîne de build sait le produire, il passe en premier dans l’élément picture, suivi de WebP, puis de JPEG. Les convertisseurs de ce site ne produisent pas d’AVIF : ce format relève donc de vos outils de build, pas d’ici.

Ce qu’un changement de format ne réglera pas

• Une image de 4000 pixels de large affichée dans une colonne de 700 pixels. Le WebP la rend plus légère, mais elle reste beaucoup trop grande. Redimensionnez-la, puis convertissez-la.
• Une image principale qui ne commence à se télécharger qu’une fois terminés plusieurs scripts qui bloquent le rendu. Le format ne compte pas si la requête n’est même pas encore partie.
• Un texte alternatif absent, un nom de fichier comme IMG_4471 ou une page sans rien d’utile écrit dessus. La recherche d’images s’appuie sur la page qui entoure l’image, pas sur le codec qui a servi à l’encoder.

Convertir quelques fichiers tout de suite

Les convertisseurs JPG en WebP et PNG en WebP de ce site prennent une file d’images et vous rendent un ZIP, avec un encodage fait dans votre navigateur plutôt que sur le serveur de quelqu’un d’autre. Le convertisseur universel ajoute un curseur de qualité si vous voulez régler vous-même le compromis entre qualité et poids. Gardez en tête qu’un nouvel encodage supprime le bloc EXIF : le WebP arrive sans les données de l’appareil photo que contenait l’original.

Pour un site qui publie régulièrement, ce travail a cependant sa place dans votre étape de build ou au niveau de votre CDN. Une chaîne qui génère plusieurs largeurs et formats pour chaque image mise en ligne battra n’importe quel processus manuel, parce qu’elle n’est jamais sautée pendant une semaine chargée. Convertissez à la main quand vous corrigez une page précise. Automatisez quand vous corrigez un site.