Accélérez votre site Web avec WebP

(Ceci est une publication sponsorisée.) Passez suffisamment de temps à gérer les sites Web via PageSpeed ​​Insights et vous remarquerez que Google a un boeuf majeur avec les formats d'image traditionnels tels que JPG, PNG et même GIF.

Même si vous redimensionnez vos images en fonction des spécifications exactes de votre site Web et que vous les exécutez avec un compresseur, elles peuvent nuire aux performances et augmenter la consommation de bande passante. Pire encore, toute cette manipulation d'images peut compromettre la qualité obtenue.

Considérant l'importance des images pour la conception Web, nous ne pouvons pas en disposer aussi facilement, et nous ne pouvons pas nous permettre de gagner du temps pour les optimiser. . Alors, quelle est la solution?

Voici ce que Google suggère:

Il y a bien des années, Google avait pour objectif de mettre fin à ce problème en créant un format d'image de nouvelle génération appelé WebP. Dans cette capture d'écran de PageSpeed ​​Insights, vous pouvez constater que Google recommande l'utilisation de WebP et d'autres formats next-gen pour réduire considérablement la taille de vos images tout en préservant leur qualité.

Et si 0,75 seconde ne vous semble pas trop grave ( au moins dans cet exemple), cela pourrait faire une grande différence dans la vie de vos visiteurs, les gens assis là se demandant combien de temps il est trop long d’attendre. Une seconde de charge en moins pourrait faire toute la différence dans votre taux de conversion.

Mais WebP est-il la meilleure solution à ce problème? Aujourd'hui, nous allons examiner:

Qu'est-ce que WebP?

Google a développé WebP en 2010 après l'acquisition de la société On2 Technologies . On2 avait travaillé sur un certain nombre de technologies de compression vidéo, qui ont finalement servi de base au nouveau format audiovisuel de Google, WebM, et au format d'image WebP (next-gen), WebP.

À l'origine, WebP utilisait la compression avec perte pour tenter de créer des formats plus petits mais toujours élevés. Des images de haute qualité pour le Web.

Si 0,75 seconde ne vous semble pas beaucoup, cela pourrait faire une grande différence dans la vie de vos visiteurs, les personnes qui s’asseoiront là se demandant combien de temps il est trop long d’attendre.

Compression avec perte pour WebP

La compression avec perte est une forme de compression utilisée pour réduire considérablement la taille des fichiers JPG et GIF. Pour ce faire, certaines données (pixels) du fichier doivent être supprimées ou «perdues». Ceci, à son tour, conduit à une certaine dégradation de la qualité de l’image, bien que cela ne soit pas toujours perceptible.

WebP est entré dans l’image avec une utilisation beaucoup plus efficace de la compression avec perte (que j’expliquerai plus loin). successeur de JPG.

Vous pouvez voir une grande démonstration de cette différence lorsque KeyCDN compare la différence de taille de fichier d'un fichier JPG compressé à WebP :

Notez la différence significative en termes de taille de fichier, même après compression du fichier JPG avec une qualité comparable. Comme Adrian James l'explique ici vous devez toutefois faire attention à la compression Web P.

«Les paramètres de compression ne correspondent pas un à un avec JPEG. Ne vous attendez pas à ce qu'un JPEG de qualité 50% corresponde à un WebP de qualité 50%. La qualité baisse assez nettement sur l'échelle WebP, alors commencez avec une qualité élevée et réduisez-vous. "

Compte tenu de la réduction de la taille des fichiers avec WebP par rapport à JPG, elle ne devrait toutefois pas être trop difficile à gérer. point. Si vous envisagez de repousser les limites de ce que WebP peut faire encore plus loin, vous devez penser à cela.

Maintenant, avec le temps, Google a continué à développer la technologie WebP, au point de ne plus être supportée par la technologie WebP. Graphiques Web en vraies couleurs, mais aussi métadonnées XMP, profils de couleur, mosaïque, animation et transparence.

