WebP gif-le JPEG

Tout d’abord, le site de l’échiquier Briochin adopte le format d’images numériques WebP de Google.

En premier lieu, Karophyr crée en 2007 sur Wikipedia anglais l’animation de l’immortelle d’Anderssen contre Kieseritzky trop gourmand face aux deux Tours blanches sacrifiées. En fait, l’aspect le plus important dans cette introduction, outre son format GIF 244 x 248 pixels, est sa taille de 939 Ko. Ensuite, un an plus tard, Capmo réduit le GIF à 109 Ko sur le Wikipedia français.

Par ailleurs, SunCreator améliore la compression du GIF à 36 Ko dans l’année 2010. En dernier lieu, deux ans plus tard, Polo annule la version à 36 Ko pour la raison « Bad image compression ». Ainsi, il revient à la version de 2008 à 109 Ko, taille actuellement en ligne.

Finalement, le 11 mai 2020, échiquier Briochin encode l’animation de l’immortelle d’Anderssen au format Google WebP sans perte de qualité (lossless) à 34 Ko et explique comment dans ce tutoriel.

1. Comment prononciez-vous GIF ?

Commençons par examiner comment héler l’arbitrage entre les deux rivaux dans le titre « WebP gif-le JPEG » ?

• premièrement, « Gif » à souffler comme gifle ;
• deuxièmement, comme le présent « gift »((« Obama Made an Important Executive Decision on the Pronunciation of ‘GIF’ » by Abby Ohlheiser, The Atlantic, 13 juin 2014)) quelque peu imparfait ?

Après cela, il est indéniable qu’il n’y a pas photo. JPEG^[1]JPEG : Joint Photographic Experts Group se prend une claque dans le RIF^[2]RIFF: Resource Interchange File Format conteneur de WebPifi des formats numériques d’images. Tandis que GIF^[3]GIF : Graphics Interchange Format moribond se fait de plus en plus transparent sur la toile. Chapeau à WebP(hoto), dire Weppy [ouais π]「ウェッピ」!

2. WebP préserve la bande passante internet

tout ce qui améliore la rapidité du réseau améliore les revenus de Google

Le Monde((« Google propose un nouveau format d’images pour le Web », Le Monde, 1er octobre 2010. Clic droit sur les images > « Enregistrer sous… » : Gif ou WebP ?)), 1er octobre 2010

En somme, dans l’internet se mettant au vert, WebP devient le format écologique ^[4]Ecologie ? Google a conçu l’icône d’un appareil photo vert entre « Web » et « P » des images préservant la bande passante en réduisant le volume des images.

Ainsi, parodions le slogan « le poids des mots, le choc des photos »((« Dans le secret des couvertures de Match » par Olivier Royant, Paris Match, 3 mai 2019)) de Paris Match 1978-2008 par « le poids des photos, le choc des chiffres » à déchiffrer.

1. Premièrement, cliquer avec le bouton droit de la souris > menu contextuel « Enregistrer l’image sous… » ;
2. Deuxièmement, vérifier leurs extensions textuelles de fichier respectives .webp à gauche et .jpg à droite.

En revanche, le vétéran JPG accuse une surcharge pondérale de 50%.

2.1 Bloc-notes : entête de fichiers d’image

Par exemple, oser « visionner » ces images dans Bloc-Notes de Windows 10. Ainsi, décodons l’entête griffée :

Considérons à gauche la première ligne du Bloc-Notes. Ainsi, WebP se présente dans le conteneur RIFF selon une compression de type codec^[5]codec : codeur décodeur VP8.

Tandis qu’à droite, en guise d’épitaphe((« Google open sources JPEG assassin » by Cade Metz, The Register, 30 septembre 2010)), oublions JFIF^[6]JFIF : JPEG File Interchange Format dans le JPEG.

3. Compatibilités WebP

3.1 Windows 10 : explorateur de fichiers .webp

En premier lieu, retrouvons des photos historiques du Bretagne 2020 converties en WebP sur le disque dur.

Il est vrai que l’explorateur de fichiers de Windows 10 affiche les vignettes .webp aussi bien que celles des .jpg. Cependant il y a un certain délai en ms perceptible au niveau du rafraichissement des informations de date ou de taille pour le WebP.

Au centre, dans le volet principal, sous le dossier à l’icône jaune ZeMarmot, chaque .jpg est associé au visualiseur « Photos » de Windows 10 qui ignore les images .webp comme le navigateur Internet Explorer 11.

Par ailleurs, les images sont de qualité équivalentes. En revanche, dans la colonne de droite de l’explorateur de fichiers de Windows 10, la différence des tailles attire l’attention entre les images JPEG et WebP.

3.2 Les navigateurs internet sont compatibles WebP

En premier lieu, par défaut, le navigateur Google Chrome 23 visualise les images .webp puisque c’est une innovation open source de Google 2011. Cependant, le joke est l’association de ce type d’image matricielle à « Chrome HTML Document » alors que HTML est un document texte.

3.2.1 Ralliement des navigateurs majeurs

Ensuite, bien que Microsoft défend son format « HD Photo » normalisé JPEG XR en 2008, le navigateur Microsoft Edge Legacy de Windows 10 est compatible Google WebP. Ainsi, la compatibilité WebP de Edge est transparente pour l’utilisateur Windows grâce aux mises à jour internet de Microsoft Windows Update. Toutefois, contrairement à Chrome, Edge Legacy n’est pas une cible du glisser-déposer d’une image WebP depuis l’explorateur de fichiers. Cependant avec Microsoft Edge Chromium version 81.0.416.64 du 20 février 2020 à installer volontairement en remplacement de Edge Legacy, le glisser-déposer de WebP fonctionne.

De plus, le navigateur norvégien Opera 12.1 est également compatible.

En outre, Mozilla Firefox l’est aussi malgré la sortie du concurrent MozJPEG 2014. Malgré tout, la fondation Mozilla a maintenu ses critiques((« Studying Lossy Image Compression Efficiency » by Mozilla Reseach, Mozilla.org, 17 octobre 2013)) sur Google WebP((« Étude de Mozilla comparant les taux de compression de différents formats d’images » de Benoit Jacob, LinuxFr, 25 octobre 2013)).

3.2.2 Compatibilité WebP avec plug-in

De plus, dans la guerre des formats d’images, Apple fait la promotion du conteneur HEIC^[7]HEIC : .heic est l’extension de fichier du conteneur HEIC au format HEIF : High Efficiency image File Format du groupe MPEG^[8]MPEG : Moving Picture Experts Group remplaçant JPEG avec une compression H.265 (HEVC^[9]HEVC : High Efficiency Video Coding) utilisée en vidéo((« What is HEIC? » by Martyn Casserly, MacWorld, 25 juin 2019)).

