Conversion d'images en WebP

Dans cet extrait de son eBook " The WebP Manual ," développeur et auteur Jeremy Wagner vous montrera les nombreuses façons de convertir votre existant images au format WebP. Voir la table des matières .

Pour utiliser WebP, vous devez d'abord convertir vos images existantes au format. Cela peut être réalisé de multiples façons, depuis l'exportation de votre programme de conception préféré vers les services cloud, en passant par l'encodeur cwebp officiel et même dans les systèmes de construction basés sur Node.js. Ici, nous allons couvrir toutes les avenues.

Esquisse

Sketch est capable d'exporter nativement n'importe quelle ressource dans un document de conception vers WebP. Pour exporter une image vers WebP, sélectionnez une ressource sur le canevas, ouvrez le panneau Exporter sur le côté droit et choisissez "WEBP" dans le menu déroulant de format.

Après avoir effectué votre sélection, cliquez sur le bouton Export Bitmap … . La boîte de dialogue qui en résulte vous demandera de façon prévisible où vous voulez exporter l'image. Dans cette boîte de dialogue, un curseur apparaît en bas qui vous invite à spécifier la qualité de l'image WebP de 0 à 100, ce qui implique que la sortie est WebP avec perte.

Si vous utilisez un logiciel de conception pour exporter vers WebP, Sketch est probablement l'un des programmes les plus faciles à utiliser. Bien que, y ait d'autres programmes capables de faire cela, comme Photoshop.

Photoshop

L'exportation d'images vers WebP dans Photoshop est possible, mais n'est pas aussi pratique que dans Sketch. Vous devrez compter sur un plug-in pour faire le travail. La bonne nouvelle, cependant, est que le plug-in Photoshop vous donne un peu plus de flexibilité que Sketch. Pour obtenir le plug-in Photoshop permettant d'exporter des images WebP, visitez le site Telegraphics et récupérez la version correspondant à votre système. Une fois installé, démarrez Photoshop et ouvrez une image. Une fois ouvert, vous pouvez exporter une image vers WebP via la boîte de dialogue Enregistrer sous … . Au bas de la boîte de dialogue où vous choisissez un format, vous remarquerez deux options: WebP et WebP Lossless.

Ce qui se passe d'ici dépend de ce que vous choisissez dans la liste déroulante. Si vous choisissez WebP Lossless, le fichier sera exporté, et ce sera le cas. Si vous choisissez WebP, une boîte de dialogue avec plusieurs options de configuration vous sera présentée:

Dans la plupart des cas, vous ajusterez simplement la qualité de l'encodage, mais n'hésitez pas à tester les options de filtrage, de débruitage et de netteté pour obtenir le résultat souhaité. Malheureusement, ce plug-in n'a pas la possibilité d'afficher un aperçu de l'image avant de l'enregistrer. Si vous avez l'habitude d'utiliser l'outil Save for Web c'est un peu bête, car vous devrez aller à l'aveugle.

Bien sûr, si vous n'êtes pas fan de bricoler dans le logiciel d'imagerie, l'option la plus simple pour utiliser WebP pourrait être de s'appuyer sur un CDN d'optimisation d'image. Cloudinary est l'un de ces services

Cloudinary

L'utilisation de WebP n'est pas une expérience sans frottement, et la façon la plus simple de l'utiliser est de ne jamais avoir à convertir le format par vous-même. Certains services en ligne peuvent faire ce travail pour vous, et Cloudinary en fait partie.

Il vous suffit de télécharger des images sur le service. De là, Cloudinary optimisera vos images pour vous. Ces optimisations sont hautement personnalisables, et une telle optimisation est de servir automatiquement quel que soit le format d'image optimal pour vos utilisateurs. Si vous utilisez Cloudinary pour diffuser les images de votre site et vos visiteurs utilisent des navigateurs compatibles WebP, Cloudinary se charge de vous proposer des images WebP, à condition de choisir les paramètres d'URL appropriés. Lorsque vous téléchargez une image, le panneau de configuration de Cloudinary fournit une URL à votre image qui ressemble à ceci:

 https://res.cloudinary.com/drp9iwjqz/image/upload/v1508291830/jeremywagner.me/using-webp -images / tacos-2x.jpg 

