Webp est un format d’image développé par Google, dans le but de limiter le chargement des sites web. La compression plus intelligente que sur les formats JPEG et PNG permet de réduire la taille des images tout en maintenant une qualité visuelle élevée.
Dans un but toujours constant d’améliorer nos développements et la qualité de nos sites, nous nous sommes penchés sur l’utilisation de ce format, avec ses avantages et ses inconvénients.
Le format WebP a été conçu dans l’optique d’obtenir des images web plus légères sans compromettre leur qualité.
La prise en charge de ce format regroupe les avantages des formats JPEG, PNG et GIF :
- compression avec perte (JPEG)
- compression sans perte (PNG)
- transparence (PNG)
- animations (GIF)
Le WebP peut donc remplacer plusieurs formats plus traditionnels en offrant un meilleur taux de compression, de sorte que la vitesse de chargement et la performance des pages web se voient améliorées.
- Réduction du poids des fichiers : les images sont 30% à 50% plus légères que leur équivalent JPEG ou PNG, pour une qualité similaire
- Qualité préservée : même avec un fort taux de compression, le Webp maintient généralement une qualité d'image élevée
- Transparence et animation : Webp prend en charge la transparence (comme le PNG) ainsi que l'animation (comme le GIF), et est ainsi plus polyvalent
- SEO amélioré : Google privilégie les sites qui se chargent plus rapidement dans ses résultats de recherche. Par ailleurs, il préconise l'utilisation de son format. En l'utilisant, vous améliorez donc votre référencement
- Amélioration des performances : un site plus léger signifie un temps de chargement réduit, moins de bande passante consommée, et donc une meilleure expérience utilisateur
- Compatibilité des navigateurs modernes : aujourd'hui, plus de 95% des navigateurs modernes prennent en charge le format
- Compatibilité limitée : certains navigateurs anciens, spécifiques ou certains CMS ou logiciels ne le gèrent pas encore correctement. Solution : si la contrainte vous concerne, utilisez des plugins ou des fallbacks automatiques qui affichent un JPEG ou PNG si le WebP n'est pas pris en charge
- Support limité de logiciels : certains logiciels de retouche d'image ne permettent pas de travailler nativement avec ce format. Les utilisateurs peuvent avoir du mal à ouvrir ou éditer une image WebP hors navigateur
- La compression avec perte impacte la qualité : WebP propose une compression sans perte, mais la version avec perte peut entrainer une dégradation visible de la qualité de l'image. Parfois une image JPEG bien optimisée peut être visuellement plus satisfaisante qu'une image WebP trop agressivement compressée
- Pas toujours plus léger : certaines images simples (avec peu de couleurs ou à faible résolution) ne seront pas plus légères en WebP qu'en PNG ou JPEG. Il est donc important de choisir un outil qui saura faire le bon choix du format lors de la conversion automatique
Depuis 2021, Google a mis en place les Core Web Vitals, 3 indicateurs clés sur la performance et le temps de chargement d’un site web :
- le LCP (Largest Contentful Paint)
- il s’agit du temps nécessaire pour afficher le plus grand élément visible dans la fenêtre (la plupart du temps une image ou un bloc de texte). Ce temps reflète la vitesse de chargement perçue par l’utilisateur
- Objectif recommandé : moins de 2,5 secondes. Avec un LCP rapide, le site donne l’impression d’être fluide et réactif
- le FID (First Input Delay)
- il s’agit du délai entre le premier clic d’un utilisateur et le moment où le navigateur réagit. Cet indicateur mesure donc la réactivité du site et l’absence de blocage lors de la première interaction directe.
- Objectif recommandé : moins de 100 millisecondes
- le CLS (Cumulative Layout Shift)
- il s’agit du degré de mouvement des éléments dans la page lors de son chargement (par exemple, du texte qui descend suite au chargement d’une image, ou un bouton qui bouge au moment de cliquer dessus), ce qui affecte la stabilité visuelle du site. Avec un degré de mouvement trop important, cela peut frustrer l’utilisateur en provoquant des erreurs de navigation
- Objectif recommandé : < 0.1
Depuis que Google intègre la vitesse et l’expérience utilisateur dans ses critères de classement, optimiser les images devient donc une stratégie à ne pas négliger. Des images trop lourdes dégradent fortement ces indicateurs, ce qui fait que le format WebP permet d’obtenir de meilleurs scores sur le LCP et parfois le CLS (à condition de bien gérer l’affichage des images en supplément), donc une meilleure note globale.
L’utilisation de ce format compressé va améliorer la vitesse de chargement, et ainsi avoir des effets indirects sur le référencement.
- Dans la logique du Mobile-First Index, Google évalue en priorité la version mobile de votre site internet. Les images en WebP allègent considérablement les pages en mobile, améliorant ainsi la navigation et l’interaction lorsque l’utilisateur se trouve sur un réseau lent 3G ou 4G.
- Le fait de diminuer le temps d’attente des utilisateurs augmente leur satisfaction. Un site chargé plus rapidement diminue le taux de rebond, augmente le nombre de pages visitées et ainsi la durée de la session utilisateur. Tous ces signaux sont très importants pour le référencement naturel.
- Les robots de Google parcourent le site en moins de temps étant donné que le site est plus rapide et léger. De cette façon, l’indexation se trouve améliorée, surtout sur les gros sites ou les e-commerces avec beaucoup de visuels.
Vous souhaitez améliorer les performances de votre site internet ou de votre application ?
Contactez-nous pour optimiser votre contenu et améliorer durablement vos performances.
Chez Imagile, nous utilisons souvent WordPress pour vous proposer des sites sur mesure que vous pourrez maintenir vous-même en termes de contenu. Nous avons développé notre propre thème sur mesure, que nous configurons en fonction de vos besoins.
Avec l’émergence du format WebP et les nombreux avantages qu’il offre, WordPress a intégré sa prise en charge native dès la version 5.8, sortie en 2021. Depuis cette version, il est possible d’importer et d’afficher des images WebP directement dans la bibliothèque de médias.
Toutefois, cette prise en charge se limite à l’utilisation d’images WebP déjà converties. WordPress ne propose pas, par défaut, de convertir automatiquement les images JPEG ou PNG en formats modernes lors de l’upload. Une limitation importante, surtout si votre site contient déjà de nombreuses images classiques à optimiser.
Pour automatiser ce processus, nous utilisons le plugin Modern Image Formats, développé par la Performance Team de WordPress, qui offre une solution efficace. Il permet de convertir automatiquement les images téléchargées en WebP ou AVIF, selon les capacités de votre hébergement, tout en laissant la version d’origine intacte si besoin.
Pour les images déjà en ligne, il est possible de lancer une conversion globale via des outils comme Regenerate Thumbnails ou des commandes WP-CLI.
Ce plugin, étant officiellement maintenu par les contributeurs de WordPress, offre toutes les garanties de sécurité, de stabilité et de compatibilité avec les futures versions du CMS.
Nous avons effectué des tests de mise en place du plugin sur quelques uns de nos sites WordPress afin d’évaluer le gain de performances. Lors de ces tests, pour des sites ayant de nombreuses images (des sites e-commerce par exemple), la conversion des images source en images en WebP a permis une amélioration significative de performance.
En moyenne :
- Le poids total des ressources diminue de 50 à 70 % après conversion,
- Le Largest Contentful Paint (LCP) s’améliore souvent de 8 à 12 secondes sur mobile et de 0,5 à 1 seconde sur desktop,
- Le score de performance mobile PageSpeed Insights gagne en général 15 à 25 points, tandis que la version desktop gagne 5 à 10 points.
Nous étudions l’intérêt de la conversion en WebP au cas par cas. En effet, tous les sites n’en tirent pas le même bénéfice : sur un site peu visuel ou déjà bien optimisé par d’autres moyens, le rapport temps de mise en place vs gain concret peut être vraiment minime. En revanche, sur un site qui possède beaucoup d’images ou présentant des lenteurs au chargement, le passage au WebP peut avoir un impact notable sur la rapidité et donc sur le référencement.
Nous pouvons donc proposer cette optimisation en option pour différents cas de figure :
- dans le cadre d’une amélioration des performances d’un site existant,
- lors d’une évolution technique ciblée, par exemple lors d’une refonte,
- au développement d’un site ayant une contrainte forte en terme d’écoconception
L’intégration se fait généralement via le plugin Modern Image Formats, que nous configurons selon les capacités de l’hébergement du site, avec possibilité de conversion automatique des futures images et d’optimisation des visuels existants.
Le format WebP représente aujourd’hui une solution efficace pour accélérer le chargement des pages et améliorer l’expérience utilisateur. S’il n’est pas indispensable à tous les projets, il devient un levier d’optimisation pertinent pour les sites où la performance, le référencement naturel et la sobriété numérique sont des priorités.
Chez Imagile, nous proposons la mise en place du format WebP lorsque son adoption apporte une réelle valeur ajoutée à la performance globale du site. Nous accompagnons chaque client dans l’analyse de ses besoins techniques afin d’évaluer la pertinence de cette optimisation. Nous pouvons également proposer d’intégrer les outils nécessaires à l’utilisation du format WebP dès la création d’un site, lorsque le projet présente des contraintes fortes en matière d’optimisation, d’hébergement, de SEO ou d’écoconception.