En dernier lieu, c’est éventuellement une des raisons pour laquelle, le navigateur Apple Safari ne supporte pas officiellement Google WebP. Pourtant, une beta Sierra((« Apple tests Google graphics format to speed up websites » by Stephen Shankland, CNET, 19 juillet 2016)) est à l’étude. Finalement, le plug-in Weppy((« Weepy : un plugin pour afficher le WebP dans votre navigateur » de Nicolas Furno qui ose le jeu de mot « Weppy » -> « Weepy » dans le titre, MacGeneration, 7 octobre 2010)) apporte la compatibilité WebP à Apple Safari.

3.3 WordPress : (in)compatibilités WebP

Tout d’abord, WordPress 5.4 d’avril 2020, utilisé dans le site echiquierBriochin.fr, ne reconnaît pas officiellement WebP. En conséquence, l’icône de cet article n’a été acceptée qu’en .jpg alors qu’elle s’affiche en .webp dans le corps de l’article dans la galerie de comparaison deux à deux.

Cependant, toutes les images du corps de l’article sont en .webp sauf le .jpg de l’icône pour comparaison.

En particulier, pour mettre en ligne les images .webp, il a fallu le plug-in WP enable WebP testé jusqu’à la 5.2 de WordPress, d’où le message :

« Avertissement : cette extension n’a pas été testée avec votre version actuelle de WordPress. »

En ce qui concerne le mode rédacteur, les vignettes des images .webp dans la bibliothèque des médias sont remplacées par une icône fantôme unique sans rapport avec l’image.

Toutefois, cliquer sur « Détails du fichier joint » > « Voir la page du fichier joint » pour visualiser l’image dans Chrome.

3.4 Gimp : traitement d’images WebP

Tout d’abord, Gimp menu « Fichier » > « Ouvrir » permet d’ouvrir une image .webp existante. En revanche, c’est la sauvegarde qui mérite d’être approfondie.

3.4.1 Gimp : exporter l’image au format JPG

D’abord, à chaque sauvegarde, par conception, un JPEG détériore sa qualité. Toutefois, préserver la qualité à 100% est rare dans la pratique car elle amènerait à une taille prohibitive du JPG.

En fait sur une photo de haute qualité, selon le pourcentage de qualité choisie supérieur à 80%, la perte de qualité n’est pas trop perceptible par l’humain au moins dans les toutes premières sauvegardes.

Pour conclure, retenir qu’il faut toujours penser à retailler une photo prise par un smartphone pour un usage Web ou l’envoi en pièce jointe d’un e-mail.

En conséquence, dans cet article, la largeur maximum recommandée est de 700 pixels.

3.4.2 Gimp : exporter l’image JEPG en WebP

Tout d’abord, le logiciel libre Gimp 2.10.18 de retouche d’images utilisé par echiquierBriochin.fr est compatible WebP.

Ainsi, pour générer l’icône d’article de 7 Ko en WebP, le projet Gimp iconWebP.xcf a nécessité 491 Ko pour stocker les calques (layers) intermédiaires. Par ailleurs, l’observateur attentif aura noté sur l’objectif de l’icône les mentions subliminales « Made in Google », « RIFF » et « VP8 » ajoutées par echiquierBriochin.fr

1. Premièrement, créer votre image avec ses calques dans Gimp.
2. Deuxièmement, sauver votre projet au format natif .xcf de Gimp.
   Gimp menu « Fichier » > « Enregistrer » en .xcf
3. Troisièmement, fusionner les calques par :
   Gimp menu « Image » > « Fusionner les calques visibles… » en un seul.

De toute évidence, une fois les calques fusionnés à l’étape 3, il est difficile et long de recomposer chaque calque. C’est la raison pour laquelle la sauvegarde préalable en .xcf a été faite à l’étape 2.

Par la suite, les calques fusionnés peuvent être exporté dans le format voulu comme .jpg, .png ou .webp :

1. Premièrement, exporter au format .webp
   Gimp menu « Fichier » > « Exporter sous » ;
2. Deuxièmement, renommer « .jpg » en « .webp » dans l’extension de fichier.

3.4.2.1 Gimp : boîte de dialogue « Exporter l’image »

En premier lieu, la boîte de dialogue « Export Image as WebP » s’affiche :

Ensuite, l’option [x] Lossless (Sans perte) cochée n’est valable que pour des petites images comme les frames ^[10]frame : image par image, calque, cadre de l’animation de l’immortelle. Cependant, pour les photos et captures d’écran, laisser cette option décochée par défaut : [ ] Lossless.

En outre, Image quality à 80% est une valeur moyenne à tester en priorité. Ainsi, pour un jpg de 19 Ko, le WebP à 80% n’est réduit que d’un kilo à 18 Ko. A 50%, le WebP chute à 15 Ko. A 25%, il ne descend qu’à 14 Ko. Avec la qualité de 0%, ce WebP descend à 11 Ko mais n’est pas montrable : le titre devient illisible, le fond unicolore gris bave selon un flou typique d’un JPEG que l’on aurait sauvé plusieurs fois avec apparition d’artefacts non souhaités.

De plus, Alpha quality concerne les GIF ou PNG transparent à exporter sous WebP. Ainsi, ce réglage n’a pas d’incidence sur un WebP sans canal alpha de gestion de la transparence.

Par ailleurs, éviter de cocher les options [ ] Save Exif data, XMP data, color profile gagne 4 Ko.

Pour conclure, la capture d’écran WebP de l’icône de l’article a été compressée à 7 Ko en dehors de Gimp avec les outils Google WebP dans le chapitre 4 à partir du JPEG de 19 Ko exporté depuis Gimp.

3.4.3 Gimp : exporter l’animation GIF de l’immortelle

1. Premièrement, Gimp menu « Fichier » > « Exporter sous… » > « Immortal_game_animation_gimp.webp »
2. Deuxièmement, clic bouton « Exporter« .
   Dans la boîte de dialogue « Exporter l’image en WebP« 

[ ] Sans perte
Qualité de l'image : 80
Qualité de l'alpha : 100
Type de source : Default
[x] En tant qu'animation
    [x] Boucler indéfiniment
    [x] Minimiser la taille de la sortie (plus lent)
    Délai entre les images là où ce n'est pas spécifié : 200 ms
    [ ] Utiliser le délai saisi ci-dessus pour toutes les images
[ ] Enregistrer les données Exif, XMP, profil colorimétrique

1. Premièrement, dans Gimp, confirmer en cliquant sur le bouton « Exporter« .
   Gimp génère Immortal_game_animation_gimp.webp à 73 Ko.
2. Deuxièmement, dans le gestionnaire de fichiers, double-click ce .webp pour le visualiser dans Chrome ou Edge.

Il faut reconnaître que l’animation générée montre la succession des calques de différentes dimensions sans le fond. De toute évidence, le rendu du film n’est pas respecté et la réduction de taille de 109 Ko à 73 Ko est insuffisante.

En conclusion, ce n’est pas avec Gimp mais avec les outils Google WebP au chapitre 4 que l’animation de l’immortelle a été compressée à 34 Ko.

3.4.4 Gimp : exporter l’animation WebP de ZeMarmot

Tout d’abord, le 8 novembre 2018, lors de la sortie de Gimp 2.10.8, Aryeom((« The Wanderings of .. ZeMarmot. Small marmot, grand freedom. » by Aryeom, Jehan, and Henri Hebeisen, teaser in progress, ZeMarmot.net.)) et Jehan ont réalisé une courte animation en noir et blanc dénommée ZeMarmot. Pour être plus précis, cette animation est en ligne au format WebP :

1. Premièrement, scroller en fin de page jusqu’à :

And last but not least, we remind everyone that GIMP has already had WebP support since GIMP 2.10.0!

GIMP 2.10.8 Released 2018-11-08 by Wilber

A WebP animation (done in GIMP), by Aryeom, featuring ZeMarmot and a penguin.

2. Deuxièmement, clic droit sur l’animation > menu contextuel « Enregistrer l’image sous… ».
   Sauver gimp-2-10-8-ZeMarmot-frama.webp quelque part sur votre disque dur pour savoir la taille de ce WebP : 363 Ko
3. Troisièmement, ouvrir ce WebP dans Gimp classiquement par menu « Fichier » > « Ouvrir… » :

Prenons le cas à droite des frames de l’animation. Ainsi une frame est associée à un calque de Gimp numéroté jusqu’à 38 et ayant une durée en ms.

Commençons par examiner la tentative d’export sans perte. Pour être précis, elle se solde par un doublement de la taille à 693 Ko inacceptable.

Finalement, avec une perte contrôlée de la qualité à 80%, la taille ne descend qu’à 268 Ko.

3.4.4.1 Télécharger les utilitaires WepP pour Gimp et Windows PowerShell ISE

Tout d’abord, à droite dans la fenêtre des calques, les durées des frames apparaissent entre parenthèses. Comment en obtenir la liste ?

Ensuite, ouvrons une parenthèse de programmation. D’autant plus que parenthèses et liste font penser au langage d’intelligence artificielle Lisp. Par contre, il faudrait être fou pour mettre au point du Lisp — dialecte TinyScheme — directement dans la console Script-Fu de Gimp.

Pour toutes ces raisons, il convient au préalable de saisir le script dans NotePad++ pour la coloration syntaxique et l’alignement des parenthèses.

NotePad++ menu > « Langage » > « S » > « Scheme« 

Pour conclure, afin de limiter au minimum le copier-coller, télécharger les scripts suivants :

Par ailleurs, l’archive zippée WebPscript.zip de 13 Ko contient :

• Premièrement, Gimp\SaveAnimDuration.scm 26 Ko 764 lignes ;
• Deuxièmement, PowerShell\*.ps1 qui seront utilisés dans le chapitre 4. Google Speed WebP coder.

Plus précisément, .scm est l’extension de fichier en langage Scheme, dans son implémentation minimale TinyScheme embarqué dans Gimp.

3.4.4.2 Gimp : liste des durées des frames de l’animation ZeMarmot

Tout d’abord, l’objectif est d’obtenir le fichier texte des durées des frames.

3.4.4.2.1 Gimp : installer SaveAnimDuration.scm en TinyScheme dans Windows 10

L’article « Gimp commentaire multiligne TinyScheme » détaille la configuration dans Gimp et NotePad++ résumée ci-dessous :

1. Premièrement, fermer Gimp s’il est ouvert.
2. Deuxièmement, dans l’explorateur de fichiers, copier Gimp\SaveAnimDuration.scm dans « C:\Users\Chess\AppData\Roaming\GIMP\2.10\scripts\ » en ayant changé « Chess » par votre nom de compte utilisateur Windows 10.
3. Troisièmement, lancer Gimp.

Dans l’interface graphique de Gimp :

1. Premièrement, Gimp menu « Filtres » > « Script-Fu » > « Console« .
2. Deuxièmement, Gimp menu « Fichier » > « Ouvrir » > « gimp-2-10-8-ZeMarmot-frama.webp » normalement également dans les images récentes.

3.4.4.2.2 NotePad++ : SaveAnimDuration.scm est la source du copier-coller

1. Premièrement, copier depuis NotePad++ ou ci-dessous l’expression Lisp suivante dont la fonction est définie en ligne 664 du .scm

(GetCurIdImg)

Il ne faut pas oublier qu’une expression Lisp commence toujours par une parenthèse ouvrante qu’il convient de fermer en fin d’expression avec autant de parenthèse que l’on a ouvert. Plus précisément, prenons la définition d’une fonction mathématique f(x) = y. Ainsi en Scheme, elle sera appelée par :

 (f x)
;-> retourne y

La parenthèse ouvrante « ( » a été décalée avant la fonction f plutôt qu’après.

La fonction f retournera comme résultat y. Par contre, les informaticiens utilisent plus d’une lettre pour leurs noms de fonctions ou de paramètres.

3.4.4.2.3 Gimp : la zone de saisie de la console Script-Fu est la cible du copier-coller

2. Deuxièmement, coller « (GetCurIdImg) » dans la zone de saisie de la console Script-Fu de Gimp au-dessus du bouton « Aide » et avant le bouton « Parcourir » du bord droit.
3. Troisièmement, valider la commande « (GetCurIdImg) » par la touche « Entrée » du clavier. La console affiche le résultat suivant :

1

c’est ainsi que l’identificateur d’image 1 s’affiche correspondant au .webp ouvert par Gimp menu « Fichier » > « Ouvrir » > « gimp-2-10-8-ZeMarmot-frama.webp »

Néanmoins, s’il n’y a pas d’image ouverte dans Gimp, Script-Fu indiquera :

Error: 3000. GetCurIdImg: no image is open in Gimp.
How to fix it? Gimp menu "File" > "Open" > .webp or .gif

3.4.4.2.4 Gimp : obtenir la liste des identificateurs de calques de l’animation

De la même manière, suivre le tutorial dans NotePad++ en copiant « (GetIdLayers (GetCurIdImg)) » dans la console Script-Fu pour obtenir la liste des identificateurs de calques à partir de l’identificateur d’image :

#| Please note that id image 1 is already used. Layer ids begin from 2 until 39
(GetIdLayers (GetCurIdImg))
 |#;-> (2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39)

Comme on pouvait s’y attendre, la liste des identificateurs numériques de calques s’affiche entre parenthèses.

3.4.4.2.5 Gimp : durée d’animation d’un calque

Outre cela, affichons le nom de la première frame :

#| Get the name of the first layer
(car (gimp-item-get-name (car (GetIdLayers (GetCurIdImg)))))
 |# ;-> "Image 1 (123ms)"

Grâce à l’observation dans Gimp du nom du dernier calque n°38 en tête de la fenêtre des calques avec une durée entre parenthèses : « Frame 38 (246ms) » ou « Image 38 (246ms) », copier-coller l’expression TinyScheme mise en avant :

#| Get the name of the last layer
(car (gimp-item-get-name (car (last-pair (GetIdLayers (GetCurIdImg))))))
 |# ;-> "Image 38 (246ms)"

Ainsi, l’analyseur syntaxique « GetDurationLayer » sert à extraire cette durée 246 sous-entendue en milliseconde en recherchant la fin de la chaîne « ms) » dans la ou les expressions parenthésées composant le nom du frame.

