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 !
L'archive HTTP montre que les images représentent en moyenne 64% de la taille totale d'une page Web. Dans cette optique, l'optimisation des images est cruciale, surtout si l'on considère que jusqu'à 40% des utilisateurs abandonnent une demande si elle n'est pas chargée dans les 3 secondes. Le problème de l'optimisation de l'image se pose lorsque les concepteurs souhaitent conserver des tailles de fichier d'image réduites sans sacrifier la qualité de l'image. Les tentatives précédentes pour créer de nouveaux types de fichiers image mieux optimisés que les formats standard JPEG, PNG et GIF n'ont pas abouti.
WebP est un type de fichier image créé en 2010 et actuellement en cours de développement par Google. Ce format d'image fournit une compression sans perte et sans perte aux images sur Internet. Plusieurs grands noms font campagne pour l'utilisation de WebP, notamment Google, Facebook et Ebay.
In Serveurgéré.it, nous expérimentons toujours des techniques qui améliorent les performances des sites Web pour nos clients, nous avons donc effectué des tests A/B pour comprendre l'impact de WebP sur la qualité de l'image et comment l'implémenter au mieux 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 travailler avec les images WebP dans WordPress, la solution la meilleure et la plus simple consiste à utiliser le plugin WebP Express.
WebP Express est un plugin gratuit qui produit des images moins de la moitié de la taille des JPEG. Dirigez JPEG et PNG vers un convertisseur d'image à convertir ou vers l'image déjà convertie. Cela fonctionne quelle que soit la manière dont les images sont arrivées sur le serveur. Il fonctionne avec la médiathèque, les galeries et pour 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 processus est généralement appelé masse en vrac et bien qu'actuellement présent sur la feuille de route, il n'est actuellement pas présent 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 paresseux suivants ont été testés et travailler 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 est exceptionnel, la page d'accueil à elle seule avait un poids de 90 MEGABYTE, et grâce à l'utilisation de webp nous sommes arrivés à "seulement" 25 mégaoctets avec une économie de données de plus de 3/4 du poids d'origine et une vitesse de chargement d'environ trois fois.
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.
