Guide complet d'utilisation du format d'image WebP

WebP, ou officieusement prononcé comme Weppy, est un format d'image introduit par Google Developers il y a environ 5 ans. Si vous êtes un concepteur de sites Web ou un développeur qui s'efforce de réduire et d'optimiser la taille de son fichier image, ce dont WebP est capable devrait vous faire sourire..

En résumé, voici quelques informations importantes à propos de ce format d'image pas si nouveau, mais toujours aussi cool:

• WebP passe par l'extension de fichier .webp.
• WebP adopte à la fois une compression avec perte et sans perte.
• Les images avec perte WebP sont potentiellement 25 à 34% plus petit que JPEG.
• Les images sans perte WebP sont potentiellement 25% plus petit que le PNG.
• WebP prend en charge la transparence sans perte, à savoir PNG avec canal alpha.
• WebP prend en charge l'animation. c'est-à-dire des GIF animés.

En résumé, WebP est capable de réduire considérablement la taille des fichiers image JPEG, GIF, PNG. Voici un rappel sur WebP que vous devriez vérifier avant de passer aux choses amusantes..

Une expérience

La meilleure chose à propos des revendications sur le Web est que nous pouvons toujours faire des expériences pour vérifier la véracité et l'authenticité. Voici quelques expériences que j'ai faites pour le découvrir quelle petite image peut potentiellement devenir après leur conversion de divers formats d'image (JPEG, PNG et GIF) en WebP.

1. JPEG - Image avec pertes

Voici une image JPEG aléatoire que j'ai obtenue de Pexels. Taille de fichier d'origine - 165 Ko. ↓

L'image est optimisée avec JpegMini. Nouvelle taille de fichier - 101kb. ↓

Enfin, la même image est convertie au format WebP. Taille de fichier finale - 70 Ko. ↓

Sur une note de côté: Voici les différentes tailles de fichiers si la même image a été convertie aux formats suivants:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - Image sans perte

Essayons maintenant avec PNG avec transparence. (La source). Taille de fichier d'origine - 587kb. ↓

Voici l'image optimisée avec tinypng. Nouvelle taille de fichier - 278kb. ↓

Et enfin, l'image convertie au format WebP. Taille de fichier finale - 112 Ko. ↓

3. GIF animé

Lors de la conversion en WebP, une image JPEG est passée de 165 Ko à 70 Ko, tandis qu'une image PNG est passée de 587 Ko à 112 Ko..

Voyons comment se comportent les GIF animés:

• Taille de fichier originale - 6.8mb
• Taille de fichier WebP - 6.3mb

Résumé:

Voici un tableau pour résumer l'expérience entière:

	Lossy (JPG)	Sans perte (PNG)	GIF animé
Original	165 Ko	587kb	6,8 Mo
Optimisé avec des outils	101kb	278kb	-
Format WebP	70 Ko	112 Ko	6,3 Mo

Sans s'attarder beaucoup sur les calculs mathématiques, ces chiffres indiquent une réduction substantielle de la taille des fichiers et, à en juger par les images, il est impossible de faire la différence en termes de clarté et de résolution. Des fichiers plus petits et plus légers avec le même niveau de qualité d'image, WebP vaut définitivement la peine d'être examiné.

Conversion en WebP avec des outils

Si vous êtes déjà à bord et que vous souhaitez commencer à publier des images au format WebP, voyons de plus près comment vous pouvez convertir facilement vos images en ce format. Toutes les méthodes mentionnées ci-dessous varient en termes de contrôle, de facilité d'utilisation et de convinience. Choisissez votre poison.

WebPonize pour Mac

WebPonize est probablement le moyen le plus simple et le plus rapide de convertir des images au format WebP sur Mac. Tout ce que vous avez à faire est simplement de faire glisser vos images dans WebPonize et la conversion s’effectue. Vous recevrez la sortie, l'avant-taille, l'après-taille et le% de réduction du fichier d'origine. [Télécharger WebPonize]

Webpconv pour les fenêtres

Si vous utilisez Windows, Webpconv est l'application à installer. Il vient également en version portable afin que vous puissiez l'exécuter indépendamment sur votre clé USB. [Télécharger Webconv]

Conversion avec des lignes de commande

Si vous vous sentez geek, vous voudrez probablement exécuter la conversion en utilisant des lignes de commande.. cwebp convertit vos images JPEG, PNG ou TIFF au format WebP et Dwebp les reconvertit au format PNG. Voyons comment cela fonctionne.

