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.

La prise en charge des images sans perte et avec transparence a été annoncée en 2012, faisant de WebP une alternative au format PNG.

La compression avec perte de WebP utilise le codage prédictif pour coder une image – la même méthode utilisée par le codec vidéo VP8 pour compresser les images-clés dans les vidéos. Le codage prédictif fonctionne en utilisant les valeurs des blocs de pixels voisins pour prédire la valeur d’un bloc, puis ne code que la différence.

La compression sans perte de WebP utilise des fragments d’image déjà vus pour reconstruire de nouveaux pixels, et peut utiliser une palette locale si aucune correspondance n’est trouvée.

Comme vous pouvez le voir dans les exemples ci-dessous de la galerie WebP de Google, il n’y a pas de différence notable de qualité entre les images JPEG à gauche et les versions WebP à droite. Ce que vous ne voyez pas, à moins de vérifier la taille du fichier, c’est que les images WebP sont plus de 30% plus petites que les images 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, puisque WebP existe depuis huit ans maintenant, pourquoi n’est-il pas plus populaire ? Pourquoi utilisons-nous encore le JPEG et le PNG alors que WebP peut produire des fichiers de plus petite taille et de qualité comparable ?

Et bien, comme beaucoup de technologies sur le web qui ont du mal à trouver leurs marques, tous les navigateurs modernes ne supportent pas WebP. Selon Can i use…, les navigateurs qui prennent en charge WebP incluent Chrome, Opera, Opera, Opera Mini, le navigateur Android et Chrome pour Android.

Microsoft a annoncé qu’il prendrait en charge WebP dans son navigateur Edge en octobre dernier, et Mozilla a fait une annonce similaire peu après pour Firefox. Maintenant, c’est juste le Safari d’Apple qui traîne en arrière sans aucune compatibilité.

Après avoir d’abord manifesté son intérêt pour la prise en charge du format d’image lorsqu’il a ajouté la prise en charge WebP dans iOS 10 et MacOS Sierra, Apple l’a ensuite remplacée par HEIF, un format d’image basé sur la norme de compression vidéo HEVC (également connu sous les noms H.265 et MPEG-H Part 2).

Bien qu’il n’y ait eu aucune indication récente qu’Apple prendra en charge WebP à l’avenir, la société n’a pas vraiment le choix maintenant que tous les autres grands navigateurs et logiciels d’édition d’images le prennent en charge.

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 Safari.

De cette façon, plutôt que de livrer WebP à tous les utilisateurs et de risquer que les utilisateurs de Safari 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 64% de part de marché. 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 cette 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 de la feuille de route pour le plugin d’optimisation d’image Imagify.

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. Ci-dessous, vous pouvez voir les deux versions côte à côte. L’image JPEG à gauche est légèrement plus nette que l’image WebP à droite.

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 de fichier WebP continue de gagner en popularité et en support, et il y a beaucoup à gagner de ce format de fichier. Non seulement il peut remplacer les formats de fichiers JPEG et PNG (et GIF !) par une compression avec ou sans perte, mais i offre également des tailles de fichiers nettement plus petites.

Il n’y a vraiment aucun autre format d’image ou outil d’optimisation d’image pour le Web qui peut atteindre des tailles de fichier plus petites sans perte notable de qualité comme WebP le peut.

Espérons que nous verrons WordPress – et Apple – introduire la prise en charge de WebP à l’avenir. D’ici là, je vous encourage à expérimenter ce format de fichier et à consulter d’autres outils qui peuvent vous aider à servir des images WebP sur votre site WordPress.