(GetDurationLayer "Frame 38 (246ms)")

De ce fait, la fonction « GetDurationLayer » renvoie dans la console Script-Fu l’entier : 246.

3.4.4.2.6 Gimp : faire écrire le fichier des durées d’animation des calques

Par la suite, sautons les étapes du tutorial pour arriver à l’objectif : obtenir la liste des durées correspondant aux calques de l’animation .webp

(writeFile "C:/Users/Chess/Pictures/webp/ZeMarmot/frameDuration.txt" (GetAllDurationLayer (GetIdLayers (GetCurIdImg))))

C’est ainsi que writeFile renvoie #t^[11]#t : True signifiant succès en Scheme si l’écriture a fonctionné. Notez après « GetCurIdImg » la quadruple fermeture de parenthèses caractéristique des programmes Lisp où il faut fermer autant de parenthèses ouvertes.

L’aspect le plus important de NotePad++ est qu’il facilite la fermeture des parenthèses imbriquées en changeant temporairement la couleur des parenthèses ouvrante et fermante de même niveau. Qui plus est, un alignement des blocs identifiés par les parenthèses est indispensable pour éviter l’erreur « #EOF^[12]EOF : End Of File. Fin inattendue du fichier source, sous-entendu il manque au moins une parenthèse fermante » fréquente peu parlante de la console Script-Fu signifiant parenthèses non équilibrées mais où ?

3.4.4.2.7 ISE : conversion des chemins Windows vers Linux avec PowerShell

Au fur et à mesure du développement Scheme, l’erreur la plus courante consiste à utiliser les backslahes « \ » Windows. Alors que TinyScheme de Gimp ne reconnaît que les slashes « / » Linux dans le chemin du fichier texte.

En outre, pensez également à substituer toutes les occurrences de l’utilisateur « Chess » par votre nom d’utilisateur. Alternativement, utiliser un chemin ailleurs que dans l’espace utilisateur notamment pour ne pas à avoir à gérer les droits utilisateurs.

Il est vrai que vous pouvez utiliser l’utilitaire PowerShell\Convert-PathWinToLinux.ps1 fourni dans l’archive zippée. Car il ne modifie que le presse-papier.

1. Premièrement, depuis la barre de navigation horizontale de l’explorateur de fichier, copier le chemin sélectionné dans le presse-papier par Ctrl+C.
2. Deuxièmement, dans Windows PowerShell ISE^[13]ISE : Microsoft Windows PowerShell Integrated Scripting Environment, lancer Convert-PathWinToLinux.ps1. Le chemin converti en Linux se trouve également dans le presse-papier.
3. Troisièmement, coller le chemin Linux là où un script TinyScheme le demande par Ctrl+V.

En conséquence, pour que ces trois opérations soient efficaces, il faut avoir en permanence Windows PowerShell ISE ouvert.

3.4.4.2.8 Gimp : fichier frameDuration.txt des durées des frames de l’animation

Pour conclure, les scripts TinyScheme lancés dans la console Script-Fu de Gimp ont permis de récupérer les durées des frames en extrayant cette durée du nom de chaque Frame de l’animation WebP.

frameDuration.txt à obtenir est un fichier texte de 38 lignes :

123
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
287
164
82
41
41
41
41
41
41
41
82
82
82
41
41
41
82
246

Par ailleurs, TinyScheme de Gimp écrit un fichier texte au format Unix pour les fins de lignes (LF). En revanche, la fonction « WriteCrLf » écrit le fichier texte au format Windows CR+LF pour les EOL^[14]EOL : End Of Line.

Pour terminer, ces durées permettront de reconstituer l’animation WebP de la marmotte à l’identique au niveau timing mais encore plus optimisée en taille.

4. Google Speed WebP coder

En premier lieu, l’équipe Speed de Google diffuse en open source la librairie d’encodage et de décodage libwebp((« A new image format for the Web » by Google Speed, Google.com, 13 juillet 2019)) ainsi que les outils en ligne de commande.

4.1 Télécharger la librairie Google libwebp 64-bit pour Windows 10

1. Premièrement, scroller en bas de page jusqu’au 6 janvier 2020 : libwebp-1.1.0-windows-x64.zip
2. Deuxièmement, dézipper dans C:\Tool\WebP\libwebp-1.1.0-windows-x64

Par ailleurs, les outils en ligne de commande sont donc dans C:\Tool\WebP\libwebp-1.1.0-windows-x64\bin

4.2 Google cwebp : encoder un JPEG en WebP

4.2.1 Windows 10 : ouvrir une session PowerShell

Tout d’abord, cliquer avec le bouton droit de la souris (clic droit) sur le bouton « Démarrer » de Windows 10 > menu contextuel « Windows Powershell« 

Windows PowerShell
Copyright (C) Microsoft Corporation. Tous droits réservés.

PS C:\Users\Chess>

Ensuite, l’invite « PS » comme PowerShell présente le répertoire utilisateur dénommé « Chess ».

Par ailleurs, adapter ce nom d’utilisateur par le votre dans tous les chemins.

Toutefois, encore plus simplement, créer votre dossier « webp » ailleurs que dans votre dossier utilisateur (Users) sinon il faudra donner les autorisations en écriture à chaque outil de Google WebP Coder.

PS C:\Users\Chess> cd C:\Users\Chess\Pictures\webp
PS C:\Users\Chess\Pictures\webp>

4.2.2 Console PowerShell : lancer l’encodeur Google cwebp

Commençons par examiner la commande d’export et de compression de JPEG vers WebP. Ainsi, elle se présente sur une ligne séparée après l’invite pour faciliter le copier-coller. En fait, elle se colle après l’invite de Powershell « PS … >  » traditionnellement.

C:\Tool\WebP\libwebp-1.1.0-windows-x64\bin\cwebp.exe  -v -sns 80 -m 6 -q 75 -mt iconWebP.jpg -o iconWebP.webp

Time to read input: 0.023s
Saving file 'iconWebP.webp'
Time to encode picture: 0.029s
File:      iconWebP.jpg
Dimension: 250 x 250
Output:    6532 bytes Y-U-V-All-PSNR 39.11 45.66 48.43   40.52 dB
           (0.84 bpp)
block count:  intra4:        219  (85.55%)
              intra16:        37  (14.45%)
              skipped:        16  (6.25%)