Finalement, Google a finalement introduit la compression sans perte dans WebP, ce qui en fait également un candidat viable pour PNG .

Compression sans perte pour WebP

La compression sans perte ne dégrade pas la qualité de l'image comme le fait une perte. Au lieu de cela, il réduit la taille des fichiers en supprimant les métadonnées en excès du backend du fichier. De cette façon, la qualité de l'image reste intacte tout en réduisant sa taille. Cela dit, la compression sans perte ne permet pas d'atteindre le type de fichier dont la taille peut être compressée.

Jusqu'à la compression sans perte de WebP.

Vous pouvez voir quelques beaux exemples de la manière dont la compression avec perte de WebP résiste à PNG. in Galeries WebP de Google :

Toute dégradation de la qualité des images WebP sera à peine perceptible par vos visiteurs. La seule chose qu’ils remarqueront vraiment est la rapidité avec laquelle votre site se charge.

Quels sont les avantages de l’utilisation de WebP?

Il n’est pas suffisant de dire que WebP est «meilleur» que JPG et PNG. Il est important de comprendre les mécanismes de fonctionnement de WebP et pourquoi il est si avantageux de l'utiliser par rapport à d'autres formats de fichier.

Avec les formats d'image traditionnels, la compression entraîne toujours un compromis.

La compression avec perte en JPG entraîne la dégradation de la clarté et la finesse d'une image. Une fois appliquée, elle ne peut plus être inversée.

Par ailleurs, la compression avec perte WebP utilise ce que l’on appelle le codage par prédiction pour ajuster plus précisément les pixels d’une image. Comme l'explique Google, d'autres facteurs sont également à l'œuvre :

«La quantification adaptative en blocs fait également une grande différence. Le filtrage aide aux débits binaires moyens / bas. Le codage arithmétique booléen procure des gains de compression de 5% à 10% par rapport au codage de Huffman. ”

En moyenne, Google estime que la compression avec perte WebP produit des fichiers dont la taille est inférieure de 25% à 34% à celle de fichiers JPG de même qualité. .

La compression sans perte PNG, quant à elle, fonctionne bien pour maintenir la qualité d’une image, mais elle n’a pas un impact aussi important sur la taille de l’image que son homologue JPG. Et certainement pas par rapport à WebP.

WebP gère ce type de compression plus efficacement. Cela est dû à la variété des techniques de compression utilisées ainsi qu'au codage par entropie appliqué aux images. Là encore, Google explique son fonctionnement:

"Les transformations appliquées à l'image incluent la prédiction spatiale des pixels, la transformation de l'espace colorimétrique, l'utilisation de palettes émergentes localisées, la compression de plusieurs pixels en un pixel et le remplacement alpha."

En moyenne, Google estime que la compression WebP sans perte donne des fichiers environ 26% moins volumineux que des fichiers PNG de même qualité.

Ce n'est pas tout. WebP a la capacité de faire quelque chose qu'aucun autre format de fichier ne peut faire. Les concepteurs peuvent utiliser le codage avec perte WebP sur les couleurs RVB et le codage sans perte sur les images avec arrière-plans transparents (canal alpha).

Les images animées, autrement gérées au format GIF, bénéficient également des systèmes de compression WebP. Cela s'explique par un certain nombre de raisons:

Grâce à ce puissant combo de compression sans perte et avec perte, les vidéos animées peuvent atteindre des tailles beaucoup plus réduites que leurs homologues GIF.

Google estime que la réduction moyenne est d'environ 64% de la taille initiale d'un fichier GIF avec une compression avec perte et de 19% avec une utilisation sans perte.

Inutile de dire que rien ne peut battre WebP en termes de vitesse maintien de l'intégrité de l'image.

Acceptation de WebP parmi les navigateurs, les appareils et les CMS

Comme vous pouvez l'imaginer, lorsque WebP a été lancé pour la première fois, il était uniquement pris en charge par les navigateurs et les appareils de Google. Cependant, au fil du temps, d’autres plateformes ont commencé à prendre en charge les images WebP.