En utilisant n'importe quel nombre de paramètres d'URL, vous pouvez modifier la façon dont Cloudinary vous sert les images, y compris en servant les images WebP automatiquement aux clients qui peuvent les gérer au mieux. Le paramètre qui contrôle ce comportement est _f auto qui indique à Cloudinary de choisir automatiquement le meilleur format pour le client qui émet la requête. Les paramètres sont ajoutés après la partie / upload / dans l'URL comme suit:

 https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto/v1508291830/jeremywagner.me/using- webp-images / tacos-2x.jpg 

Bien que Cloudinary préserve l'extension, vous pouvez déterminer le type de contenu de l'image en examinant l'en-tête de réponse Content-Type de l'image. Si vous utilisez un navigateur qui prend en charge WebP, cet en-tête aura une valeur de image / webp . Bien sûr, Cloudinary est capable de plus que simplement servir le meilleur format pour un navigateur donné. Vous pouvez combiner plusieurs paramètres en les séparant par des virgules. Par exemple, voici comment vous pouvez demander à Cloudinary de choisir automatiquement le meilleur format et le meilleur paramètre de qualité (représenté par q_auto ):

 https://res.cloudinary.com /drp9iwjqz/image/upload/f_auto,q_auto/v1508291830/jeremywagner.me/using-webp-images/tacos-2x.jpg

Pour en savoir plus sur les capacités de Cloudinary, consultez leur documentation

Alors que Cloudinary est un outil pratique qui fait le travail d'optimisation d'image pour vous, vous pouvez encore vous sentir obligé d'encoder vos propres images. Et il y a plein de bonnes raisons de le faire! En plus d'utiliser un logiciel d'imagerie, vous pouvez le faire avec la plus grande flexibilité en utilisant l'encodeur de ligne de commande officiel WebP de Google

L'encodeur de ligne de commande cwebp officiel

L'outil officiel d'encodage des images au format WebP utilitaire de ligne. Bien qu'un programme de ligne de commande ne soit pas aussi facile à utiliser qu'une interface graphique, il offre beaucoup plus de souplesse pour contrôler la sortie. La plupart des frontaux graphiques qui exportent vers des fonctionnalités abstraites WebP ne s'intègrent pas parfaitement dans une boîte de dialogue, et ne sont donc pas les meilleurs outils pour obtenir le meilleur résultat pour votre site. Avant de pouvoir utiliser l'encodeur de ligne de commande, vous devez cependant l'installer.

Installation

Votre méthode d'installation dépend de votre système d'exploitation. Le moyen le plus simple d'installer l'encodeur WebP sera le gestionnaire de paquets de votre système d'exploitation. Les utilisateurs de macOS peuvent installer l'encodeur et les outils associés en utilisant le gestionnaire de paquets Homebrew :

 brew install webp

Les utilisateurs de Windows peuvent installer l'encodeur en utilisant Chocolatey :

 choco install webp

Les utilisateurs de distributions Linux Red Hat et dérivées de Red Hat telles que CentOS ou Fedora peuvent utiliser yum pour installer l'encodeur:

 yum install libwebp-tools

D'autres plates-formes peuvent utiliser différents gestionnaires de paquets (comme apt-get pour Debian Linux), mais la simple présence d'un gestionnaire de paquets ne signifie pas qu'il fournira un moyen d'installer l'encodeur. Si votre gestionnaire de paquets du système d'exploitation échoue en quelque sorte, l'encodeur WebP est disponible via Gestionnaire de paquets de Node.js (npm):

Si aucune de ces options ne fonctionne pour vous, vous pouvez toujours téléchargez la source et compilez vos propres binaires. C'est un peu onéreux, mais l'option est là

Avec l'encodeur installé, regardons quelques exemples rapides de la façon dont vous pouvez l'utiliser.

Exemples de lignes de commandes simples

L'encodeur WebP peut être appelé avec la commande cwebp . Pour commencer, examinons ce qui est sans doute le cas d'utilisation le plus courant de la conversion d'une image en WebP avec perte:

 cwebp -q 75 source.png -o output.webp

Cette commande prend un fichier PNG et le sort vers WebP avec perte via le paramètre -o . Par défaut, le codeur génère des images WebP avec perte et la qualité de la sortie peut être réglée de 0 à 100 via le paramètre -q . Le paramètre de perte de qualité par défaut est 75.

