Le format d'image WebP

WebP est un format d'image Open Source développé chez Google, qui promet de générer des images de plus petite taille par rapport aux formats JPG et PNG, tout en générant des images plus belles

introduction

WebP est un format d'image Open Source développé chez Google, qui promet de générer des images de plus petite taille par rapport aux formats JPG et PNG, tout en générant des images plus belles.

WebP prend en chargetransparence, comme les images PNG et GIF.

WebP prend en chargeanimations, comme les images GIF

Et, en utilisant WebP, vous pouvez définir le rapport de qualité de vos images, de sorte que vous décidez si vous souhaitez obtenir une meilleure qualité ou une taille plus petite (comme cela se produit dans les images JPG).

AlorsWebP peut faire toutes les images GIF, JPG et PNG, dans un format unique, et générezimages plus petites. Sonne comme une affaire.

Si vous souhaitez comparer l'apparence des images dans les différents formats,voici une superbe galerie de Google.

WebP n'est pasNouveau, il existe depuis plusieurs années maintenant.

Combien plus petit?

La prémisse de générer des images plus petites est très intéressante, en particulier si l'on considère que la plus grande partie de la taille d'une page Web est déterminée par la quantité et la taille des ressources d'image que l'utilisateur doit télécharger.

Google a publié unétude comparativesur les résultats de 1 million d'images avec ce résultat:

WebP réalise une compression globale plus élevée que JPEG ou JPEG 2000. Les gains de minimisation de la taille des fichiers sont particulièrement élevés pour les images plus petites qui sont les plus courantes sur le Web.

Vous devez expérimenter le type d'images que vous avez l'intention de diffuser et vous forger une opinion sur cette base.

Dans mes tests, la compression sans perte par rapport au PNG génère des images WebP 50% plus petites. PNG n'atteint cette taille de fichier que lors de l'utilisation de la compression avec perte.

Générer des images WebP

Tous les outils modernes d'édition graphique et d'image vous permettent d'exporter vers.webpdes dossiers.

Des outils de ligne de commande existent également pour convertir directement les images en WebP. Googlefournit un ensemble d'outilspour ça.

cwebpest l'utilitaire principal de ligne de commande pour convertir n'importe quelle image en.webp, utilisez-le avec

cwebp image.png -o image.webp

Découvrez toutes les options en utilisantcwebp -longhelp.

Prise en charge des navigateurs

WebP est actuellement pris en charge par

  • Chrome
  • Opéra
  • Opera Mini
  • Navigateur UC
  • Internet Samsung

Cependant, seuls Chrome for Desktop et Opera 19+ implémentent toutes les fonctionnalités de WebP, à savoir:

  • la compression avec perte
  • compression sans perte
  • transparence
  • animation

Les autres navigateurs implémentent uniquement un sous-ensemble. Safari et IE ne prennent pas du tout en charge WebP, et il n'y a aucun signe d'implémentation de WebP de sitôt dans ces navigateurs.

Mais Firefox prend en charge WebP depuis la version 65 (janvier 2019) et Edge depuis la version 18.

Donc, si nous pouvons offrir à ces utilisateurs une image optimisée, pour accélérer leur service et consommer moins de bande passante, c'est génial. Mais vérifiez si cela réduit réellement la taille de vos images.

Vérifiez les résultats de vos outils d'optimisation d'image JPG / PNG et voyez si l'ajout d'une couche supplémentaire de complexité introduite par WebP est utile ou non.

Comment pouvez-vous utiliser WebP aujourd'hui?

Il existe différentes manières de procéder.

Vous pouvez utiliser un mécanisme au niveau du serveur qui sert des images WebP au lieu de JPG et PNG lorsque leHTTP_ACCEPTl'en-tête de la demande contientimage/webp.

Le premier est le plus pratique, car totalement transparent pour vous et vos pages Web.

Une autre option consiste à utiliser Modernizr et à vérifier leModernizr.webpréglage.

Si vous n'avez pas besoin de prendre en charge Internet Explorer, un moyen très pratique consiste à utiliser le<picture>tag, qui est maintenantprise en chargepar tous les principaux navigateurs sauf Opera Mini et IE (toutes les versions).

Le<picture>La balise est généralement utilisée pour les images responsives, mais nous pouvons également l'utiliser pour WebP, carce tutoriel de HTML5 Rocksexplique.

Vous pouvez spécifier une liste d'images, et elles seront utilisées dans l'ordre, donc dans l'exemple suivant, les navigateurs qui prennent en charge WebP utiliseront la première image et se replieront sur JPG dans le cas contraire:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: