Transformer une vidéo en gif animé sous photoshop

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 !