Vous vous souvenez peut-être d'avoir déjà lu que WebP est capable d'une transparence alpha complète, même pour les images avec perte. Vous pouvez contrôler la qualité de cette transparence de la même manière via le paramètre -alpha_q :

 cwebp -q 75 -alpha_q 10 source.png -o output.web

-alpha_q applique une compression avec perte à la transparence d'une image. La valeur par défaut pour -alpha_q est 100, ce qui est sans perte. Vous pouvez encore réduire la taille de sortie en abaissant cette valeur, ce qui appliquera une compression avec perte à la transparence, mais l'abaisser trop peut considérablement dégrader la qualité des zones transparentes de l'image.

Si vous êtes prudent en ajustant -alpha_q vous pouvez réduire encore la taille des images transparentes, mais assurez-vous d'examiner la sortie pour vous assurer qu'elle vous convient. Si vous automatisez la conversion d'images (via un script shell, par exemple), vous pouvez éviter de définir ce paramètre. Il est également intéressant de noter que -alpha_q n'a aucun effet lors du codage d'images WebP sans perte.

Nous avons discuté de l'encodage des images WebP avec cwebp, mais que se passe-t-il si vous voulez exporter vers WebP sans perte? Utilisez simplement l'option -less :

 cwebp -lossless source.png -o output.webp

Selon le contenu de l'image, il se peut que vous ne réalisiez pas une réduction de la taille du fichier de sortie par rapport à WebP avec perte. Vous pouvez contrôler l'agressivité de la compression via le paramètre -z cependant:

 cwebp -lossless -z 9 source.png -o output.webp

Le paramètre -z accepte une valeur comprise entre 0 (aucune compression) et 9 (compression maximale). Une compression plus élevée donne des tailles de fichier plus faibles, mais nécessite plus de temps pour encoder les images. Vous pouvez également définir le paramètre -m pour influencer la taille de sortie, qui spécifie une méthode de compression de 0 à 6:

 cwebp -lossless -m 6 -z 9 source.png -o output.webp

Vous pouvez également utiliser le paramètre -q pour indiquer à cwebp comment compresser l'image de façon agressive, ce qui peut être légèrement déroutant car -q signifie quelque chose de complètement différent pour WebP sans perte. fait pour les images avec perte Pour WebP sans perte, -q 100 applique le maximum de compression, alors que -q 0 s'applique le moins. Vous pouvez utiliser -q en tandem avec les paramètres -m et -z pour obtenir une compression très élevée, comme ceci:

 cwebp -lessless -m 6 -z 9 -q 100 source.png -o output.webp

Ce niveau de compression est de loin le plus long, mais il peut aller encore plus loin dans la réduction de vos charges utiles sans perte d'image. Expérimentez pour trouver ce qui fonctionne le mieux pour vous. Vous pourriez raser plus de kilo-octets que vous ne le pensiez!

Bien sûr, ce ne sont là que quelques exemples rapides de ce qui est possible. cwebp est un encodeur incroyablement flexible. Pour obtenir la liste complète des options disponibles, tapez cwebp -longhelp et lancez-vous.

Il y a de fortes chances pour que vous deviez convertir tout un tas d'images à la fois. Ensuite, je vais vous montrer quelques façons de convertir plusieurs fichiers avec des commandes courtes pour les systèmes de type Unix sur bash.

Conversion en masse dans Bash

Si vous utilisez Bash sur un système d'exploitation Unix-like comme macOS ou Ubuntu, et vous avez un répertoire d'images que vous devez convertir en WebP, la commande find fait un excellent travail. Comme son nom l'indique, find trouve des objets dans le système de fichiers. La syntaxe pour trouver des fichiers par une extension spécifique est très simple:

 find ./ -type f -name '* .png'

Dans le cas où vous ne savez pas comment trouver fonctionne, passons à travers cet exemple de commande

