Photo de Zakaria Ahada sur Unsplash.com.
Le gif animé, star d’internet dans les années 90, fait son grand come-back depuis quelques années sur la toile, via les mèmes qu’on adore, via giphy (meilleur site au monde !), et aussi notamment dans les emails. Et c’est évidement sur ce dernier point que je vais m’attarder.
L’interactivité et l’animation n’étant pas toujours bien interprétées par les différents webmails, le gif permet d’attirer l’œil de l’internaute assez facilement et sans prise de tête (enfin, ça dépend du rendu souhaité !). Nous allons découvrir dans cet article comment transformer une vidéo en gif animé, et comment l’optimiser au mieux pour l’insérer dans notre email sans péter la bande passante de notre très cher internaute.
Pour commencer, j’identifie la partie de ma vidéo que je souhaite transformer en gif.
En effet, ce dernier ne pourra pas faire l’entièreté de ma vidéo sinon le fichier final sera trop lourd. Il faut isoler 3 secondes maxi, la partie la plus parlante de ma vidéo, ou au moins la plus attirante visuellement. En plus, je vais ouvrir par la suite ma vidéo dans photoshop, alors si ma vidéo fait 3mn, autant dire que photoshop ne va pas aimer, et mon MAC prendra feu, ou pire, il faudra le redémarrer (il faut vraiment que je revois l’ordre de mes priorités ^^).
Ensuite, je vais extraire ces 3 secondes en coupant ma vidéo (« Oh, attention chérie ca va couper ») Pour élaguer votre vidéo, vous pouvez le faire via un lecteur de vidéo comme VLC ou Quick Time Player. Pour mon exemple, j’ai regardé un extrait de Toy Story sur YouTube et en même temps j’ai réalisé une capture vidéo de mon écran. Ensuite j’ai ouvert ma vidéo dans Quick Time Player et j’ai élagué ma vidéo pour n’avoir que mes 3 secondes.
Ensuite, j’ouvre ma vidéo dans photoshop en allant dans : « Fichier » > « Importation » > « Images vidéo dans des calques »
J’ai alors une écran qui s’ouvre avec différents paramètres : je peux élaguer à nouveau ma vidéo, et surtout je coche « créer l’animation d’images »
J’ouvre la fenêtre « montage » qui permet de visualiser l’ensemble des images de ma vidéo à travers une timeline. Une vidéo fait en moyenne 24 images par secondes. Ma vidéo dure environ 3 secondes, j’ai donc 24×3=72 images au total. D’où la nécessité de ne pas importer une vidéo de 20 secondes…
Si j’enregistre mon fichier en gif, sans rien optimiser, j’ai un poids final de 25Mo.
Première optimisation : le nombre d’image par seconde.
Je supprime 1 image sur 5, ce qui permet d’obtenir un rendu final pas trop saccadé. Je supprime quelques images à la fin de ma vidéo, car lorsque j’ai élagué, je n’ai pas stoppé exactement la vidéo où je le voulais.
Note : le nombre d’image total de votre gif va impacter le poids du fichier final alors n’hésitez pas à couper dans le tas, et à lancer l’animation de votre gif pour voir si le rendu est correct. Poids de mon fichier après cette première optimisation : 13Mo (la moitié !).
Seconde optimisation : la taille de mon image
Mon image fait 1046 pixels de large, je vais la réduire à 640 pixels car je n’ai pas besoin qu’elle soit si grande. Là aussi, cela va réduire significativement le poids final de mon fichier. Poids de mon fichier après cette seconde optimisation : 8Mo.
Troisième et dernière optimisation : le nombre de couleurs
Lorsque j’enregistre mon gif dans photoshop, j’ai la possibilité de choisir le nombre de couleurs (par défaut : 256 couleurs). Si je réduis le nombre de couleurs, je vais forcément impacter la qualité visuelle de mon gif, mais aussi le poids du fichier. Il faut donc trouver l’équilibre entre un rendu pas trop dégueu et un poids final léger. Poids de mon fichier après cette troisième optimisation : 7Mo.
Les optimisations pour aller encore plus loin
Bon, 7Mo, c’est pas vraiment génial, même je suis partie d’un fichier de 25Mo. Mais l’objectif, c’est d’être en dessous de 2Mo, voire moins. Comment faire ? C’est un jeu de patience et de test… Si votre vidéo est du flat design, il n’y aura pas de dégradé ni d’ombre, il sera donc plus facile d’atteindre un poids optimisé.
Pour mon exemple, j’ai décidé de réduire encore le nombre d’image dans ma timeline (attention car le gif sera alors plus rapide, il faut jouer sur la durée des images… par défaut elles sont à 0,02 secondes, je les ai passé à 0,1 seconde).
Poids de mon fichier après ces dernières optimisations : 1.8Mo. Le petit plus : Vous pouvez aussi ajouter un player pour donner l’illusion d’une vidéo.
Ce qu’il faut retenir, c’est que pour optimiser un gif, il faut jouer sur le nombre d’image par seconde, la taille du fichier et le nombre de couleurs. A vos tests !
9 réponses
Quelle bonne idée d’utiliser toy Story pour illustrer ton article ! Un grand merci !
Utilisant déjà cette méthode, je me demandais s’il n’y avait pas une fonction dans Photoshop pour supprimer par exemple une image sur deux, afin d’éviter de devoir le faire manuellement?
Dans mon cas, une image sur 4 suffit souvent donc c’est du boulot d’en supprimer 3 quand on part d’une soixantaine!
Et pour l’annecdote, rappelons que – même si j’étais du fervent partisan du “Guif” (puisque abréviation de Graphic), son créateur Steve Wilhite a affirmé en 2013 (pour les 25 ans de son invention), qu’on devait bel et bien prononcer Jif !
@Juliette : merci 🙂 Toy Story 1 est quand même LE dessin animé !
@Benoit : je ne connais pas de fonction pour supprimer une image sur 2. En maintenant la touche cmd sur MAC (ctrl sur PC, ou shift, je ne sais plus) tu peux sélectionner plusieurs images à la fois. Et oui c’est sûr c’est du boulot si on en a 60. Mais le rendu en vaut le coup ! Comme je disais, c’est un jeu de patience pour avoir le meilleur rendu possible
Hier, suite à la lecture de l’article, j’ai installé Photoshop sur mon poste pour la première fois… ce midi, j’avais réalisé mon tout premier Gif animé !!! Merci, merci, merci !… 🙂
@Karine : je suis tellement contente que tu te sois lancé suite à la lecture de l’article !!!!! Merci pour ton retour, ca fait vraiment plaisir ????
@Karine : je suis tellement contente que tu te sois lancé suite à la lecture de l’article !!!!! Merci pour ton retour, ca fait vraiment plaisir 🙂
Article au top !
Je le rajoute dans ma liste précieuse (et secrète) des techniques pour l’emailing.
Merci !
@Derya : merci à toi pour ton commentaire qui me fait vraiment plaisir ! Ca m’encourage tellement à continuer à écrire des techniques et astuces email ????
@Derya : merci à toi pour ton commentaire qui me fait vraiment plaisir ! Ca m’encourage tellement à continuer à écrire des techniques et astuces email 🙂