Name: Tremplin Numérique
Price range: $$$

Avez-vous déjà vu ces GIF qui animent la ligne de commande et vous êtes-vous demandé à quoi ils étaient si beaux ? Ou vous avez vu un petit GIF et vous vous demandez pourquoi ils sont si petits ? Ce n'est pas aussi difficile qu'on pourrait le penser, et j'aborde les deux avec deux commandes faciles à utiliser.

VHS est une commande permettant de générer des GIF à partir d'un fichier de script et Gifsicle est une commande permettant de les modifier. Lorsqu'ils sont utilisés ensemble, ils peuvent créer des GIF très compacts et d'aspect professionnel. J'explique ce qu'est le VHS, comment l'utiliser et comment compresser le GIF obtenu afin qu'il soit à peine plus grand qu'un fichier PNG classique.

Sommaire

Une démo de VHS

On dit qu’une image vaut mille mots, alors en voici une qui est littéralement vraie dans ce cas :

Cette animation était destinée à un article que j'ai écrit sur fzf. Voici une autre image du même article :

Ils sont magnifiques, n'est-ce pas ? Croyez-le ou non, ce n'était ni difficile ni trop technique, et cela n'a pas non plus abouti à une image volumineuse et volumineuse. En fait, la première image ne fait que 223 Ko et la seconde est encore plus petite à 22 Ko. Alors comment ai-je fait ? Avec VHS, Gifsicle et un peu de sorcellerie.

Les concepts clés du VHS expliqués

Le concept de base derrière VHS est le fichier bande, une séquence de commandes scriptées qui simule une session de terminal. Voici un exemple simple :

Output output.gif

Type 'ls -al' Enter
Sleep 2s

Cette bande particulière fait trois choses :

Spécifie un fichier GIF « Sortie ».
Simule la saisie d'une commande (« Type ») puis l'appui sur « Entrée ».
« Dort » pendant 2 secondes pour permettre au lecteur de traiter les actions.

Lorsque vous exécutez cette bande, vous verrez la commande saisie dans le terminal et exécutée. L'animation bouclera ensuite après une brève pause.

Générez le fichier GIF en exécutant vhs mon-fichier.tape dans votre terminal.

Le GIF obtenu :

Maintenant, écrivons une cassette

Écrivons maintenant un exemple plus complexe et concentrons-nous sur quelques détails.

Comprendre le fichier bande

Le fichier bande suivant créera le GIF « une aiguille dans une botte de foin » vu précédemment. Je vais clarifier la signification de chaque ligne ci-dessous.

Output unoptimized.gif

Require fzf

Set FontSize 32
Set Width 1200
Set Height 675
Set TypingSpeed 0.15
Set Shell "zsh"
Set Framerate 5

Hide
Type 'eval "$(fzf --zsh)"' Enter
Type 'clear' Enter
Show

Type 'cat lorem.txt'
Sleep 1
Enter
Sleep 2s

Type 'cat lorem.txt | fzf'
Sleep 1
Enter
Sleep 0.5

Type "needle"
Sleep 1
Enter
Sleep 3s

La directive « Require » garantit que « fzf » est présent sur votre système avant de continuer.

La directive « Sortie » ne nécessite aucune explication, mais sachez que vous pouvez effectuer le rendu au format GIF, MP4, WebM ou dans un répertoire d'images individuelles à traiter séparément.

Les directives « Set » doivent être spécifiées ensuite, en haut du fichier sur bande. Ils appliquent diverses options, telles que « Largeur », « Hauteur », « Coque », « Framerate » et même « TypingSpeed ». Ces options sont explicites. Vous pouvez modifier la vitesse de frappe n'importe où dans le fichier bande, mais vous devez spécifier toutes les autres options en haut.

J'ai délibérément réglé la fréquence d'images à un niveau bas pour réduire la taille de l'image, mais cela peut parfois entraîner des problèmes de rendu. Si tel est le cas, augmentez le « Framerate » ou supprimez complètement la directive.

La section « Masquer » est la suivante, et c'est ici que nous effectuons la configuration du script. Nous ajoutons ici toutes les commandes que nous ne voulons pas rendre. Dans cet exemple, nous configurons l'environnement fzf et effaçons le terminal pour supprimer tous les messages indésirables de son évaluation shell. Nous terminons la section « Masquer » par une directive « Afficher », qui indique à VHS d'enregistrer ce qui suit.

