Astuce : créer un GIF à partir d’une vidéo

Petit billet non-système pour une fois puisque nous allons voir aujourd’hui comment créer un GIF animé à partir d’une vidéo ou d’un screencast (lorsque vous enregistrez votre écran). L’objectif ici est de pouvoir agrémenter un tutoriel par exemple de GIFs animés, beaucoup plus léger qu’un vidéo et pourtant autant explicites… Exemple ici avec une démonstration sur les transitions CSS :

Transitions_op

Toutes les explications qui suivent ont été réalisées sous Linux Mint (donc les utilisateurs d’Ubuntu n’ont pas de soucis à se faire).

Matériel nécessaire

Il nous faut trois logiciels (dont un facultatif) :

  • Kazam est un logiciel de screecasting. Autrement dit celui-ci va vous permettre d’enregistrer vos écran, et éventuellement le son de votre micro ou de vos haut-parleurs. Si vous utilisez un autre logiciel pas de problème, Kazam n’est vraiment pas indispensable ;
  • MPlayer est un lecteur multimédia libre et open source qui va nous permettre de découper notre film en une série d’images ;
  • Le GIF animé sera finalement généré à partir de ces images par ImageMagick, un logiciel libre de manipulation d’images ultra-puissant, dont je vous ai déjà parlé ;

Création du GIF à partir d’une vidéo

Imaginons que nous avons une vidéo intitulé « Transitions.mp4 » dans notre dossier /home/guillaume/Vidéos. La première étape va consister à découper cette vidéo en une multitude d’images, au format JPEG, grâce à MPlayer et la commande suivante :

mplayer -ao null Transitions.mp4 -vo jpeg:outdir=output
Oulala il faut m’expliquer tous ces paramètres là !
  • L’option -ao permet de spécifier un driver audio. N’ayant pas la possibilité d’intégrer du son dans une image, j’utilise la valeur null
  • -vo quant à lui permet de spécifier le driver vidéo. Ici nous optons pour le driver jpeg, qui permet de séparer chaque trame de la vidéo dans un fichier JPEG, dans le répertoire indiqué (dans notre cas le dossier output/);

L’opération peut prendre quelques minutes si votre vidéo est longue. À la fin, si vous jetez un œil au répertoire output/, vous verrez qu’il contient des centaines d’images !

Et ces images, nous allons justement les réassembler pour former un GIF, et ça se passe avec ImageMagick :

convert output/* Transitions.gif

Pas besoin d’explication je pense. L’opération prend plus de temps que la précédente, et vous allez vous retrouver avec un fichier énorme (40Mo pour 8 secondes et 132 images dans mon cas) ! Ne vous en fait pas, c’est normal puisque nous nous sommes contenté d’assembler toutes les images du dossier output, sans aucune optimisation…

Pour optimiser notre GIF, ImageMagick va être capable de modifier seulement les zones qui auront changées d’une image sur l’autre, grâce aux options -fuzz et -layers.

convert Transitions.gif -fuzz 10% -layers Optimize Transitions_optimized.gif

Mon GIF passe de 40Mo à 538Ko, et le résultat est en haut de la page 🙂

Cet article vous a plu ? Partagez-le sur les réseaux sociaux !

Twitter Facebook Google Plus email