Comment créer une animation au format .webp à partir d’images
Si vous ne voyez pas l’image animée, soit votre navigateur n’est pas à jour, soit il ne sait pas lire le format .webp.
Ce tutoriel est écrit avec la version 1.2.2 de img2webp.exe.
Le format .webp de Google est un format récent pour les images, il est plus petit que le .jpg (environ 2,5 fois) et supporte également les images animés. Ce format est maintenant reconnu par tous les navigateurs aussi bien pour les images que pour les animations en .webp.
Le format .webp (animé) supporte 16 millions de couleurs alors que le format .gif (animé) n’en supporte que 256 au maximum.
Pour encoder des images en .webp (animé) vous avez besoin, d’au moins 2 images pour créer l’animation et du convertisseur img2webp.exe
Le convertisseur gratuit img2webp.exe fonctionne en ligne de commande (CMD) mais est très simple d’usage.
Télécharger le convertisseur img2webp
Le convertisseur img2webp est inclus dans un fichier .zip nommé libwebp-VERSION-windows-x64.zip (pour Windows) avec d’autres programmes. Il existe également pour Linux et Mac.
Pour le télécharger aller sur cette page ▷ Downloading and Installing WebP
Comme ce programme est constamment mis à jour (changement de version), si le lien Download ne fonctionne pas (ou est absent), il faut aller sur la page ▷ Downloads webmproject webp
À la date de cet article la dernière version est la 1.2.2 et se trouve tout en bas de page. Télécharger libwebp-1.2.2-windows-x64.zip (pour Windows), libwebp-1.2.2-linux-x86-64.tar.gz (pour Linux), libwebp-1.2.2-mac-10.15.tar.gz (pour Mac)
► cliquer sur le lien pour télécharger le fichier (.zip de 3.5 Mo pour Windows)
Préparer les images
Avant de convertir, il faut préparer les images qui formeront l’animation. Vous pouvez les créer avec Photoshop ou un autre programme, elles doivent être dans un des formats supportés par le convertisseur donc en .jpg .png .webp .tiff.
Les images doivent être exactement de mêmes dimensions (largeur et hauteur) pour former l’animation.
Exemple avec ces 2 images.
2 images de Poupée avec un fond qui change de couleur
Il ne faut pas nommer vos images avec un signe particulier, ni d’espace, ni d’accent, sinon cela ne fonctionne pas. Nommer vos images simplement, par exemple image1, image2, image3…
Dans Photoshop, il est préférable d’enregistrer les images par le menu Enregistrer pour le web… ou les touches Alt+Maj+Ctrl+S vous avez des Paramètres prédéfinis en haut de la fenêtre, vous pouvez choisir par exemple JPG Supérieur ou JPEG Moyen. Vous pouvez également modifier manuellement le taux de compression Qualité. Pour choisir une meilleure qualité il faut choisir Supérieur ou Maximum dans le menu de gauche.
Enregistrer pour le web
Il ne faut pas choisir le format .gif car il ne peut contenir que 256 couleurs au maximum. Pour le .png il ne faut l’utiliser que s’il y a de la transparence dans vos images (et dans l’animation finale) car il est plus volumineux.
Préparer l’encodage
Le fichier .zip contient plusieurs programmes, celui qui nous intéresse c’est img2webp.exe qui se trouve dans le sous-dossier /bin. Vous n’avez pas besoin de tous le reste. Il fonctionne en ligne de commande (CMD) c’est à dire qu’on ouvre une Invite de commandes de Windows et on écrit le code pour convertir les images en animation, c’est très rapide.
Pour créer l’encodage il faut placer le programme img2webp et les images dans un même dossier.
► décompresser le fichier .zip sur votre disque
► créer un nouveau dossier par exemple à la racine de votre disque C:/ ou le disque ou la partition que vous voulez
Pour cet exemple le dossier créé se trouve sur le disque D: et se nomme /webp
► copier puis coller dans ce dossier D:/webp, le fichier img2webp.exe qui se trouve dans le sous-dossier /bin
► placer les images à convertir dans ce même dossier D:/webp
Contenu du dossier de conversion
Copier et modifier le raccourci CMD
Pour encoder il faut écrire une ligne de commande dans l’Invite de commandes de Windows. Par défaut cette Invite s’affiche à partir de l’emplacement C:\User\SESSION>. Pour éviter de devoir naviguer dans l’arborescence des disques (ou de Windows) pour aller vers la destination, on peut dupliquer le raccourci CMD et changer le chemin d’exécution pour qu’il se lance directement dans le dossier D:/webp.
Pour récupérer le raccourci de CMD,
► cliquer sur le menu Démarrer puis ouvrir le dossier Système Windows
► faire un clic droit sur Invite de commandes et choisir Plus puis Ouvrir l’emplacement du fichier
Ouvrir l’emplacement du raccourci CMD
Vous arrivez dans le dossier C:\Users\SESSION\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tools
► copier ou Ctrl+C le raccourci Invite de commandes
► coller ou Ctrl+V ce raccourci dans le dossier D:\webp
Dupliquer le raccourci CMD
Pour que le raccourci s’exécute dans ce dossier il faut le modifier,
► faire un clic droit sur le raccourci et choisir Propriétés ou les touches Alt+Entrée
► modifier le chemin Démarrer dans en effaçant la ligne %HOMEDRIVE%%HOMEPATH% et en la remplaçant par votre chemin donc D:\webp
► valider la fenêtre par OK
Le chemin doit s’écrire avec une barre oblique inversée \, vous pouvez copier ce chemin à partir de l’Explorateur de Windows. Un signe \ s’écrit avec la touche Alt Gr (celle de droite sur le clavier) + la touche \ (mais cela dépend de votre clavier).
Modifier le raccourci CMD
Le raccourci modifié va maintenant s’ouvrir directement dans le dossier D:\webp, donc vous n’avez plus besoin de naviguer dans l’arborescence (de Windows) pour l’atteindre. Bien sûr il faut adapter en fonction du nom de votre dossier. Si vous dupliquez ce raccourci et le mettez dans un autre dossier, il suffit de changer la destination Démarrer dans
Si vous préférez naviguer dans l’Invite de commandes originale,
► utiliser directement les touches Win+R écrire CMD et valider la fenêtre par OK ou la touche Entrée
Dans la fenêtre, après la ligne qui s’affiche,
► écrire la lettre du Lecteur sur lequel vous voulez aller, pour notre exemple c’est le lecteur D: puis valider avec la touche Entrée
► ensuite pour aller dans le sous-dossier /webp écrire cd webp
Naviguer dans l’arborescence
Vous obtenez le chemin D:\webp. C’est dans cet emplacement que se trouve le programme img2webp.exe et les images à convertir en animation.
Pour information,
Si vous voulez remonter dans l’arborescence d’un dossier (dossier parent) il faut écrire cd\ puis touche Entrée
Si vous voulez effacer tout l’écran, écrire cls puis touche Entrée
Si vous voulez recopier un texte (code) écrit précedemment, appuyer sur F3
Pour plus de commandes CMD, voir cet article ▷ Les commandes de base de l’invite de commande CMD
Encoder en .webp (animé)
Dans le dossier libwebp-1.2.2-windows-x64.zip téléchargé il y a un fichier Readme.txt avec toutes les explications pour la procédure (en anglais). Voici un extrait de son contenu avec les explications qui nous intéresse.
Animation creation tool: ======================== The utility 'img2webp' can turn a sequence of input images (PNG, JPEG, ...) into an animated WebP file. It offers fine control over duration, encoding modes, etc. Usage: img2webp [file_options] [[frame_options] frame_file]... File-level options (only used at the start of compression): -min_size ............ minimize size -loop.......... loop count (default: 0, = infinite loop) -kmax .......... maximum number of frame between key-frames (0=only keyframes) -kmin .......... minimum number of frame between key-frames (0=disable key-frames altogether) -mixed ............... use mixed lossy/lossless automatic mode -v ................... verbose mode -h ................... this help -version ............. print version number and exit Per-frame options (only used for subsequent images input): -d ............. frame duration in ms (default: 100) -lossless ........... use lossless mode (default) -lossy ... ........... use lossy mode -q ........... quality -m ............. method to use example: img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp Note: if a single file name is passed as the argument, the arguments will be tokenized from this file. The file name must not start with the character '-'.
Si vous voulez afficher ces mêmes informations dans l’Invite de commandes, écrire img2webp -h ou img2webp -help et valider avec la touche Entrée
Afficher les informations de img2webp
Les informations sont également présentes sur cette page ▷ Webp – img2webp
Pour encoder il faut écrire cette ligne de commande (code théorique) img2webp (options) images (options) -o image.webp
Cela correspond à : Nom du programme (sans le .exe) – paramètres (optionnels) – noms des images (séparées par un espace) – paramètres (optionnels) – nom du fichier final en .webp.
Voici la commande de conversion simple (sans paramètre) img2webp image1.jpg image2.jpg -o anime1.webp
Conversion simple
Le programme encode dans l’ordre les images 1 et 2 pour créer une animation nommée anime1.webp
- img2webp : nom du programme
- image1.jpg image2.jpg : les 2 images qui seront encodées ensemble (séparées par un espace)
- -o : sert à indiquer le nom de l’image finale (fichier de sortie)
- anime1.webp : nom de l’image finale en .webp (animé)
Il faut bien respecter un espace entre chaque image et chaque terme. Il est possible d’inverser l’ordre des images en les inversant dans la ligne de commande. Le nombre d’image n’est pas limité, on peut en mettre plus que 2. La vitesse de l’animation est très rapide (100 ms par défaut).
Exemple d’image animée en .webp
Ajouter des paramètres
Par défaut l’animation est très rapide (presque intantanée), le convertisseur encode en lossless (sans perte) et l’animation tourne en boucle (à l’infini)
En ajoutant des paramètres il est possible,
Modifier la vitesse de l’animation
Par défaut (sans paramètre) l’animation s’exécute à 100 ms donc 0,1 seconde. Pour accélérer l’animation il faut réduire ce nombre, et inversement pour ralentir l’animation il faut augmenter ce nombre, en ajoutant le terme -d et le nombre. En fait ce qu’on indique c’est la durée de la frame (fixe), une frame étant ici une image.
Exemple pour une animation plus rapide (que 100 par défaut) img2webp -d 60 image1.jpg image2.jpg -o anime6.webp
Exemple pour une animation plus lente (que 100 par défaut) img2webp -d 600 image1.jpg image2.jpg -o anime7.webp
Animation plus lente à 0,6 images/s
Limiter l’éxécution de l’animation
Par défaut (sans paramètre) l’animation tourne en boucle (à l’infini). Si on veux limiter son exécution à X fois, il faut ajouter le terme -loop et le nombre de fois. Exemple avec 3 fois img2webp -loop 3 image1.jpg image2.jpg -o anime4.webp
Exemple avec une compression -lossy et un -loop (3 fois) img2webp -lossy -loop 3 image1.jpg image2.jpg -o anime5.webp
Encoder en lossy (avec perte)
Par défaut le convertisseur encode en lowless (sans perte) donc votre animation sera de même qualité que les images d’origine mais au format .webp. Encoder en lossy (avec perte), cela sert à compresser les images mais cela peut les dégrader.
Mon conseil est plutôt d’optimiser les images source dans Photoshop puis d’encoder en lowless (sans perte) ensuite dans le convertisseur, ainsi vous contrôler mieux le résultat. Dans Photoshop pour optimiser les images il faut les enregistrer par le menu Enregistrer pour le web….
Ensuite si vous voulez réduire le poids du fichier final il est préférable de réduire d’abord les dimensions de l’image, c’est beaucoup plus efficace en terme de poids du fichier que la compression de ces images (lossy). Bien sûr, moins il y a d’images dans l’animation et moins le fichier final sera important et inversement. Donc peut être que vous pouvez supprimer une image sur deux !
Pour encoder en lossy (avec perte) il faut ajouter le terme -lossy après l’image qu’on veux compresser, exemple avec uniquement la compression de la 1ère image img2webp image1.jpg -lossy image2.jpg -o anime2.webp
Si on veux compresser toutes les images, il faut placer le terme -lossy juste après img2webp img2webp -lossy image1.jpg image2.jpg -o anime3.webp
Il est également possible de combiner du lowless avec du lossy, il faut ajouter le paramètre -mixed (non testé)
Ajouter plus d’images dans l’animation
Je n’ai pas lu dans la documentation de limite du nombre d’images, mais bien sûr plus il y a d’images plus le poids du fichier final sera important.
Exemple avec 10 images : img2webp image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg image6.jpg image7.jpg image8.jpg image9.jpg image10.jpg -o anime8.webp
Autres paramètres
Il existe d’autres paramètres (non testés)
-q : permet de choisir le taux de compression (par défaut 75) – je suppose qu’il s’utilise avec lossy ?
-m : permet de choisir la méthode de compression – les valeurs possibles vont de 0 à 6 (défaut 4).
-kmin et -kmax : servent à indiquer le nombre de frame minimales et maximales ?
Encoder en .webp
Si vous voulez simplement encoder une image au format .webp, utiliser le programme bin/cwebp.exe. La procédure est similaire, le programme fonctionne également en ligne de commande (CMD).
Pour un encodage simple écrire la ligne cwebp image1.jpg -o image1.webp
La qualité d’encodage est par défaut de 75 (variable entre 0 et 100), si vous voulez une meilleure qualité il faut augmenter ce taux, en ajoutant le terme -q et le taux et inversement pour réduire la qualité il faut choisir une valeur inférieur à 75.
Par exemple cwebp image1.jpg -q 80 -o image1.webp
Pour tous les paramètres, voir le fichier Readme.txt qui est dans le .zip téléchargé
Voir également cet article qui permet d’ajouter un plugin d’encodage en .webp directement dans Photoshop ▶ Ouvrir et enregistrer les images .webp dans Photoshop
Autres programmes d’encodage (conversion)
Pour décoder une image .webp utiliser le programme bin/dwebp.exe
Pour convertir une image .gif (animée) en .webp (animé) utiliser le programme bin/gif2webp.exe. Voir des informations sur cette page ▷ Webp – gif2webp
Pour créer une animation complexe ou pour inclure des métadonnées, je crois qu’il faut utiliser le programme webpmux.exe (non testé). Les informations sont sur cette page ▷ Webp – webpmux
Exemple d’animation de la poupée
► préparer 3 images avec les 3 positions de la tête, sur un fond transparent, donc ce sera en PNG (avec transparence)
► enregistrer les 3 images en .png par le menu Enregistrer pour le web… au format PNG-24 (poupee1.png, poupee2.png, poupee3.png), il faut laisser cochée la case Transparence
► convertir ces 3.png en animation .webp
Pour ces images le code est img2webp poupee1.png poupee2.png poupee3.png poupee2.png -o poupeeanime.webp
Poupée animé (vitesse par défaut)
On peut ralentir l’animation si elle trop rapide (100 ms par défaut) img2webp -d 300 poupee1.png poupee2.png poupee3.png poupee2.png -o poupeeanime2.webp
Poupée animé (vitesse plus lente)
L’image 02 est repétée dans la conversion car c’est l’image intermédiaire, celle entre les 2 autres positions de la tête, donc pas besoin de créer 4 images (dont 2 identiques).
Comparatif entre .gif animé et .webp animé
Comparaison de la même animation enregistrée en .gif et en .webp
- Animation en .gif : création de 4 vignettes dans le panneau Montage puis enregistrement en .gif animé (256 couleurs Tramé)
- Animation en .webp : création de 3 images en JPEG Supérieur puis conversion en .webp (taux de compression de 75 par défaut)
 |
 |