1. Le premier argument est le chemin du système de fichiers à rechercher, qui dans ce cas est le courant répertoire.
2. Le second argument spécifie le type d'objet du système de fichiers. Vous pouvez trouver des répertoires avec -type d . Nous trouvons des fichiers dans ce cas, cependant, ce qui signifie que nous allons avec -type f .
3. Enfin, l'argument -name est le motif par lequel trouver des dossiers. Dans ce cas, nous trouvons tous les fichiers se terminant par .png . Lorsque nous exécutons cette commande dans un répertoire contenant des fichiers PNG, la sortie peut ressembler à ceci:

 ./sources/5-1024w.png
./sources/14-768w.png
./sources/old/15-768w.png

Cela peut ne pas sembler très utile en soi, mais voici où la magie se produit: vous pouvez prendre les fichiers trouvés par find et les rediriger vers n'importe quel autre programme via le - exec paramètre. Voici comment vous pouvez utiliser -exec avec cwebp pour encoder tous les fichiers PNG d'un sous-arbre en images WebP avec un paramètre de qualité de 75:

 find ./ -type f -name '* .png' - exec sh -c 'cwebp -q 75 $ 1 -o "$ {1% .png} .webp"' _ {} ;

Cela peut sembler un peu compliqué, mais passons à travers ce qui se passe afin que nous puissions mieux le comprendre ensemble:

1. La ​​partie initiale de la commande trouve tous les fichiers se terminant par une extension .png dans le répertoire courant (et les sous-répertoires), comme nous l'avons décrit précédemment.
2. Les fichiers trouvés sont envoyés au paramètre -exec qui appelle une instance du shell sh . Le paramètre -c accepte une commande à exécuter
3. La commande invoquée est l'encodeur cwebp . L'argument -q est le paramètre de qualité
4. L'espace réservé $ 1 représente le fichier trouvé par trouve comme argument passé dans sh ] La partie -o "$ {1% .png} .webp" est le nom du fichier de sortie. Le motif exprimé remplace l'extension .png par une extension .webp .
5. La dernière partie passe la référence au fichier trouvé par trouver (représenté par {} ) à sh et la commande entière est terminée par ; .

Bien que ce soit un peu difficile à manier, il est très utile quand vous besoin de convertir un certain nombre d'images en WebP rapidement. Lorsque vous invoquez cwebp de cette manière, n'hésitez pas à ajuster les paramètres si nécessaire pour obtenir les résultats souhaités. Sachez simplement que cet exemple extrait les images converties dans le même dossier que les images source, donc ajustez au besoin pour contrôler l'emplacement de la sortie.

Le seul inconvénient de cette approche est qu'elle peut prendre beaucoup de temps à se terminer si vous traitez un grand nombre de fichiers, car les images sont traitées les unes après les autres plutôt que simultanément. Si vous avez besoin d'accélérer un peu le traitement, vous pouvez envisager de paralléliser le traitement de l'image, dont nous parlerons plus tard

Conversion simultanée en masse dans Bash

Voici un scénario potentiel. Vous avez des centaines, voire des milliers d'images à convertir en WebP. Bien que cwebp soit raisonnablement rapide, cela peut prendre beaucoup de temps si vous ne traitez pas les images simultanément. Le traitement sérialisé n'utilise pas au mieux le potentiel de votre CPU comme le fait le traitement simultané. Pour contourner ce problème, vous pouvez augmenter la commande précédente utilisée pour la conversion par lots sérialisée avec xargs comme ceci:

 find ./ -type f -name '* .png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $ 1 -o "$ {1% .png} .webp"' _ {} ;

Ce n'est pas très différent de la commande précédente, sauf avec quelques différences clés:

1. Le paramètre -exec est notamment absent. Au lieu de cela, la sortie de trouve passe directement à xargs qui gère le traitement à la place de -exec . Les xargs La commande suit immédiatement le caractère | avec trois parties spécifiques. Le premier est le paramètre -P qui spécifie le nombre maximal de processus simultanés (8 dans cet exemple). Le second est le paramètre -I qui est l'entrée xargs qui agit (dont la valeur est le fichier trouvé par trouver représenté par le ] {} espace réservé). L'argument final est la commande xargs sera exécutée, ce qui est exactement la même chose que dans la commande de conversion en bloc sérialisée d'avant.

