Créer un .gif propre

Créer un .gif propre

L’idée

Créer un .gif (pour expliquer ou monter une action dans une app ou un logiciel), qui soit lisible et avec un poids raisonnable.

Pourquoi c’est important ?

Un .gif est souvent une solution pratique pour illustrer…

  • une action à faire dans l’app
  • comment marche une fonctionnalité
  • la facilité avec laquelle on peut obtenir un résultat via un logiciel
  • etc.

Et monter un .gif propre n’est pas très compliqué. Il suffit juste d’avoir les bons outils et de connaître quelques principes.

Étape par étape

Dans notre cas, le plus simple, c’est que

  1. tu filmes d’abord sur ton écran l’action que tu as envie de montrer puis que
  2. tu convertisses cette vidéo au format .gif.

1️⃣ Filme, sur ton écran, l’action que tu veux montrer

Si tu n’as pas déjà de logiciel pour faire du screencast (= filmer ton écran), je recommande…

  • Sur mac : Quicktime Player, qui est installé par défaut sur Mac et fait ça très bien ;
  • Sur PC : OBS, qui est gratuit et qui lui aussi fait ça très bien. A défaut, screencast o matic, qui est payant mais pour un prix dérisoire et qui est bien pratique.

Imaginons par exemple que tu veux montrer comment, dans Google Analytics, accéder au rapport “Tous les canaux” depuis la page d’accueil.

  1. Ouvre Google Analytics et mets-toi sur la page d’accueil
  2. Lance QuickTime / OBS et définis la zone de l’écran que tu veux enregistrer
  3. Lance l’enregistrement
  4. Réalise l’action dans Google Analytics
  5. Coupe l’enregistrement.

💡 Pense à éteindre ou mettre en pause tous les logiciels qui peuvent générer des notifications (Slack, email, agenda, etc.)

2️⃣ Convertis ta vidéo en .gif

Si tu n’as pas déjà de logiciel pour faire ça, je te recommande…

  • Sur mac : Gifski, qui est gratuit, rapide et très intuitif ;
  • Sur PC : c’est le désert en termes d’outils -_- Screencast o matic fait ça proprement, mais est payant. Le plus simple est encore de passer par un outil en ligne comme Giphy.

Il suffit d’uploader ta vidéo dans le logiciel, puis de paramétrer le futur .gif.

Par exemple, pour Gifski :

  • La partie de la vidéo à convertir en .gif ;
  • La résolution du .gif (qui va affecter la qualité et le poids du .gif) ;
  • FPS (le nombre de frame par seconde) qui va affecter la fluidité du .gif ;
  • La qualité globale du .gif ;
  • Loop : est-ce que le .gif se répète une fois terminé.

Gifski évalue automatiquement le poids du futur .gif.

💡 Trouver le bon équilibre poids – qualité

L’objectif, c’est que le .gif soit le plus léger possible (= meilleure vitesse de chargement), mais sans réduire la qualité au point qu’il devienne illisible.

Quelques astuces pour y arriver.

💡 Bien choisir la zone de l’écran au moment de tourner la vidéo. Tu n’as peut-être pas besoin d’enregistrer la vidéo en 1920*1080.
Il faut prendre “ce qu’il faut” de l’écran pour que les instructions soient claires… mais peut-être pas tout l’écran.

💡 Baisser la résolution au moment de convertir la vidéo en .gif.
Tout dépend de ce à quoi va servir ton .gif, mais si tu as filmé en 1920*1080, tu devrais probablement pouvoir baisser de 50% la résolution.

💡 Ne pas dépasser les 24 FPS, qui sont largement suffisants.

Règle de pouce : expérimente différentes résolutions pour trouver celle qui te convient.

💡 Un .gif ne devrait pas faire plus de 10 secondes (15 grand max)

Le .gif est génial pour montrer une courte action, en quelques secondes. Au-delà, il vaut mieux faire une mini-vidéo.

Le .gif long risque d’être frustrant pour lecteur : s’il a besoin de revoir l’action ou s’il a raté un élément, il va devoir attendre plusieurs secondes.

🤔 Pourquoi est-ce que je n’arrive pas à mettre le .gif dans un email ?

Mon avis perso, c’est que le mail n’est pas le bon support.

Si tu as besoin d’envoyer un email à quelqu’un avec par exemple une procédure et des instructions à l’intérieur, sous forme de .gif, il vaut mieux proposer dans le mail un lien vers la page de ton site (qui contiendra le .gif et les explications).

Les logiciels qui permettent de lire les mails (outlook, gmail, etc.) sont une gigantesque jungle et tu n’as aucun moyen de t’assurer que tes destinataires voient bien tes .gif (ou tes images) apparaître sur leur ordinateur.

Il vaut mieux envoyer un mail concis et clair expliquant pourquoi ton destinataire doit faire telle ou telle action. Puis lui proposer un lien vers une page de ton site qui explique clairement, avec des .gif ou des vidéos, comment faire.