Cela dit, WebP n’a toujours pas de prise en charge universelle ce qui peut poser problème aux concepteurs Web utilisant ce format d’image par

Voyons où vous pouvez vous attendre à une acceptation totale de vos images WebP, où vous ne le ferez pas et ensuite, nous discuterons de ce que vous pouvez faire pour contourner ce problème et vous permettre de le surmonter.

2019, Puis-je utiliser… représente les plates-formes prenant en charge WebP:

Les dernières versions des plates-formes suivantes sont prises en charge:

• Edge
• Firefox
• Chrome
• Opera
• Opera Mini
• Navigateur Android
• Opera Mobile
• Chrome pour Android
• Firefox pour Android
• Navigateur UC pour Android
• Samsung Internet
• Navigateur QQ
• 19659071] Navigateur Baidu

Les plates-formes qui continuent de freiner le support sont les suivantes:

• Internet Explorer
• Safari
• iOS Safari
• KaiOS Browser

Les navigateurs à la pointe de la technologie ne sont pas les seuls à parler du WebP . Les logiciels de retouche d'images et les systèmes de gestion de contenu sont également compatibles.

ImageMagick Pixelmator et GIMP prennent tous en charge WebP, par exemple. Sketch permet aux utilisateurs d'exporter des fichiers au format WebP. Et pour les logiciels qui ne supportent pas nativement WebP, comme Photoshop, les utilisateurs peuvent généralement installer un plug-in qui leur permettra d’ouvrir et de sauvegarder des fichiers en tant que WebP.

Les systèmes de gestion de contenu se trouvent à un emplacement similaire. Certains ont pris l'initiative de transférer leurs utilisateurs vers WebP, qu'ils aient téléchargé leurs fichiers dans ce format ou non. Shopify et Wix sont deux constructeurs de sites qui convertissent et servent automatiquement les images au format WebP.

Bien que d'autres plates-formes ne prennent pas nativement en charge WebP, il existe généralement des extensions ou plugins que vous pouvez utiliser pour télécharger des images WebP ou convertir celles téléchargées dans ce format next-gen.

WordPress est l'une de ces plates-formes. Drupal est un autre CMS populaire offrant aux utilisateurs des modules WebP qui prennent en charge WebP. Magento en est un autre exemple.

Il est assez rare de ne pas trouver de support supplémentaire pour WebP. Le seul exemple que je connaisse qui ne l'accepte pas est Squarespace .

Les défis de la conversion et de la livraison de WebP

D'accord, WebP ne dispose donc pas d'un support à 100% sur le Web. . Pas encore en tout cas. C'est bon. La plupart du temps, nous avons une solution pour ajouter du support aux outils que nous utilisons pour concevoir et créer des sites Web.

Mais que faisons-nous à propos du navigateur? Si nos visiteurs se présentent sur un périphérique iOS, comment pouvons-nous nous assurer qu'ils reçoivent toujours une image si notre image par défaut est WebP?

Tout d'abord, vous devez savoir comment convertir des images en WebP.

L'année dernière , le développeur front-end Jeremy Wagner a rédigé un guide pour Smashing Magazine sur ce sujet même. Il y explique comment convertir WebP en utilisant:

• Sketch,
• Photoshop,
• La ligne de commande,
• Bash,
• Node.js,
• gulp,
• ,
• webpack.

Chacune de ces options vous aidera à convertir vos PNG et JPG en WebP. Votre logiciel de retouche d'images ne vous conduira cependant qu'à mi-parcours de votre destination.

Il gérera la conversion, mais cela ne vous aidera pas à modifier votre serveur d'origine afin qu'il sache quand livrer des WebP et quand livrer une image traditionnelle. format pour les visiteurs.