La ligne 17 est l'endroit où commence le rendu visuel. Tout d'abord, il contient un fichier rempli de texte Lorem Ipsum – c'est la botte de foin que nous allons parcourir avec fzf. Le script « Dort » souvent parce qu'il améliore l'apparence de l'animation.

À la ligne 22, nous récupérons le fichier texte, le redirigeons vers fzf, appuyons sur la touche Entrée, et à la ligne 22, nous tapons enfin le terme de recherche : aiguille. Nous terminons le script par un long « Sleep » pour laisser à l'utilisateur le temps de traiter l'image.

La commande entière doit créer un fichier texte pour afficher son contenu, puis le lancer à nouveau et le rechercher à l'aide de fzf.

Créer le fichier bande

Avant de générer un GIF à partir de votre fichier bande, assurez-vous d'avoir installé fzf. Vous devez également créer un fichier texte lorem ipsum. Exécutez donc la commande suivante :

{
  echo -e "You can use fzf to find a needle in a haystack.n";
  curl 'https://pastebin.com/raw/nRc62E07';
} > lorem.txt

Maintenant, créez un fichier bande appelé fzf-demo.tape, entrez le contenu du fichier bande et exécutez la commande suivante pour générer le GIF :

vhs fzf-demo.tape

Cette commande produira un GIF appelé « unoptimized.gif », que nous compresserons dans la section suivante.

Compresser le GIF

Le « unoptimized.gif » que nous avons créé fait environ 1,2 Mo, ce qui est souvent trop volumineux. Nous pouvons le compresser avec une commande appelée Gifsicle. Vous pouvez l'installer avec les commandes suivantes :

Pour Fedora, exécutez la commande suivante :

sudo dnf install gifsicle

Pour Debian, exécutez la commande suivante :

sudo apt install gifsicle

Pour Arch Linux, exécutez la commande suivante :

sudo pacman -S gifsicle

Maintenant que Gifsicle est installé, vous pouvez compresser le fichier « unoptimized.gif » avec la commande suivante :

gifsicle -O3 --colors 8 unoptimized.gif -o optimized.gif

Cela compressera le GIF à environ 228 Ko.

Au lieu d'utiliser une palette de couleurs complète, j'ai opté pour huit bits. Outre la réduction de la résolution, la réduction du nombre de couleurs constitue le plus grand gain de place. Si votre session de terminal contient une large gamme de couleurs que vous souhaitez conserver, définissez-la plus haut, jusqu'à 256, mais préparez-vous à un fichier beaucoup plus volumineux.

Une autre façon de réduire la taille de l’image consiste à réduire la fréquence d’images. Je l'ai fixé à 5, ce qui semble être un bon équilibre entre compacité et lisibilité. La fréquence d'images étant si faible, le GIF de sortie contiendra des images en double, mais nous pouvons les supprimer automatiquement. Lorsque vous utilisez l'indicateur « -O3 » (ou -O2) avec Gifsicle, il trouvera les images en double, supprimera les extras et ajoutera un délai approprié à l'image restante.

Si vous comparez ces deux images avant et après, vous pouvez voir qu'une image contient beaucoup moins d'images et que le délai entre chaque image est devenu variable : c'est l'image optimisée.

Pour les GIF bourrés d'action (par exemple, texte qui change rapidement), la suppression des images en double a un impact significatif sur la taille du fichier. Pour des animations plus petites et plus simples, l'espace économisé est proportionnellement plus petit mais néanmoins considérable.

Je ne l'ai pas mentionné plus tôt, mais VHS dispose d'une commande d'enregistrement qui créera automatiquement une bande à partir des actions de votre terminal. Vous êtes censé éditer la bande par la suite. Exécuter enregistrement vhs > ma.tapeeffectuez vos actions, puis tapez sortie dans votre coquille lorsque vous avez terminé. Il semble que vous quitterez votre shell, mais ce n'est pas le cas ; VHS créera un fichier bande pour vous.

Je vous recommande de lire vous-même la documentation officielle (trouvée sur sa page GitHub). Comprenez que la VHS n’est pas parfaite et qu’il peut y avoir des bugs. Cependant, cela fonctionne la plupart du temps, et c'est beaucoup moins de travail que l'enregistrement d'écran. Vous ne le pensez pas ? Essayez la fonction « enregistrement », modifiez le fichier de bande et exécutez les deux commandes nécessaires.