Si vous voulez augmenter le nombre de processus simultanés, il suffit de changer la valeur passez au paramètre -P . Contrairement à d'autres approches asynchrones, xargs vous permet de limiter la concurrence à un maximum spécifié afin de ne pas rendre votre système inerte. Bien que cette approche ne fasse que raser quelques secondes pour de petites séries d'images, elle brille lorsque vous travaillez sur de très grandes images. Par exemple, lors de la conversion d'un lot d'environ 10 000 JPEG en WebP, une approche sérialisée utilisant find a pris 21 minutes et 26 secondes, alors qu'une approche simultanée utilisant les deux trouve et xargs a pris 9 minutes et 8 secondes . C'est environ diminution de 57% en temps de traitement, et avec une concurrence relativement prudente de 8 processus à la fois. Si vous pouvez vous permettre d'augmenter la concurrence, vous pouvez réaliser des réductions supplémentaires du temps de traitement.

Bien entendu, ces commandes ne se limitent pas à la simple conversion d'images en WebP. Quelles que soient les commandes shell que vous pouvez imaginer qui fonctionneront avec find et / ou xargs seront aussi utiles. Expérimentez et voyez ce que vous pouvez retirer.

Si convertir des images en WebP de cette façon n'est pas à votre goût, peut-être que vous préféreriez accomplir la tâche en JavaScript. Ensuite, nous parlerons de la façon de convertir vos images en WebP en utilisant Node.js, ainsi que dans les divers systèmes de compilation disponibles dans l'écosystème Node.js.

Convertir des images en WebP avec Node.js

Node L'utilisation de .js n'est pas seulement une pile d'applications JavaScript. Même dans les environnements où JavaScript n'est pas utilisé dans une application back-end, Node.js s'avère toujours utile en tant qu'outil de construction. L'outil utilisé pour exporter des images vers WebP dans Node.js ou n'importe quel système de génération basé sur Node.js est imagemin. Imagemin est un outil qui convertit et optimise les images de tous les formats, mais il peut être étendu pour prendre en charge la conversion WebP via imagemin-webp . Que vous écriviez des scripts à exécuter avec Node.js, ou que vous utilisiez l'un des nombreux systèmes de construction basés sur Node.js (gulp, et al.), Imagemin est le ticket. Commençons par montrer comment vous pouvez convertir des images en WebP dans un simple script Node.js.

Utiliser un script Node.js

Peut-être n'êtes-vous pas le type à atteindre pour un système de construction opiniâtre, et préférez pour utiliser des scripts Node.js à la place. C'est assez raisonnable, et si vous savez écrire du JavaScript, la courbe d'apprentissage n'est pas très raide, puisque vous n'avez pas besoin d'apprendre la syntaxe d'un système de construction. Pour commencer à convertir des images en WebP dans Node.js, installez les modules imagemin et imagemin-webp dans le répertoire racine de votre projet:

 npm install imagemin imagemin-webp

Cette commande installe deux modules: le premier est imagemin lui-même, et le second est le plug-in imagemin-webp qui étend imagemin afin qu'il puisse convertir des images en WebP. Avec ces deux modules installés localement dans notre projet, nous pouvons alors écrire un petit script qui traitera les images JPEG dans un répertoire et les convertira en WebP:

 const imagemin = require ("imagemin");
const webp = require ("imagemin-webp");

imagemin (["sources/*.png"]"images", {
  utilisation: [
    webp({
      quality: 75
    })
  ]
}). then (function () {
  console.log ("Images converties!");
});

Ce court script importe les modules imagemin et imagemin-webp dans le script courant sous la forme de deux constantes ( imagemin et webp respectivement). Nous exécutons ensuite la méthode principale de imagemin, qui prend trois arguments:

1. L'emplacement des images source. Dans ce cas, nous convertissons tous les fichiers se terminant par .png dans le répertoire des sources, supposé être situé dans le même répertoire que le script lui-même.
2. Le répertoire de destination, qui dans ce l'affaire est images . Ce répertoire est créé s'il n'existe pas déjà.
3. Objet d'options pour le programme imagemin. Dans ce cas, nous spécifions l'option use, ce qui nous permet de passer des plug-ins dans imagemin. Le seul plug-in que nous utilisons ici est une instance de imagemin-webp (représentée par la constante webp ). Le plug-in lui-même accepte également un objet de configuration, que nous avons utilisé pour spécifier que nous voulons que tous les fichiers PNG soient convertis en WebP avec perte (implicite, car l'encodage avec perte est la valeur par défaut) avec un paramètre 19659079] Imagemin va convertir des images pour nous, et quand c'est fini, il va retourner une Promesse . Dans cette promesse, nous affichons sur la console que toutes les images ont été converties. Si nous sauvegardons ce script sous webp.js nous pouvons l'exécuter avec la commande node comme suit:

    node webp.js
   

   En supposant que tout a réussi, un message apparaîtra dans la console:

    Images converties!
   

   Lorsque tout est fait, les images WebP devraient maintenant exister dans le répertoire images relativement à l'endroit où vous avez sauvegardé webp.js . Si vous voulez modifier la sortie, vous pouvez le faire en utilisant une variété d'options . Par exemple, si vous souhaitez générer des images WebP sans perte, vous devez utiliser l'option sans perte comme suit:

    webp ({
     sans perte: vrai
   })
   

   Sachez juste que comme indiqué plus haut le réglage de qualité pour le mode sans perte ajuste la compression. La compression est toujours sans perte, mais des paramètres plus élevés génèrent des fichiers plus petits.

   Astuce Pro: les options que vous pouvez transmettre à ce plug-in sont les mêmes, peu importe où vous appelez le plugin imagemin-webp, un script Node.js ou le système de construction de votre choix. En parlant de systèmes de construction, voyons maintenant comment vous pourriez convertir les images en utilisant Gulp.

   Utiliser Gulp

   En ce qui concerne les systèmes de construction, Gulp est assez commun. Grâce à un vaste écosystème de plug-ins, Gulp peut faire presque tout ce dont vous avez besoin, y compris la conversion d'images en WebP! Si vous avez installé et configuré gulp pour votre projet, vous n'avez qu'à installer quelques modules de nœuds supplémentaires sur la ligne de commande:

    npm install gulp-imagemin imagemin-webp gulp-ext-replace
   

   gulp-imagemin est un plug-in qui permet à imagemin de s'interfacer avec gulp. Comme dans l'exemple précédent utilisant un script Node.js, imagemin-webp est le plug-in qui permet à imagemin d'exporter des images au format WebP. Le dernier plug-in, gulp-ext-replace, nous permet simplement de changer l'extension des fichiers sortis par gulp. Par défaut, gulp génère des fichiers avec la même extension que leur source d'entrée. gulp-ext-replace nous aide à surmonter cela afin que nous puissions écrire des images WebP sur le disque avec l'extension .webp appropriée.

   Une fois que vous avez installé ces plug-ins, Il vous suffit d'écrire une tâche rapide qui lit les images source du disque et les affiche au format WebP. Cette tâche peut ressembler à ceci:

    const gulp = require ("gulp");
   const imagemin = require ("gulp-imagemin");
   const webp = require ("imagemin-webp");
   const extReplace = require ("gulp-ext-replace");
   
   gulp.task ("exportWebP", function () {
     src = "http://www.smashingmagazine.com/src/images/**/*.png"; // D'où proviennent vos PNG.
     let dest = "dist / images"; // Où vont vos WebPs.
   
     return gulp.src (src)
       .pipe (imagemin ([
         webp({
           quality: 75
         })
       ]))
       .pipe (extReplace (".web"))
       .pipe (gulp.dest (dest));
   });
   

   Il se passe beaucoup de choses ici, alors décomposons-le:

   1. Comme tout programme piloté par Node.js, la première partie du script importe les modules nécessaires pour que le script fonctionne
   2. . méthode gulp.task nous créons une tâche nommée exportWebP qui commence par deux variables: src pointe vers les fichiers image que nous voulons traiter (fichiers PNG dans ce Exemple). dest pointe vers le répertoire où seront écrites les images WebP résultantes
   3. La méthode gulp.src lit les images PNG à partir de l'emplacement spécifié par src variable.
   4. Les images sont transportées imagemin par la méthode gulp.pipe . Le seul argument transmis à imagemin est un tableau de plug-ins imagemin, qui dans ce cas est le seul plug-in imagemin-webp. Comme dans le cas de l'utilisation d'imagemin dans n'importe quel environnement, les arguments passés au plugin imagemin-webp (ou à tout plugin imagemin) suivront le même format.
   5. Avant d'écrire les images WebP converties sur le disque, nous voulons nous assurer que les fichiers résultants sont écrits avec une extension .webp en utilisant le plug-in gulp-ext-replace.
   6. En utilisant la méthode dest de gulp, nous écrivons tous les les images converties à l'emplacement spécifié précédemment par la variable dist .

   Lorsque tout est en place, nous pouvons invoquer gulp sur la ligne de commande pour convertir les images dans le répertoire src / images donc:

    gulp exportWebP
   

   Une fois la commande terminée, votre répertoire de destination contiendra les images WebP que vous avez converties à partir de toutes les trouvailles de gulp dans le répertoire source. C'est simple!

   Si vous préférez Grunt à la gorgée, vous avez de la chance. Ensuite, nous allons montrer un exemple de la façon dont vous pouvez utiliser Grunt pour convertir des images en WebP

   Utiliser Grunt

   Tout comme gulp, Grunt est un coureur de tâches, quoique avec une syntaxe différente. Il peut être utilisé pour de nombreuses utilisations de gulp, y compris l'optimisation et la conversion d'images en différents formats via imagemin. Sans surprise, il peut également convertir des images en WebP via le plugin imagemin-webp de imagemin. Si vous avez un projet utilisant Grunt que vous aimeriez modifier pour générer des images WebP, c'est une tâche relativement simple. Dans le répertoire contenant Gruntfile.js installez simplement ces deux modules comme suit:

    npm install grunt-contrib-imagemin imagemin-webp
   

   Cette commande installe le plug-in imagemin pour Grunt (fourni par grunt-contrib-imagemin ), ainsi que le fameux plugin imagemin-webp utilisé pour convertir les images en WebP. Une fois l'installation terminée, vous devrez configurer une tâche Grunt dans Gruntfile.js comme ceci:

    const grunt = require ("grunt");
   const webp = require ("imagemin-webp");
   
   grunt.initConfig ({
     imagemin: {
       dist: {
         options: {
           utilisation: [webp({
             quality: 75
           })]
         },
         fichiers: [{
           expand: true,
           cwd: "src/images/",
           src: ["**/*.png"],
           dest: "dist / images",
           ext: ".webp"
         }]
       }
     }
   });
   
   grunt.loadNpmTasks ("grunt-contrib-imagemin");
   

   Encore une fois, parcourons ce code et découvrons ce qui se passe:

   1. Au départ, nous avons besoin de les modules de grunt et imagemin-webp dont nous aurons besoin pour la tâche imagemin Grunt.
   2. Dans la tâche imagemin, nous créons une cible dist qui est ce que nous allons lancer à partir de la ligne de commande. Cette cible contient un objet options pour le plug-in imagemin de Grunt qui nous permet de spécifier les options de configuration. Dans ce cas, nous fournissons une instance du plugin imagemin-webp et lui transmettons les options habituelles
   3. L'objet est le cœur de l'opération. cwd spécifie le répertoire dans lequel nous voulons travailler. src spécifie les fichiers dans cwd que nous voulons convertir en WebP. dest spécifie le répertoire dans lequel nous voulons afficher les images converties. Enfin, ext spécifie que nous voulons que les images converties soient enregistrées avec une extension .webp .
   4. La dernière ligne de code charge le plug-in grunt-contrib-imagemin nous pouvons l'utiliser dans le fichier Grunt.

   Une fois que vous avez cela en place, vous pouvez convertir des images en WebP comme ceci:

    grunt imagemin: dist
   

   Une fois cette commande terminée, les images se terminant par .png dans le répertoire spécifié dans files.cwd seront converties en WebP et sorties dans le répertoire spécifié dans les fichiers .dest .

   Grunt n'est pas aussi intuitif que Gulp, et tombe un peu en désuétude. Cependant, c'est toujours un bon choix pour un système de construction, et vous pouvez encore le rencontrer dans certaines situations.

   Pour compléter notre documentation sur la façon de convertir des images en WebP dans l'écosystème Node.js, discutons comment vous pourriez accomplish that same task in webpack.

   Using Webpack

   If you're developing modern JavaScript applications, chances are high that webpack is in your midst. In contrast to gulp and Grunt, which style themselves as task runners, webpack is a module bundler that analyzes your code starting from one or more entry points and generates optimized output. While much of what webpack does is accomplished through loaders, it does have a large ecosystem of plug-ins, too. imagemin is represented in that space by imagemin-webpack-plugin.

   How webpack works and how to write a config for it are complex subjects, especially if you’re used to using task runners like gulp. I’m going to assume you have at least some familiarity with webpack basics, and just show you how to add imagemin to an existing webpack config to convert images to WebP. Like gulp and Grunt before, you’ll need to use npm to install a few necessary Node.js modules:

   npm install imagemin-webpack-plugin imagemin-webp copy-webpack-plugin
   

   Similar to how gulp has its own imagemin plug-in, webpack has one as well, in the form of imagemin-webpack-plugin. And as is the case with all imagemin-related use cases, the imagemin-webp plug-in provides the WebP conversion functionality. The copy-webpack-plugin module is used in this case to help us copy images from a source folder, and tell imagemin to process those images for us. Webpack can be rigged up with loaders (e.g., file-loader) to pipe the files it encounters in its dependency graph to imagemin intelligently, but it may be more expedient to specify a source directory on the disk and let imagemin churn through everything it finds and spit out images to the destination directory. Such code might look something like this:

   ImageminWebpackPlugin = require("imagemin-webpack-plugin").default;
   ImageminWebP = require("imagemin-webp");
   CopyWebpackPlugin = require("copy-webpack-plugin");
   
   module.exports = {
     // Omitted required entry, output, and loader configs for brevity...
     plugins: [
       new CopyWebpackPlugin([{
         from: "./src/images/*.png",
         to: "./images/[name].webp"
       }]),
       new ImageminWebpackPlugin({
         plugins: [
           ImageminWebP({
             quality: 75
           })
         ]
       })
     ]
   }
   

   As we have with other code examples, let’s step through everything and get a handle on what’s happening:

   1. As noted, the required entry, output, and loader configurations have been omitted for brevity and relevance, as we’re assuming you have some familiarity with webpack.
   2. The plugins config is merely an array of plug-ins we want to use. The first plug-in in the array is an instance of copy-webpack-plugin. To start, we specify in from the files we want to copy from the source directory. In this example, we include all files ending in .png from a specific source directory.
   3. Next, we tell copy-webpack-plugin where we want the optimized images to go in the to option. It’s important to note in this option that we’re using a placeholder of [name] to tell copy-webpack-plugin that we want the name of the output file to be the same as its corresponding source. However, because we’re outputting WebP files, we don’t want to preserve the source file’s extension, so we’re hardcoding the output file’s extension to .webp. It’s also important to remember that files will be written to a location relative to whatever is set in output.path earlier in your webpack config.
   4. The next plug-in in the sequence is an instance of imagemin-webpack-plugin, which should look familiar to other imagemin use cases. Here, we’re simply passing an instance of the imagemin-webp plug-in to the imagemin instance.

   Using this configuration, all images ending in .png found in ./src/images will be converted to WebP and output to the images directory relative to your configuration’s output.path directory.

   While there are multiple approaches to converting images to WebP within webpack, this aims to be the most straightforward. Compared to other build systems, webpack is an incredibly rich (and at times complex) tool. This example is not meant to be the authoritative approach to generating WebP images within webpack, but rather to show that it’s possible.

   Did You Like This Excerpt? Here’s Why This eBook May Be, Just May Be, For You ?

   The WebP Manual will get you ready for the new image format that is capable to significantly less data-intensive user experiences for a majority of your audience:

   • Learn how lossy and lossless WebP compare to JPEGs and PNGs exported by a number of image encoders.
   • Learn which services and plugins you can use to export or convert images to WebP with your preferred design tool or command line tool.
   • Learn how to can use WebP in production, and how to implement proper fallbacks for browsers that don’t support WebP just yet.
   • Learn how to use the full potential of the WebP format. Il améliorera considérablement les performances de chargement de nombreux utilisateurs, clients et clients, et deviendra l'un de vos outils favoris pour rendre les sites Web aussi légers que possible.

   The eBook is free for Smashing Members (you can cancel anytime, of course).