Remarque: Le guide suivant le guide pour Mac OS X. Pour les utilisateurs Windows et Linux, cliquez ici..

Configuration de MacPorts sur Mac OSX

Tout d'abord, assurez-vous que Xcode est installé, puis suivez ces étapes:

1. Téléchargez et installez MacPorts. Si MacPorts est déjà installé sur votre Mac, passez à l'étape 2..
2. lancement Terminal.
3. Type "sudo port selfupdate"et appuyez sur Entrée. Ceci mettra à jour votre MacPorts à la dernière version..

   

4. Ensuite, tapez "port sudo installer webp"et appuyez sur Entrée. Cela installera libwebp (Bibliothèque WebP).

   

C'est tout. Voyons maintenant Comment convertir des images en WebP en ligne de commande.

Commandes à convertir / inverser

Voici les commandes à:

I - Convertir des fichiers image JPEG / PNG au format WebP

Format: cwebp -q [qualité_image] [nom du fichier JPEG / PNG] -o [nom du fichier WebP]

Exemple:

cwebp -q 80 exemple.png -o exemple.webp 

II - Les images cachées WebP sont retournées au format PNG

Format: dwebp [nom_fichier_WebP] -o [nom_fichier PNG]

Exemple:

dwebp image.webp -o image.png 

Plus: Si vous effectuez des conversions par d'autres moyens, voici des instructions pour utiliser les tâches Grunt et Gulp afin de convertir des fichiers JPG / PNG en WebP.

Convertir avec des outils en ligne

Si vous ne souhaitez installer aucune application sur votre système d'exploitation pour effectuer cette tâche, optez plutôt pour ces outils en ligne. En voici quelques-unes que j'ai appris à connaître:

• Convertisseur en ligne.com
• Webp-convertor.com
• Zamzar

Pointe: Si vous google convertir webp en ligne , vous trouverez probablement plus d'options.

Plugin Photoshop

Vous serez peut-être heureux de savoir qu’il existe également un plug-in Photoshop permettant d’enregistrer des images au format WebP via Photoshop. Ce plugin prend en charge Mac OS X (CS 2- CS 6) et Windows (32 bits et 64 bits). [Téléchargez le plugin ici.]

Remarque: Je pensais juste que vous devriez savoir que je l'avais essayé sur Photoshop CC. N'a pas travaillé là.

Prise en charge du navigateur WebP

Enfin, parlons de compatibilité. Actuellement, vous pouvez afficher des images au format WebP sur les navigateurs suivants (ref):

• Chrome / Chrome pour iOS
• Opéra / Opéra Mini

Pas tellement de chance pour FireFox et Safari, qui ne supporte toujours pas le format WebP en natif. Cependant, vous pouvez utiliser la bibliothèque Javascript WebPJS pour convertir des images WebP en chaîne dataURI sur le site client.

Revenir à d'autres formats d'image

C'est toujours une bonne idée d'utiliser une solution de repli pour éviter d'afficher des erreurs d'image dues à des navigateurs non pris en charge. Dans ce cas, le repli sera sur l'image au format JPG ou PNG. Voici comment vous le faites.

  source srcset = "exemple.webp 1x" type = "image / webp">   

Pour ce code, images / guide complet pour l'utilisation de webp-image-format_13.jpg sera chargé si l'utilisateur a utilisé Firefox ou Safari.

Prévisualisation des images WebP

Vous pouvez prévisualiser les images WebP sur les navigateurs Chrome et Opera. Mais si vous voulez le faire localement sur votre machine, vous aurez besoin de quelques outils.

Les utilisateurs Mac peuvent utiliser WebPQuickLook pour prévisualiser des images au format WebP à l'aide de la fonction Aperçu (avec l'image sélectionnée ou mise en surbrillance, appuyez sur la barre d'espacement)..

Pour les utilisateurs Windows, WebPCodec affiche un aperçu miniature des images WebP dans l'explorateur de fichiers. Les équivalents WebP et JPEG seront affichés. Sur certains systèmes d’exploitation Windows pris en charge (Vista, 7, 8), l’image WebP peut également être affichée sur le visualiseur de photos Windows..

Plus: ReSCR.it fournit des images au format WeBP automatiquement et est disponible si vous stockez vos images avec MaxCDN. (Lire la suite)

Autres références

• Conversion de GIF animé en WebP
• Comment fonctionne WebP
• Déploiement de WebP via Accepter la négociation de contenu
• Web plus rapide, plus petit et plus beau avec WebP
• Déploiement de nouveaux formats d'image sur le Web
• Documentation API WebP