Format d'image WebP : expliqué simplement.

WebP est un format d'image développé par Google qui compresse les photos et graphismes en fichiers nettement plus légers que le JPEG ou le PNG, à qualité visuelle comparable. Un fichier WebP type est 25 à 35 % plus léger qu'un JPEG équivalent, et encore plus compact que le PNG pour les graphismes en aplats de couleur ou avec transparence. Le poids des images étant en général le premier contributeur au poids total d'une page, passer au WebP est l'un des leviers les plus directs pour accélérer un site sans toucher à son design ni à son contenu.

Le WebP a été publié en 2010 et fait depuis partie des formats recommandés par les propres audits PageSpeed Insights et Lighthouse de Google, qui signalent les images JPEG et PNG historiques comme une opportunité d'économiser des octets. Il est désormais pris en charge nativement par tous les navigateurs majeurs, ce qui a levé le principal frein qui limitait son adoption pendant des années après sa sortie.

Le WebP utilise une compression par prédiction empruntée aux codecs vidéo : il prédit un bloc de pixels à partir des blocs voisins déjà décodés, puis n'encode que la différence, ce qui est bien plus efficace que de compresser chaque bloc indépendamment comme le font les formats plus anciens. Le format prend en charge à la fois la compression avec pertes, qui sacrifie un peu de détail visuel pour un fichier plus léger, et la compression sans perte, qui préserve chaque pixel à l'identique tout en réduisant le fichier par rapport au PNG.

Diffuser du WebP avec un repli JPEG ou PNG pour les anciens navigateurs passe par l'élément picture :

<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Image hero produit" width="1200" height="630">
</picture>

Le navigateur télécharge la source WebP s'il prend en charge le format, et bascule silencieusement sur le JPEG de la balise img dans le cas contraire, sans aucun JavaScript requis.

• WebP avec pertes : comparable au JPEG, sacrifie un détail imperceptible pour une compression maximale, idéal pour les photos.
• WebP sans perte : comparable au PNG, conserve chaque pixel à l'identique, idéal pour les logos, captures d'écran et graphismes aux contours nets.
• WebP avec transparence : prend en charge un canal alpha comme le PNG, pour une fraction du poids de fichier.
• WebP animé : un remplaçant direct du GIF animé, avec des fichiers bien plus légers pour la même séquence d'images.

• Toujours prévoir un repli avec l'élément picture plutôt que de diffuser le WebP comme seule source, pour protéger les visiteurs sur un navigateur ancien.
• Définir des attributs width et height explicites pour que le navigateur réserve l'espace de mise en page et évite les décalages pendant le chargement.
• Utiliser le WebP avec pertes pour les photos et sans perte pour les logos ou graphismes d'interface ; se tromper de mode gaspille soit de la qualité, soit du poids de fichier.
• Ré-exporter les visuels JPEG et PNG existants plutôt que de réserver le WebP aux nouvelles images, les visuels historiques étant souvent la plus grande économie inexploitée sur un site ancien.
• Ne pas supposer qu'un CMS ou un hébergeur convertit automatiquement les images en WebP ; vérifier avec un outil d'audit d'images que les fichiers sont réellement servis dans ce format.

Le poids des images est l'un des plus gros leviers pour les Core Web Vitals, en particulier le Largest Contentful Paint, car une grande image hero est souvent la ressource la plus lourde d'une page. Passer les visuels JPEG et PNG au WebP réduit en général le poids total des images d'un quart à un tiers sans perte de qualité visible, ce qui se reflète directement dans les scores PageSpeed Insights et Lighthouse. Des pages plus rapides à charger ont aussi tendance à afficher un taux de rebond plus faible et une meilleure efficacité de crawl, les robots des moteurs de recherche pouvant traiter davantage de pages avec le même budget de crawl quand chaque page est plus légère.

Nous convertissons et diffusons les images en WebP par défaut sur les sites que nous développons, associé au lazy loading et à un CDN pour garder le poids des pages et les temps de chargement aussi bas que possible. Chaque projet est audité par rapport aux seuils Core Web Vitals avant sa mise en ligne, et le format d'image est l'un des premiers leviers que nous vérifions. Voir notre service website pour savoir comment nous traitons la performance sur les sites que nous concevons et développons.