Une boucle qui tient dans un courriel.
Un GIF de huit mégaoctets ne s’affiche pas dans une messagerie : il se charge à moitié ou pas du tout. L’exercice n’est pas de créer une animation, c’est d’en faire une qui tienne dans le poids réel de sa destination.
GIFWebMLes étapes, dans l’ordre.
- On décide de la destination d’abord. Un courriel, une présentation, un réseau : les trois n’ont ni le même poids acceptable, ni les mêmes formats pris en charge.
- On fait court, et on boucle proprement. Deux à cinq secondes, un raccord invisible. Une boucle qui saute attire l’œil sur le défaut au lieu du propos.
- On réduit, et on mesure. Dimensions, nombre d’images par seconde, palette. Chaque réglage se mesure sur le fichier produit, pas sur une intuition.
- On prévoit la version qui ne bouge pas. Une image fixe de repli, parce que certaines boîtes de réception n’animent rien.
À la fin, vous avez ça.
- La boucle en GIF et en WebM, dans les dimensions de sa destination
- Le poids mesuré de chaque fichier, et ce qu’il a fallu sacrifier
- L’image fixe de repli, pour les lecteurs qui n’animent pas
- Le fichier source, pour refaire une variante sans repartir de zéro
Les fonctionnalités qui servent ici.
Les questions qu’on nous pose.
Et s’il en manque une, le Discord répond plus vite que cette page.
GIF ou vidéo ?
Vidéo partout où elle est acceptée : elle est dix fois plus légère pour la même qualité. Le GIF ne reste utile que dans les boîtes de réception, qui n’affichent pas de vidéo.
Quel poids viser ?
Pour un courriel, quelques centaines de kilo-octets. Au-delà, beaucoup de messageries ne chargent pas l’image, et le message arrive avec un cadre vide.
Peut-on en faire une série ?
Oui, et elle se range dans un dossier dédié du Studio : chaque fichier est déposé au fur et à mesure, pas en un lot à la fin.
Dans la même famille.
Montage vidéo
Un film court monté rush par rush, avec titres et fondus, rendu en MP4.
Logo animé
Le logo qui se dessine, pour une ouverture de film ou une signature.
Animations d’interface
Apparitions, survols, transitions : le mouvement d’une maquette, écrit en CSS.
Son et voix off
Couper, normaliser, nettoyer une voix, égaliser, mixer une musique.