Table des matières de l'article :
On dit qu'une image vaut mille mots, mais en ligne, une image peut valoir mille kilo-octets ou plus !
Les archives HTTP montrent que les images représentent en moyenne 64 % de la taille totale d'une page web. De ce fait, l'optimisation des images est cruciale, d'autant plus que jusqu'à 40 % des utilisateurs abandonnent une requête si la page ne se charge pas en moins de 3 secondes . Le problème de l'optimisation des images se pose lorsque les concepteurs souhaitent réduire la taille des fichiers image sans compromettre leur qualité. Les tentatives précédentes de créer de nouveaux formats d'image mieux optimisés que les formats JPEG, PNG et GIF standards ont été infructueuses.
WebP est un format de fichier image créé en 2010 et actuellement développé par Google. Ce format offre une compression sans perte pour les images sur Internet. Plusieurs grandes entreprises, notamment Google, Facebook et eBay, militent pour son utilisation.
Chez Managedserver.it , nous expérimentons constamment des techniques pour améliorer les performances des sites web de nos clients. Nous avons donc réalisé des tests A/B pour comprendre l'impact du WebP sur la qualité des images et la meilleure façon de l'intégrer dans les projets de nos clients.
L'une des principales raisons pour lesquelles nous avons envisagé d'utiliser WebP est la petite taille des fichiers.
D'après Google en effet :
- Les fichiers image sans perte de WebP sont 26% plus petits que les PNG.
- Les fichiers d'images WebP avec perte sont 25 à 34 % plus petits que les images JPEG avec un index SSIM équivalent.
- WebP prend en charge la transparence sans perte (également appelée canal alpha) avec seulement 22% d'octets en plus.
Bref, actuellement la solution la plus performante pour les images sur le Web comme le montre ce graphique.
Prise en charge du navigateur
La prise en charge actuelle du navigateur pour WebP a encore du chemin à parcourir. Caniuse.com montre la prise en charge de Chrome et Opera avec Firefox annonçant qu'ils travailleront sur la prise en charge de WebP à l'avenir, mais c'est une discussion qui dure depuis un certain temps.
A la rigueur, fournir correctement le bon format nécessite une expertise en hébergement car il doit être capable de déterminer le navigateur du visiteur naviguant sur le site et de fournir sous condition le bon format d'image.
En effet, si cette étape n'est pas effectuée correctement, le navigateur ne pourra pas charger correctement les images, produisant un résultat de chargement d'image et ne montrant pas l'image au visiteur final.
Utiliser des images WebP dans WordPress
Pour bien gérer les images WebP dans WordPress, la meilleure et la plus simple solution consiste à utiliser le plugin WebP Express.
WebP Express est une extension gratuite qui génère des images deux fois plus petites que les JPEG. Elle permet de convertir les fichiers JPEG et PNG en les envoyant directement à un convertisseur d'images ou directement à l'image convertie. Son fonctionnement est indépendant du format d'origine des images sur le serveur. Elle est compatible avec les bibliothèques multimédias, les galeries et les images thématiques référencées par CSS.
Il ne fonctionne pas avec le serveur Microsoft IIS, et n'a pas été testé avec une installation multi-sites mais il fonctionne très bien avec les WebServers comme Apache, LiteSpeed, NGINX en ajoutant les règles de réécriture nécessaires ou au niveau .htaccess pour Apache et LiteSpeed ou dans le fichier de configuration de NGINX.
Il nécessite certains paramètres pour les méthodes de conversion, mais vous avez le choix entre plusieurs. Les images utiliseront d'abord la méthode de conversion en haut, et si cela échoue, elle se déplacera dans la liste jusqu'à ce qu'elle trouve une méthode qui fonctionne avec l'image. Vous pouvez les faire glisser et les déposer dans l'ordre dans lequel vous souhaitez qu'ils soient utilisés.
Le plugin utilise la bibliothèque WebP Convert pour convertir des images en webp.
WebP Convert est capable de convertir des images en utilisant plusieurs méthodes. Il existe des méthodes de conversion "locales": cwebp, gd, imagick. Si aucune de ces méthodes ne fonctionne sur votre hébergeur, il existe des alternatives cloud : ewwww (payant) ou connexion à un site WordPress sur lequel vous avez installé WebP Express et activé la fonctionnalité "service web".
Le plugin prend en charge plusieurs manières de fournir des webps aux navigateurs qui le prennent en charge :
- En acheminant les images jpeg/png vers le webp - ou le convertisseur d'image correspondant si l'image n'a pas encore été convertie.
- En modifiant le HTML, en remplaçant les balises d'image par des balises d'image. Les pages Web manquantes sont automatiquement générées lors de la visite.
- En modifiant le HTML, en remplaçant les URL des images pour que tout pointe vers webp. Les substitutions sont effectuées uniquement pour les navigateurs prenant en charge webp. Encore une fois, les webps manquants sont automatiquement générés lors de la visite.
- En combinaison avec Cache Enabler, le même résultat que ci-dessus peut être obtenu, mais avec le cache de page.
- Il peut également fournir webp à tous les navigateurs et ajouter webpjs javascript, qui prend en charge webp pour les navigateurs qui ne prennent pas en charge webp nativement.
Quelques limitations de WebP Express
Masse en vrac d'images
L'une des "limites" de WebP Express est qu'il est difficile à utiliser lorsqu'il s'agit de blogs qui fonctionnent depuis de nombreuses années et contiennent des centaines de milliers ou des millions d'images. Le processus de génération d'images Batch n'est en effet pas efficace et étant géré côté navigateur, il ne permet souvent pas une gestion efficace de la recompression de toutes les ressources sans un redémarrage manuel continu de l'opération de recompression.
Ce procédé est généralement appelé « production en masse » et, bien qu'il figure actuellement dans la feuille de route, il n'est pas encore disponible nativement.
Lazy Load ne fonctionne pas avec certains plugins
Le moyen le plus courant de chargement paresseux consiste à définir un attribut data-src sur l'image et à laisser javascript utiliser cette valeur pour définir l'attribut src. Cette méthode fonctionne, car la demande d'image, vue du côté serveur, ne peut être distinguée de toute autre demande d'image. Cependant, il se peut qu'une obscure implémentation de lazy load charge l'image avec une requête XHR. Dans ce cas, l'en-tête Accept ne contiendra pas 'image / webp', mais '/', et un jpeg sera servi, même si le navigateur supporte webp.
Les plugins et frameworks de chargement différé suivants ont été testés et fonctionnent avec WebP Express :
Un cas réel de site internet d'agence de photographie
Pour mieux comprendre les possibilités et l'importance du format graphique webp, nous avons voulu le démontrer sur le terrain avec l'optimisation d'un site internet d'une agence photo spécialisée dans les mariages avec un portfolio de plus de 70 Gigaoctets de photos et d'images jpeg.
Comme leur travail photographique était exceptionnel, la page d'accueil à elle seule pesait la somme astronomique de 90 mégaoctets , et grâce à l'utilisation du format WebP, nous sommes parvenus à « seulement » 25 mégaoctets, soit une économie de données de plus des trois quarts du poids d'origine et une vitesse de chargement environ trois fois supérieure.
N'hésitez pas à mettre la vidéo ci-dessous en plein écran pour comprendre comment vous pouvez économiser 75% du poids des images sans compromettre la qualité de celles-ci.
conclusion
Il ne semble donc plus aucune raison de ne pas utiliser WebP de nos jours, sachant qu'avoir un poids considérablement réduit d'une page web et de ses ressources multimédia ne peut être bénéfique que sur les connexions lentes et les appareils mobiles.
