Avec des images représentant typiquement 50% du poids d’une page web moyenne, tout ce que vous pouvez faire pour optimiser vos images vous permet non seulement d’économiser de l’espace sur votre serveur, mais aussi de servir vos pages plus rapidement.
Heureusement, avec le format d’image WebP, vous pouvez créer des images plus petites et plus riches qui sont en moyenne 26% plus legère que les PNG et 25-34% en moins comparé au JPEG – tout en gardant la même qualité.
Dans cet article, nous allons voir ce qu’est WebP et comment utiliser ce format d’image sur votre site WordPress pour réduire considérablement la taille de vos images.
Qu’est-ce que WebP ?
WebP est un format de fichier image créé par l’équipe Web de Google, développé pour remplacer les formats JPEG, PNG et GIF, tout en supportant la compression, la transparence et les animations.
Il a été annoncé pour la première fois en septembre 2010 en tant que nouveau standard ouvert pour les images en couleurs compressés avec perte sur le Web, produisant des fichiers de plus petite taille et de qualité comparable à celle du JPEG.
Or, comme je l’ai déjà dit ici, quand il s’agit du poids d’une page, la taille compte. Après tout, plus la taille du fichier d’une page Web est petite, plus son chargement sera rapide. C’est aussi simple que ça 🙂
Donc, en réduisant la taille des fichiers de vos images à l’aide d’un format tel que WebP, en combinaison avec d’autres techniques, telles que l’utilisation de la fonction de chargement en lazy load, vous pouvez servir des images qui sont plus petites et assurer que vos pages soient livrées plus rapidement aux visiteurs de votre site.
Prise en charge du format WebP dans les navigateurs
Vous vous demandez peut-être pourquoi le format WebP, pourtant très performant en termes de compression et de qualité d’image, n’est pas encore systématiquement utilisé à la place du JPEG et du PNG ? Pendant longtemps, le principal frein était la compatibilité limitée de WebP avec les navigateurs web, ce qui rendait complexe son adoption à grande échelle par les créateurs de sites internet et les développeurs web. Cette incompatibilité partielle obligeait souvent à doubler les formats d’images, augmentant ainsi la complexité technique et les coûts d’hébergement.
Aujourd’hui, cette situation a nettement évolué, facilitant grandement l’adoption du format WebP. Selon la ressource Can I Use, référence incontournable pour vérifier la compatibilité des navigateurs, tous les navigateurs modernes majeurs, y compris Chrome, Firefox, Edge, Opera et Safari, ainsi que leurs équivalents mobiles comme Chrome pour Android et Safari sur iOS, prennent désormais en charge pleinement le format WebP. Safari, longtemps réticent et considéré comme l’un des derniers obstacles majeurs à une adoption généralisée, a finalement intégré le support natif de WebP depuis la version 14, sortie fin 2020, marquant ainsi un tournant décisif dans l’histoire du format.
Grâce à cette compatibilité désormais universelle, WebP s’impose progressivement comme un standard incontournable pour l’optimisation des images web. Ce format permet non seulement une réduction significative des temps de chargement, un critère essentiel pour l’expérience utilisateur et le référencement, mais il contribue également à réduire les coûts liés à la bande passante et à améliorer la performance globale des sites web. Par conséquent, les webmasters et les professionnels du web sont encouragés à adopter pleinement WebP dans leurs projets afin d’offrir une expérience utilisateur optimale et compétitive sur tous les appareils et navigateurs.
Utilisation du WebP – avec JPEG/PNG comme solution de fallback
Ce n’est pas parce qu’Apple ne supporte pas WebP que vous ne devez pas utiliser le format. Il est possible de fournir des fichiers WebP aux visiteurs qui utilisent des navigateurs pris en charge tout en affichant les fichiers JPEG et PNG comme solution de secours pour les utilisateurs de vieux navigateurs.
De cette façon, plutôt que de livrer WebP à tous les utilisateurs et de risquer que les utilisateurs de certains vieux navigateurs voient des images cassées, vous pouvez vous assurer que tous les visiteurs de votre site voient vos images – tandis que les utilisateurs avec des navigateurs supportés obtiennent une expérience plus rapide.
Mais avant de décider d’utiliser ou non WebP sur votre site, il y a quelques points à garder à l’esprit.
Tout d’abord, sachez que Chrome est le navigateur le plus populaire avec environs 80% de part de marché en 2025. Il est donc fort probable que la plupart des visiteurs de votre site seront en mesure de visualiser toutes les images WebP sur votre site.
Et c’est aussi une très bonne idée de vérifier votre Google Analytics pour voir quels navigateurs vos visiteurs utilisent pour savoir s’il faut utiliser cette méthode, ou simplement afficher WebP sans aucune solution de repli.
Comment utiliser WebP avec WordPress
Voici un autre obstacle à l’utilisation de WebP : WordPress ne le supporte pas.
Bien que WordPress prenne en charge les formats de fichier image les plus populaires, notamment JPEG, PNG, GIF et ICO, il n’a pas encore ajouté WebP à cette liste. Cela signifie que vous ne pouvez pas simplement aller télécharger un fichier WebP dans votre médiathèque WordPress car vous obtiendrez une erreur de sécurité.
Ne vous inquiétez pas, vous pouvez toujours utiliser le format WebP sur votre site WordPress – il vous suffit d’utiliser un plugin.
Par exemple avec le plugin gratuit WebP Express plugin, vous pouvez servir des images WebP générées automatiquement aux navigateurs qui prennent en charge WebP, tout en continuant à servir des images JPEG/PNG aux utilisateurs Safari. Cette option fonctionne sur toutes les images de votre site, y compris celles de la médiathèque, des galeries et des thèmes.
La fonction Site Accelerator de Jetpack (anciennement connue sous le nom de Photon) convertit également automatiquement les JPEG et PNG au format d’image WebP.
De plus, vous pouvez également utiliser votre CDN. Les utilisateurs de Cloudflare sur les plans payants peuvent accéder à la fonctionnalité Polish du CDN, qui offre une conversion WebP automatique. Comme les autres solutions que j’ai mentionnées ci-dessus, Polish fonctionne en échangeant les images JPEG et PNG d’une page avec des versions WebP pour les navigateurs qui supportent ce type de fichier.
Pour les utilisateurs de WP Rocket, vous serez heureux d’apprendre que la prise en charge de WebP est sur la feuille de route pour la prochaine version de WP Rocket 3.3.
La prise en charge de WebP fait également partie du superbe plugin Imagify (du même auteur que WP Rocket)
Comparaison JPG/PNG vs WebP
L’équipe de performance Web de Google promet des images WebP sans perte qui sont 26 % plus petites que les images PNG et des images WebP avec perte de 25 à 34 % plus petites que les images JPEG. J’ai donc fait quelques tests comparatifs pour voir les différences de taille que l’on pouvait obtenir avec WebP.
Comparaison entre JPEG et WebP
Je télécharge six images JPEG aléatoires d’Unsplash, je les compresse (à une moyenne de 90% d’optimisation via OptimiZilla) pour voir quels types d’économies je peux obtenir, puis je convertis les images originales en WebP pour comparer.
| Nom | JPEG original | JPEG Compressé | WebP | Différence |
| Image1.jpg | 1,6 Mo | 1,5 Mo | 590,5 ko | 60% |
| Image2.jpg | 5,4 Mo | 4,7 Mo | 2,0 Mo | 57% |
| Image3.jpg | 6,6 Mo | 5,8 Mo | 2,3 Mo | 60% |
| Image4.jpg | 4,0 Mo | 3,7 Mo | 820,9 ko | 78% |
| Image5.jpg | 2,5 Mo | 2,3 Mo | 1,1 ko | 52% |
| Image6.jpg | 1,4 Mo | 1,3 Mo | 419,9 ko | 68% |
La conversion au WebP a entraîné une diminution moyenne de 50 % de la taille de l’image. Par contre il est possible d’augmenter l’optimisation des JPEG. Par exemple je passe par OptimiZilla qui choisit automatiquement un taux de compression pour les images et qui fait déjà des merveilles concernant l’optimisation du poids sans trop altérer la photo !
C’est pourquoi j’ai été pas mal surpris de voir la différence de taille entre les versions JPEG et WebP de l’image4 (mais le fond uni explique en grande partie cette différence de taille.
Comparaison entre PNG et WebP
Encore une fois, j’ai choisi six images au hasard, cette fois des fichiers PNG de freepngs.com. Je les ai compressées, puis j’ai converti les images originales en WebP pour les comparer.
| Nom | PNG original | PNG Compressé | WebP | Différence |
| Image1.png | 428,3 ko | 127,4 ko | 53,91 ko | 58% |
| Image2.png | 569,6 | 149 ko | 73,24 ko | 51% |
| Image3.png | 1,3 Mo | 328,9 ko | 109,51 ko | 68% |
| Image4.png | 415,5 ko | 112,4 ko | 94,57 ko | 16% |
| Image5.png | 1,2 Mo | 482,7 ko | 235,68 ko | 51% |
| Image6.png | 2,0 Mo | 491 ko | 164,01 ko | 66% |
Les plus grandes différences dans la taille des fichiers concernaient les images détaillées d’une plante à fleurs avec des feuilles et d’une photo d’Angelina Jolie (:p) (image3.png et image6.png, respectivement), tandis que la plus petite différence concernait celle de 2 guitares avec très peu de couleurs (image4.png).
Dans l’ensemble, la conversion de PNG en WebP a entraîné une diminution moyenne de 52 % de la taille des fichiers.
Conclusion
Le format d’image WebP continue de gagner en popularité grâce à ses performances exceptionnelles en matière d’optimisation pour le Web. Non seulement il remplace avantageusement les formats JPEG, PNG et même GIF avec des compressions avec ou sans perte très efficaces, mais il permet aussi d’obtenir des tailles de fichiers significativement réduites.
Toutefois, de nouveaux formats encore plus optimisés tels que AVIF et JPEG XL émergent, proposant des performances supérieures à WebP, avec une compression accrue et une qualité d’image préservée de manière impressionnante. Ces formats nouvelle génération représentent un avenir prometteur pour une expérience utilisateur toujours plus fluide et rapide.
Espérons que les plateformes telles que WordPress et Apple intégreront rapidement ces nouveaux standards afin de permettre aux utilisateurs d’en profiter pleinement. En attendant, je vous invite à explorer ces nouveaux formats et à envisager leur intégration sur votre site afin d’améliorer encore davantage votre performance web.
0 commentaire