4 juillet 2019

Diminuer le poids d'un site web grâce à l'utilisation d'images WebP

Quel format d'image utiliser pour un site web ? Voici le meilleur choix.

Bannière Webp WordPress

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.

 

Vous avez des doutes ? Vous ne savez pas par où commencer ? Contactez-nous !

Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

Managed Server Srl est un acteur italien leader dans la fourniture de solutions système GNU/Linux avancées orientées vers la haute performance. Avec un modèle d'abonnement peu coûteux et prévisible, nous garantissons que nos clients ont accès à des technologies avancées en matière d'hébergement, de serveurs dédiés et de services cloud. En plus de cela, nous proposons des conseils système sur les systèmes Linux et une maintenance spécialisée en SGBD, sécurité informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'hébergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapté aux administrations publiques, aux PME et à toutes tailles.

Red Hat, Inc. détient les droits de Red Hat®, RHEL®, RedHat Linux® et CentOS® ; AlmaLinux™ est une marque commerciale d'AlmaLinux OS Foundation ; Rocky Linux® est une marque déposée de la Rocky Linux Foundation ; SUSE® est une marque déposée de SUSE LLC ; Canonical Ltd. détient les droits sur Ubuntu® ; Software in the Public Interest, Inc. détient les droits sur Debian® ; Linus Torvalds détient les droits sur Linux® ; FreeBSD® est une marque déposée de The FreeBSD Foundation ; NetBSD® est une marque déposée de la Fondation NetBSD ; OpenBSD® est une marque déposée de Theo de Raadt. Oracle Corporation détient les droits sur Oracle®, MySQL® et MyRocks® ; Percona® est une marque déposée de Percona LLC ; MariaDB® est une marque déposée de MariaDB Corporation Ab ; REDIS® est une marque déposée de Redis Labs Ltd. F5 Networks, Inc. détient les droits sur NGINX® et NGINX Plus® ; Varnish® est une marque déposée de Varnish Software AB. Adobe Inc. détient les droits sur Magento® ; PrestaShop® est une marque déposée de PrestaShop SA ; OpenCart® est une marque déposée d'OpenCart Limited. Automattic Inc. détient les droits sur WordPress®, WooCommerce® et JetPack® ; Open Source Matters, Inc. détient les droits sur Joomla® ; Dries Buytaert détient les droits sur Drupal®. Amazon Web Services, Inc. détient les droits sur AWS® ; Google LLC détient les droits sur Google Cloud™ et Chrome™ ; Microsoft Corporation détient les droits sur Microsoft®, Azure® et Internet Explorer® ; La Fondation Mozilla détient les droits sur Firefox®. Apache® est une marque déposée de The Apache Software Foundation ; PHP® est une marque déposée du groupe PHP. CloudFlare® est une marque déposée de Cloudflare, Inc. ; NETSCOUT® est une marque déposée de NETSCOUT Systems Inc. ; ElasticSearch®, LogStash® et Kibana® sont des marques déposées d'Elastic NV. Hetzner Online GmbH détient les droits sur Hetzner® ; OVHcloud est une marque déposée d'OVH Groupe SAS ; cPanel®, LLC détient les droits sur cPanel® ; Plesk® est une marque déposée de Plesk International GmbH ; Facebook, Inc. détient les droits sur Facebook®. Ce site n'est affilié, sponsorisé ou autrement associé à aucune des entités mentionnées ci-dessus et ne représente en aucune manière aucune de ces entités. Tous les droits sur les marques et noms de produits mentionnés sont la propriété de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionnées appartiennent à leurs titulaires. MANAGED SERVER® est une marque déposée au niveau européen par MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italie.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systèmes sans avoir à migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Retour en haut de page