Pour information le code pour le .webp est img2webp -d 200 poupeeanime1.jpg poupeeanime2.jpg poupeeanime3.jpg poupeeanime2.jpg -o poupeeanime4.webp
L’animation a été ralenti en ajoutant -d 200 pour correspondre à la vitesse visuelle du .gif, qui lui est en 0,25 s dans le panneau Montage de Photoshop.
Commentaires
- Le .gif est limité à 256 couleurs, pour l’animation de cette image en .gif on constate une très légère dégradation car il manque quelques couleurs
- Le .webp accepte 16 millions de couleurs, on ne constate pas de défaut par rapport aux images source, donc pour une bonne qualité de l’animation il faut que vos images source soient de bonne qualité, dans Photoshop choisir le Paramètre prédéfini JPEG Supérieur ou mieux
- Le poids du fichier en .webp est plus gros que celui du .gif, pour cette animation il est 348 ko pour le .gif et de 566 ko pour le .webp. Si l’image est plus petite (300×404 px) le poids du fichier est de 130 ko pour le .gif et de 262 ko pour le .webp. Si l’image est plus grande (600×804 px) le poids du fichier est de 450 ko pour le .gif et de 1146 ko pour le .webp
Ce tutoriel est la propriété du site Photoshoplus. Toute reproduction, exploitation ou diffusion du présent document est interdite.
Photoshoplus ©