Certaines de ces méthodes vous permettent de dicter la manière dont votre serveur diffuse des images en fonction des contraintes imposées par les navigateurs de vos visiteurs. Néanmoins, il faut un peu de travail pour modifier les serveurs d'origine pour que cela se produise. KeyCDN a une solution si vous ne le faites pas ou si vous ne voulez pas vous en occuper.

La solution: simplifier la livraison WebP avec KeyCDN

KeyCDN comprend à quel point c'est important d'avoir un site Web qui se charge à une vitesse fulgurante. C’est ce que KeyCDN est dans l’entreprise à faire. C'est pourquoi il n'est pas surprenant qu'elle ait développé une solution intégrée de mise en cache WebP et de traitement d'image qui aide les développeurs à fournir plus facilement les formats de fichier appropriés aux visiteurs.

Qu'est-ce que la mise en cache WebP?

La mise en cache fait partie intégrante de la conservation des données. le site web tourne vite. Et la mise en cache WebP ne fera que le rendre meilleur. C’est essentiellement une forme de négociation de contenu qui se déroule dans l’en-tête HTTP.

Il fonctionne comme suit:

Une personne visite un site Web sur lequel la mise en cache WebP de KeyCDN est activée. Le navigateur du visiteur envoie un en-tête HTTP accept au serveur avec la liste des types d’actifs qu’il préfère. Mais au lieu d'aller sur le serveur d'origine (sur l'hôte Web), la demande est traitée par le serveur de périphérie (sur KeyCDN). Le serveur Edge examine la liste des types de fichiers acceptés et envoie un en-tête content-type en réponse.

Voici un exemple de ce à quoi cela pourrait ressembler:

 curl -I 'https: // ip .keycdn.com / example.jpg '-H' accepte: image / webp '
HTTP / 2 200
serveur: keycdn-engine
date: jeu., 06 juin 2019 08:29:50 GMT
type de contenu: image / webp
contenu-longueur: 56734
Dernière modification: mar, 14 mai 2019 23:36:28 GMT
etag: "5cdb50fc-1040a"
expire le jeu. 13 juin 2019 08:29:50 GMT
cache-control: max-age = 604800
x-ip: 1
x-ip-info: osz = 56734 odim = 700x467 ofmt = webp
x-cache: HIT
x-shield: actif
emplacement x-edge: chzh
accès-contrôle-autoriser-origine: *
accept-gammes: octets

Exemple de requête de type de contenu envoyée par KeyCDN aux navigateurs acceptant WebP. (Source: KeyCDN )

Ainsi, pour les visiteurs de Google Chrome, le type de contenu : image / webp serait automatiquement accepté et les éléments WebP en cache seraient livrés.

Par contre, pour les utilisateurs de Safari, la requête serait refusée. Mais ça va. Votre CDN saura quel format de fichier envoyer à la place. Dans la première ligne de l'exemple ci-dessus, vous pouvez voir que le format de l'image d'origine est JPG, ce qui correspond à la version du fichier qui serait livré.

Comme vous pouvez le constater, il n'est pas nécessaire de modifier le serveur d'origine ni de préparer plusieurs versions de vos fichiers afin de prendre en compte la compatibilité WebP. La mise en cache WebP KeyCDN gère tout cela.

Comment utiliser la mise en cache WebP KeyCDN?

Les utilisateurs de KeyCDN peuvent tirer parti de la fonctionnalité de mise en cache WebP.

Traitement d'image par KeyCDN

d’abord, il suffit de basculer un commutateur et d’allumer le traitement d’image de KeyCDN . Une fois activé, l'en-tête de demande accept sera automatiquement chargé.

Vous pouvez bien entendu utiliser le service de traitement d'image pour plus que la mise en cache WebP. Vous pouvez l'utiliser pour ajuster la taille, le recadrage, la rotation, le flou et d'autres attributs physiques des images livrées. Mais si vous essayez de simplifier votre système de livraison d'images et que vous voulez simplement accélérer les choses avec WebP, activez simplement la fonctionnalité et laissez KeyCDN faire le travail.

WebP Caching Your Origin Server

Disons que vous avez généré. vos propres ressources d'image WebP. Vous pouvez toujours profiter des avantages de la solution de mise en cache WebP de KeyCDN.

Pour ce faire, vous devez générer correctement vos WebP. Encore une fois, voici un lien vers le guide qui vous explique comment faire cela.

Il vous appartient ensuite de configurer votre serveur d'origine afin qu'il ne délivre des WebP que lorsque accepte: image / webp est présent. KeyCDN donne quelques exemples de la manière dont vous allez procéder avec Nginx:

 # http config block
map $ http_accept $ webp_ext {
    défaut "";
    "~ * webp" ".webp";
}

# bloc de configuration du serveur
emplacement ~ * ^ (/ chemin / vers / votre / images /.+) . (png | jpg) $ {
    set $ img_path $ 1;
    add_header Vary Accepter;
    try_files $ img_path $ webp_ext $ uri = 404;
}

KeyCDN montre comment vous pouvez modifier le serveur d'origine avec Nginx pour fournir vos propres actifs WebP en cache. (Source: KeyCDN )

Et avec Apache:

 
    RewriteEngine On
    RewriteCond% {HTTP_ACCEPT} image / webp
    RewriteCond% {DOCUMENT_ROOT} / $ 1.webp -f
    RewriteRule ^ (chemin / vers / votre / images. +) . (Jpe? G | png) $ $ 1.webp [T=image/webp,E=accept:1]



     En-tête append Vary Accepter Env = REDIRECT_accept


AddType image / webp .webp

KeyCDN montre comment vous pouvez modifier le serveur d'origine avec Apache pour fournir vos propres actifs WebP en cache. (Source: KeyCDN )

De toute évidence, cette option vous donne davantage de contrôle sur la gestion de vos formats d’image et sur la manière dont ils sont servis aux visiteurs. Cela dit, si vous débutez dans WebP, la meilleure solution de cache et de traitement d'images WebP de KeyCDN est probablement votre meilleur choix.

Une alternative pour WordPress et les concepteurs de Magento

Si vous concevez des sites Web sous WordPress ou Magento, KeyCDN propose des plugins. vous pouvez utiliser pour ajouter la prise en charge de WebP et la mise en cache.

Pour WordPress, vous utiliserez le module d'activation de cache personnalisé de KeyCDN avec Optimus .

Cache Enabler ) ( Grand aperçu )