bytes used:  header:             76  (1.2%)
             mode-partition:    957  (14.7%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      95%|       1%|       1%|       3%|     256
      quantizer:  |      27 |      17 |       8 |       8 |
   filter level:  |       8 |       4 |       2 |       0 |

Pour terminer, voilà comment l’icône de cet article a été optimisée en WebP en dehors de Gimp. En somme, la plus importante option est « -m 6 » pour obtenir la compression maximum.

4.2.3 Console PowerShell : aide sur Google cwebp

D’abords, retenons les options principales :

-v      verbose, e.g. print encoding/decoding times
-sns 80 spatial noise shaping (0:off, 100:max), default=50
-m 6    compression method (0=fast, 6=slowest), default=4
-q 75   quality factor (0:small..100:big), default=75
-mt     use multi-threading if available
-o      out_file in WebP format

En outre pour obtenir l’aide sur l’outil, après le nom de l’exécutable, entrer l’option « -help » ou « -longhelp »

C:\Tool\WebP\libwebp-1.1.0-windows-x64\bin\cwebp.exe -longhelp
Usage:
 cwebp [-preset <...>] [options] in_file [-o out_file]

If input size (-s) for an image is not specified, it is
assumed to be a PNG, JPEG, TIFF or WebP file.
Windows builds can take as input any of the files handled by WIC.

Options:
  -h / -help ............. short help
  -H / -longhelp ......... long help
...

4.3 PowerShell : Google webpinfo analyse une animation WebP

En premier lieu, l’objectif de l’utilitaire Google webpinfo est d’afficher textuellement des informations techniques sur une animation WebP notamment la taille des frames et les durées d’affichage.

1. Premièrement, dans la session PowerShell, aller dans le dossier ZeMarmot :

PS C:\Users\Chess\Pictures\webp\ZeMarmot>

2. Deuxièmement, coller la commande Google webpinfo pour obtenir de l’information sur l’animation d’origine :

C:\Tool\WebP\libwebp-1.1.0-windows-x64\bin\webpinfo.exe -summary gimp-2-10-8-ZeMarmot-frama.webp > gimpZeMarmotOriginalInfo.txt 

En conséquence, dans le fichier texte gimpZeMarmotOriginalInfo.txt (24 Ko) généré, une liste d’informations techniques s’affiche par frame :

File: gimp-2-10-8-ZeMarmot-frama.webp
RIFF HEADER:
  File size: 371658
Chunk VP8X at offset     12, length     18
  ICCP: 0
  Alpha: 1
  EXIF: 0
  XMP: 0
  Animation: 1
  Canvas size 1001 x 768
Chunk ANIM at offset     30, length     14
  Background color:(ARGB) ff ff ff ff
  Loop count      : 0
Chunk ANMF at offset     44, length  13282
  Offset_X: 0
  Offset_Y: 0
  Width: 1001
  Height: 768
  Duration: 123
[...]

3. Troisièmement, retenons essentiellement en tête la taille de l’animation d’origine de 371 658 octets soit 363 Ko et la durée « Duration: 123 » en ms de la première frame.

Ainsi nous retrouvons bien la première ligne « 123 » de frameDuration.txt obtenue avec le script TinyScheme au chapitre 3.4.4.2.8.

4.3.1 ISE : analyse syntaxique des durées générées par webpinfo

Tout d’abord, supposons que vous voulez extraire l’information numérique après « Duration:  » pour toutes les frames afin de reconstituer le fichier texte frameDuration.txt en PowerShell à partir de la production Google WebPinfo. Tout en reconnaissant que l’on s’intéresse plus à la méthodologie qu’au résultat puisqu’on l’a déjà. Ainsi, une copie de sauvegarde permettra de la comparer avec le nouveau frameDuration.txt généré.

1. Premièrement, dans Windows PowerShell ISE, menu « Fichier » > « Ouvrir… » GetWebpDuration.ps1 fourni dans WebP.zip
2. Deuxièmement, coller les droits d’exécution d’un script PowerShell dans la console bleue de Windows PowerShell ISE.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

1. Premièrement, dans l’éditeur d’ISE, configurer le script en adaptant les chemins à vos dossiers.
   Choisir le projet ZeMamot ou l’immortelle d’Anderssen selon le flag :

$isZeMarmot = $true # $false pour l'immortelle d'Anderssen

2. Deuxièmement, exécuter le script par Windows PowerShell ISE menu « Fichier » > « Executer » (F5)

PS C:\Users\Chess\Pictures\webp\ZeMarmot> C:\Tool\WebP\PowerShell\GetWebpDuration.ps1
COMMENTAIRES : Processing C:\Users\Chess\Pictures\webp\ZeMarmot\gimpZeMarmotOriginalInfo.txt in progress...
COMMENTAIRES : Frames  number: 38
COMMENTAIRES : First duration: 123
COMMENTAIRES : Last  duration: 246
COMMENTAIRES : The duration file C:\Users\Chess\Pictures\webp\ZeMarmot\frameDuration.txt has been successfully generated!
COMMENTAIRES : Frames have DIFFERENT durations

4.3.1.1 Windows PowerShell ISE : ConvertFrom-String IA interactive

Ensuite, après cette première exécution, le contexte des variables PowerShell existe encore pour expérimenter l’analyseur syntaxique d’IA^[15]IA : Intelligence Artificielle ConvertFrom-String dans la console bleue d’ISE :

$webpinfoOutput | ConvertFrom-String -TemplateContent $templateWebPinfo -OutVariable Frames

Ainsi, valider cette commande issue de la ligne 48 du script sans la redirection « Out-Null » affiche directement les durées.

duration
--------
123     
82      
...  
246    

4.3.1.2 Console ISE : portée de l’échantillon WebPinfo à analyser

De la même manière, l’extrait nécessaire et suffisant, issu de Google WebPInfo, peut être obtenu interactivement en affichant le modèle $templateWebPinfo. Plus précisément, il est en paramètre de l’analyseur ConvertFrom-String((« ConvertFrom-String: Example-based text parsing » by PowerShell Team, Microsoft.com, 31 octobre 2014)) basée sur la technologie d’IA par apprentissage par l’exemple.

PS C:\Users\Chess\Pictures\webp\ZeMarmot> $templateWebPinfo
Chunk ANIM at offset     30, length     14
  Background color:(ARGB) ff ff ff ff
  Loop count      : 0
Chunk ANMF at offset     44, length  13282
  Offset_X: 0
  Offset_Y: 0
  Width: 1001
  Height: 768
  Duration: {duration*:123}
  Dispose: 0
  Blend: 1
Chunk VP8  at offset     68, length  13258
  Width: 1001
  Height: 768
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
Chunk ANMF at offset  13326, length   1486
  Offset_X: 944
  Offset_Y: 520
  Width: 57
  Height: 142
  Duration: {duration*:82}
  Dispose: 1
  Blend: 0

Pour comprendre le modèle, seule la partie intéressante à extraire est encapsulée entre « { » … « } » c-a-d la valeur numérique des durées.

Ainsi en ligne 24, l’original « Duration: 123 » est encapsulé par « Duration: {duration*:123} » avec « duration* » le nom du token^[16]token : symbole en analyse lexicale choisi par vous. Cependant ne tenter pas le diable en mettant des accents grenouillards^[17]grenouillard : FRoggy, mangeur de grenouille dans cet identificateur comme « durée ». De plus, une étoile en suffixe marque ce token comme clef.

4.3.1.3 Console ISE : réglage du corpus WebPinfo pour mise au point du modèle

Après cela, vous pouvez expérimenter différents corpus issus de Google WebPinfo à faire analyser par le programme d’IA.

Il suffit de prendre par exemple le modèle minimum sans aller à l’extrémité du modèle à deux lignes, une par durée. Car l’indentation de la marge gauche exprime une structuration comme les parenthèses dans Lisp.

Donc, supprimons le premier groupe « Chunk ANIM » de trois lignes et celui « Chunk VP8 ». Ainsi il ne reste que deux groupes « Chunk ANMF » dans le modèle $templateWebPinfo défini par une here string c-a-d contenant des retours-charriots entre « @' » et « ‘@ ». Ensuite, copier-coller après le « > » de l’invite PowerShell dans la console bleue de l’ISE :

$templateWebPinfo = @'
Chunk ANMF at offset     44, length  13282
  Offset_X: 0
  Offset_Y: 0
  Width: 1001
  Height: 768
  Duration: {duration*:123}
  Dispose: 0
  Blend: 1
Chunk ANMF at offset  13326, length   1486
  Offset_X: 944
  Offset_Y: 520
  Width: 57
  Height: 142
  Duration: {duration*:82}
  Dispose: 1
  Blend: 0
'@

Outre cela, ne pas oublier de valider l’instruction multiligne par « Entrée ». De nouveau, relancer l’analyse syntaxique par :

$webpinfoOutput | ConvertFrom-String -TemplateContent $templateWebPinfo -OutVariable Frames

De toute évidence, l’analyseur syntaxique d’IA a bullé. Car il a extrait des durées nulles dont on ne saura jamais quelles étaient ses intuitions inconscientes.

duration
--------
0       
123     
0       
82      
0       
82      
...   
0       
246     
0    

En conclusion de cette expérimentation d’auto-apprentissage, c’est à celui qui définit de modèle de choisir le corpus suffisant en ayant une forte idée du résultat à obtenir.

4.3.1.4 Editeur ISE : validation du modèle en changeant d’animation

Finalement, la validation véritable du corpus nécessaire et suffisant s’obtient quand le modèle est capable de reconnaître le WebPinfo d’une autre image animée comme l’immortelle sans aucune adaptation du modèle. D’autant plus que les données numériques produites diffèrent. Ainsi, dans l’éditeur ISE, passer à l’immortelle :

$isZeMarmot = $false # pour l'immortelle d'Anderssen

A juste titre, le programme d’IA aura finement compris la structure des informations de Google WebPinfo avec un investissement minimum du concepteur du modèle, c-a-d vous !

PS C:\Users\Chess\Pictures\webp\immortal> C:\Tool\WebP\PowerShell\GetWebpDuration.ps1
COMMENTAIRES : Processing C:\Users\Chess\Pictures\webp\immortal\immortalInfo.txt in progress...
COMMENTAIRES : Frames  number: 46
COMMENTAIRES : First duration: 1800
COMMENTAIRES : Last  duration: 1800
COMMENTAIRES : The duration file C:\Users\Chess\Pictures\webp\immortal\frameDuration.txt has been successfully generated!
COMMENTAIRES : All frames have the SAME duration

4.4 Console PS : Google anim_dump décompile une animation

Tout d’abord, l’outil anim_dump.exe permet d’extraire chaque frame d’une animation.

1. Premièrement, passer du dossier ZeMarmot à celui de l’immortelle dans la console PowerShell :

PS C:\Users\Chess> cd C:\Users\Chess\Pictures\webp\ZeMarmot
PS C:\Users\Chess\Pictures\webp\ZeMarmot> cd ..\immortal
PS C:\Users\Chess\Pictures\webp\immortal>

2. Deuxièmement, sans couper les cheveux en quatre, Google anim_dump décompile chaque frame de l’image GIF de l’immortelle au format TIFF^[18]TIFF : Tagged Image File Format dans le sous-dossier « tiff » :

C:\Tool\WebP\libwebp-1.1.0-windows-x64\bin\anim_dump.exe -folder tiff -tiff Immortal_game_animation.gif

Decoding file: Immortal_game_animation.gif as tiff/dump_NNNN.tiff

Par conséquent, l’animation GIF de l’immortelle d’Anderssen se retrouve découper en 46 images de dump_0000.tiff à dump_0045.tiff de taille fixe de 237 Ko pour un volume total de 10.6 Mo.

En cette période où l’accès aux plages n’est plus autorisé y compris éventuellement à l’immortelle maîtresse nageuse sauveteuse en maillot de bain rouge, l’alternative PAM^[19]PAM : Portable Arbitrary Map, un format d’image développé par Bryan Henderson, offre un volume comparable.

De la même manière, la décompilation de l’animation ZeMarmot.webp donne un dossier tiff d’un volume total de 111 Mo avec 3.004 Mo par frame.

4.5 PowerShell ISE : Google img2webp crée l’animation WebP

Tout d’abord, dans l’éditeur de Windows PowerShell ISE :

ISE menu « Fichier » > « Ouvrir » > « TiffToWebPanim.ps1″

4.5.1 ISE : Google img2webp génère l’animation de l’immortelle

D’abord, vous pouvez basculer d’un projet à l’autre en déplaçant le « # » de commentaire dans l’éditeur Windows PowerShell ISE :

# 2020/04/26: TiffToWebPanim.ps1 1.0 converts frames *.tiff to .webp animation using Google img2webp
Set-StrictMode -Version 2.0 # Powershell open source without any warranty powered by echiquierBriochin.fr
# http://echiquierbriochin.fr/webp-gif-le-jpeg/
#$project="ZeMarmot"; $loop="0"; $zip="6"; $quality="0.8"; $TimeExpected="15s"; $mode="lossy" #1001x768
$project  = "immortal"; $loop = "1001"; $zip = "6"; $quality = "1";   $TimeExpected =  "2s"; $mode = "lossless" # 244 x 246

Ensuite, en lançant le script par F5, le résultat s’affiche dans la console bleue d’ISE :

PS C:\Users\Chess\Pictures\webp\immortal>

C:\Chess\Scid\PowerShell\TiffToWebPanim.ps1

COMMENTAIRES : Processing frames during about 2s in progress...
00:00:02.0715917
Added frame #  0 at time    0 (file: C:\Users\Chess\Pictures\webp\immortal\tiff\dump_0000.tiff)
Added frame #  1 at time 1800 (file: C:\Users\Chess\Pictures\webp\immortal\tiff\dump_0001.tiff)
Added frame #  2 at time 3600 (file: C:\Users\Chess\Pictures\webp\immortal\tiff\dump_0002.tiff)
...
Added frame # 44 at time 79200 (file: C:\Users\Chess\Pictures\webp\immortal\tiff\dump_0044.tiff)
Added frame # 45 at time 81000 (file: C:\Users\Chess\Pictures\webp\immortal\tiff\dump_0045.tiff)
output file: immortal.webp     [46 frames, 34832 bytes].

Name          Length LastWriteTime       Directory                            
----          ------ -------------       ---------                            
immortal.webp  34832 13/04/2020 13:23:33

En conclusion, initialement à 109 Ko sur Wikipedia, l’animation de l’immortelle au format WebP, qui bouge dans l’introduction, se retrouve optimisée à seulement 34 Ko.

4.5.2 ISE : Google img2webp optimise l’animation ZeMarmot

# 2020/04/26: TiffToWebPanim.ps1 1.0 converts frames *.tiff to .webp animation using Google img2webp
Set-StrictMode -Version 2.0 # Powershell open source without any warranty powered by echiquierBriochin.fr
# http://echiquierbriochin.fr/webp-gif-le-jpeg/
$project = "ZeMarmot"; $loop = "0";    $zip = "6"; $quality = "0.8"; $TimeExpected = "15s"; $mode = "lossy" #1001x768
#$project= "immortal"; $loop = "1001"; $zip = "6"; $quality = "1";   $TimeExpected =  "2s"; $mode = "lossless" #244x246

4.5.2.1 Editeur ISE : mise au point des paramètres de Google img2webp

Un aspect plus spécifique est les paramètres de Google img2webp. Ainsi, passons le script PowerShell « TiffToWebPanim.ps1 » en mode debug.

$isDebug = $true

Après cela, le script se justifie par l’ensemble des paramètres à fournir à Google img2webp :

-v -lossy -m 6 -q 0.8 -d 123 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0000.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0001.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0002.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0003.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0004.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0005.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0006.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0007.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0008.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0009.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0010.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0011.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0012.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0013.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0014.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0015.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0016.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0017.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0018.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0019.tiff -lossy -m 6 -q 0.8 -d 287 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0020.tiff -lossy -m 6 -q 0.8 -d 164 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0021.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0022.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0023.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0024.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0025.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0026.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0027.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0028.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0029.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0030.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0031.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0032.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0033.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0034.tiff -lossy -m 6 -q 0.8 -d 41 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0035.tiff -lossy -m 6 -q 0.8 -d 82 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0036.tiff -lossy -m 6 -q 0.8 -d 246 C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0037.tiff -o gimpZeMarmot.webp

Au fur et à mesure du défilement vertical, noter les durées parfois différentes par frame.

4.5.2.2 ISE : optimisation de l’animation de la marmotte par Google img2webp

Finalement, en repassant debug à $false, Google img2webp trace :

PS C:\Users\Chess\Pictures\webp\ZeMarmot>

C:\Chess\Scid\PowerShell\TiffToWebPanim.ps1

COMMENTAIRES : Processing frames during about 15s in progress...
00:00:15.2386961
Added frame #  0 at time    0 (file: C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0000.tiff)
Added frame #  1 at time  123 (file: C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0001.tiff)
Added frame #  2 at time  205 (file: C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0002.tiff)
...
Added frame # 36 at time 2870 (file: C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0036.tiff)
Added frame # 37 at time 2952 (file: C:\Users\Chess\Pictures\webp\ZeMarmot\tiff\dump_0037.tiff)
output file: ZeMarmot.webp     [38 frames, 86296 bytes].

Name          Length LastWriteTime       Directory                            
----          ------ -------------       ---------                            
ZeMarmot.webp  86296 13/04/2020 13:37:33 C:\Users\Chess\Pictures\webp\ZeMarmot

4.5.2.3 Chrome vs Edge Legacy : quand les marmottes sont balancées

Dans le sens de lecture occidentale de gauche à droite puis de haut en bas selon la lettre Z, le rapport chronologique aurait dû faire placer le passé « legacy » à gauche et le future à droite((« Before and After: Ad Placement Should Reflect Cultural Conceptions of Time » by Mary-Ann Twist, University of Chicago Press, mars 2013)). Car en publicité comparative, le consommateur retient le produit placé à droite((« A gauche ou à droite ? Où placer les images sur votre site… », eCommerce-pratique)). Ainsi, la balance du chapitre 2 aurait-elle été orientée du mauvais côté avec une pente négative en plaçant WebP à gauche et JPEG à droite ?

En fait, la pente négative de la balance symbolise l’orientation du backslash dans les chemins Windows. Faire un glisser-déposer depuis l’Explorateur de fichiers d’un fichier texte comme WebP.txt vers Internet Explorer 11 ou Edge Legacy et vous aurez dans la barre de navigation : « C:\Tool\WebP\WebP.txt » avec des backslahes.

4.5.2.4 Chrome vs Edge Chromium : animation de la même marmotte

A nouveau, faire un glisser-déposer depuis l’Explorateur de fichiers de WebP.txt vers Chrome ou Edge Chromium. Alors vous obtiendrez dans la barre de navigation : « C:/Tool/WebP/WebP.txt » avec des slashes, une révolution pour le navigateur Microsoft Edge qui adopte le projet open source Chromium de Google.

De plus, le copier-coller du chemin dans la barre de navigation donne l’URI^[20]URI : Uniform Resource Identifier : « file:///C:/Tool/WebP/WebP.txt » universellement avec des slashes.

En premier lieu, il serait plus équitable de visualiser la même animation WebP, si possible la plus légère de l’échiquier Briochin, simultanément sur Google Chrome et Microsoft Edge Chromium.

Il faut reconnaître que la différence dans la barre de navigation ne saute pas aux yeux immédiatement.

Alors qu’à gauche, Chrome a choisi les trois points verticaux sur son bord droit, Edge Chromium, à droite, préfère les trois points horizontaux à côté du bleu « InPrivate ».

4.5.2.5 Chrome vs Edge Chromium : comparaison mémoire des navigateurs

Finalement, comparons l’occupation mémoire des deux navigateurs par Ctrl+Shift+Esc :

Au moment de la capture d’écran, lors de l’animation locale Ze Marmot en WebP, Google Chrome sur Windows 10 semble occuper plus la CPU en moyenne que Microsoft Edge Chromium.

4.5.2.6 Ze Marmot généré par echiquierBriochin.fr

Pour conclure, alors que l’animation ZeMarmot.webp est à 363 Ko sur le site de Gimp du 8 novembre 2018, elle est ci-dessous optimisée à 85 Ko :

En ce qui concerne cette marmotte spatialisée tel l’os dans « 2001 l’odyssée de l’espace« , on croit quelle a disparu mais elle revient et revient en boucle : elle représente quoi ?

5. L’équipe WebP

En premier lieu, le 30 septembre 2010, Richard Rabbat, chef de produit WebP de Google, annonce WebP((« WebP, a new image format for the Web » by Richard Rabbat, Chromium.org, 30 septembre 2010)).

Ensuite, la firme de Moutain View publie une analyse comparative « Comparative study of WebP, JPEG and JPEG 2000, September 2010″((« Comparative study of WebP, JPEG and JPEG 2000, September 2010″ by Google, Google.com, 1er octobre 2010)) qu’elle met à jour.

5.1 Urvang Joshi

Dans le pays de Viswanathan Anand, Urvang a travaillé pour Yahoo, Microsoft Bing et, depuis2011, pour Google.

En outre, le 18 novembre 2011, au centre de recherche europe de Google à Zürich et à Bangalore, Jyrki Alakuijala, Vikas Arora et Urvang Joshi publient « Lossless and transparency encoding in WebP »((« Lossless and transparency encoding in WebP » by Jyrki Alakuijala, Vikas Arora, and Urvang Joshi, Google WebP team, BlogSpot.com, 18 novembre 2011)).

5.1.1 Une partie de jeu d’échecs de monarch007

Il faut souligner que Urvang est un joueur de jeu d’échecs sous le pseudonyme de « monarch007 » :

Bien que les Noirs soient gagnants, le cœur de leur monarque balance plusieurs fois entre l'aile roi ou l'aile dame, la sécurité tranquille ou l'offensive dangereuse.

5.2 Google Developers Live

Puis le 5 mars 2013, lors du Google Developers Live, Ilya Grigorik(("Optimisation de l'image" d'Ilya Grigorik, Google.com, 2 juillet 2018)) et Stephen Konig présentent "WebP enabling faster, smaller and more beautiful web" que l'on peut suivre en parallèle en mode slides :

5.3 Gastronomie suisse allemande

Tout d'abord, la gastronomie suisse allemande s'invite dans les noms de produits du centre de recherche europe de Google à Zürich :

• Guetzli (biscuit) : compression JPEG ;
• Brötli (petit pain) : compression de polices ;
• Zöpfli (brioche) : compression compatible zip ;
• Butteraugli (pâtisserie au beurre) : outil de comparaison d'images .png, .jpg ciblant la très haute qualité entre 90 et 95%.

Ainsi, en 2017, Jyrki Alakuijala de l'équipe initiale WebP continue à améliorer l'encodage des images numériques avec Guetzli, un encodage JPEG encore plus compressé pour les images de haute qualité supérieure à 85%.

PS C:\Tool\WebP\Jpeg\Guetzli> 

.\guetzli_windows_x86-64.exe
Guetzli JPEG compressor. Usage:
guetzli [flags] input_filename output_filename

Flags:
  --verbose    - Print a verbose trace of all attempts to standard output.
  --quality Q  - Visual quality to aim for, expressed as a JPEG quality value.
  --memlimit M - Memory limit in MB. Guetzli will fail if unable to stay under
                 the limit. Default is 6000 MB
  --nomemlimit - Do not limit memory usage.

(Measure-Command {.\guetzli_windows_x86-64.exe --quality 85 --nomemlimit NppGimpScript-Fu.jpg NppGimpScript-Fuguetzli.jpg}) -f "Time HH:MM:SS"
00:00:36.6812441

25/04/2020     12:31         139649 NppGimpScript-Fu.jpg
25/04/2020     12:35          66036 NppGimpScript-Fu.webp       -52.7 %
27/04/2020     13:12         102617 NppGimpScript-Fuguetzli.jpg -26.5 %

..\Butteraugli\butteraugli.exe NppGimpScript-Fu.jpg NppGimpScript-Fuguetzli.jpg heatmap.ppm
4.005546

(Measure-Command {.\guetzli_windows_x86-64.exe --quality 85 --nomemlimit 118-1024x768.jpg 118-1024x768guetzli.jpg}) -f "Time HH:MM:SS"
00:01:00.5971406

11/04/2020     16:20          98928 118-1024x768.jpg
11/04/2020     16:21          47306 118-1024x768.webp       -52.2 %
27/04/2020     13:03          71630 118-1024x768guetzli.jpg -27.6 %

..\Butteraugli\butteraugli.exe 118-1024x768.jpg 118-1024x768guetzli.jpg heatmap.ppm
3.158718

En conclusion, l'échiquier Briochin conserve WebP car Guetzli n'est pas meilleur que WebP en terme de taille même si la qualité psychovisuelle ciblée est meilleure que WebP. Par contre l'asymétrie du temps d'encodage par rapport au décodage qui doit être minimal rend Guetzli beaucoup plus long que WebP lors de la phase d'encodage.

5.4 La résurrection du GIF

Tout d'abord, en référence au premier chapitre, comment prononcer Gfycat ? Dire “jiffy-cat” qui signifie "GIF Format Yoker" + chat.

Par ailleurs, l'initiale "y" désigne éventuellement le personnage de clown Yoker. Les GIF animés, qui le représente, fleurissent sur la toile dans une sorte de résurgence du film muet avec des séquences souvent courtes et drôles qui tournent en boucle. L'industrie du cinéma et le marketing digital s'intéressent de plus en plus aux GIF animés.

Gfycat est cité par Jeremy Wagner(("Converting Images To WebP" by Jeremy Wagner, Smashing magazine, 24 juillet 2018)) sur Web Fundamentals(("Replace Animated GIFs with Video" de Jeremy Wagner, Google.com, 27 août 2019)).

Pour boucler la boucle avec le début de cet article comparant le GIF animé de l'immortelle sur Wikipedia, voici le retour du GIF customisé par Gfycat dont le CEO est Richard Rabbat, ancien^[21]En mars 2014, le chef de produit WebP est Husain Bengali. chef de produit WebP.

Vers un GIF plus rapide, plus léger, avec beaucoup plus de couleurs que GIF ?

La page d'accueil de GfyCat présente également des animations au format WebP.

With billions shared every day, GIFs have quickly become a major disseminator of pop and digital culture.

Richard Rabbat, CEO of Gfycat(("Want to make your name as a streamer? Work on your GIF game" by Richard Rabbat, VentureBeat, 22 juin 2018))

Gfycat est cité sur le Wikipedia francophone. Alors que Gfycat a sa page sur le Wikipedia anglais.

5.5 Saga d'intégration de WebP dans Wikipedia

En conclusion, huit ans après le lancement de WebP, Richard Rabbat dresse une synthèse sur WebP citant notamment Wikipedia :

My favorite resource on the web, Wikipedia, now serves WebP. Mathias Schindler led that change over the many years and go it to the finish line. Wikipedia exemplifies the best in humanity and the fact that it embraces WebP is humbling.

Richard Rabbat(("WebP image support, an 8-year saga" by Richard Rabbat, Medium, 22 novembre 2018))

Tout d'abord, le 3 octobre 2010, le Wikipédian allemand Mathias Schindler((T27397 "Add .webp to the list of accepted file types on Wikimedia Commons uploads" de Mathias Schindler, Phabricator Wikimedia, 3 octobre 2010)) propose la technologie Google WebP dans Wikimedia Commons.

Par ailleurs, il faudra attendre le 17 janvier 2017 dans l'organe de presse interne dénommé Le Bistro((Tech News 2017-03, Le Bistro, Wikipedia.org, 17 janvier 2017)) des Wikipédians francophone l'annonce : "Il est maintenant possible de téléverser des fichiers WebP sur Commons."

Finalement, le 1er mai 2020, Wynnandrewj change l'illustration de l'infobox WebP dans toutes les langues. Cependant, elle reste servie en png, plus précisément avec l'extension .webp.png dans l'espace encyclopédique Wikipedia, y compris pour ceux qui croquent dans le fruit défendu. L'illustration de WebP sur Commons a été téléversée au format WebP.

6. Références