Cache Enabler vérifie si vos images possèdent une version WebP. S’il existe et que le navigateur du visiteur le prend en charge, c’est ce qu’il va fournir dans le fichier mis en cache. S'il n'existe pas, il se tournera simplement vers le format JPG, PNG ou GIF existant.

Les développeurs de Magento proposent également une solution de contournement simplifiée pour la conversion et la fourniture de WebP. Tout d’abord, vous devrez installer l’extension Webp . Ensuite, vous devrez configurer les fichiers binaires WebP sur votre serveur.

Conclusion

Il y a une raison pour laquelle Google s'est donné la peine de développer un nouveau format d'image et pourquoi de plus en plus de navigateurs, de systèmes de conception et de gestion de contenu.

Les images peuvent causer beaucoup de problèmes à des sites Web conçus pour être maigres et méchants. Si elles ne sont pas téléchargées à la taille voulue, si elles ne sont pas compressées et si la mise en cache n'est pas activée, vos images peuvent être la raison pour laquelle la vitesse de votre site Web éloigne les visiteurs.

Mais avec WebP, votre site Web est Assurez-vous de charger plus rapidement. De plus, il n’est pas nécessaire de faire un compromis entre qualité d’image (ou quantité!) Pour gagner en rapidité. WebP compresse efficacement les fichiers tout en préservant l'intégrité du contenu de l'image.

Si vous avez vraiment du mal à augmenter la vitesse de votre site Web, alors WebP devrait être le prochain outil vers lequel vous auriez besoin d'aide.

(ms, ra, il)