Utiliser des GIF dans ses formations
Aperçu des sections
-
Si les GIF enrichissent la façon de s'exprimer sur les réseaux sociaux et le web en général (à l'image des émoticônes 😀), ils peuvent aussi avoir un intérêt pédagogique dans les formations e-learning.
Cette micro formation vous donne des informations techniques sur ce format d'image, explique leur intérêt pédagogique et vous montre comment en créer.
Objectifs
- Identifier 3 caractéristiques du format d'image GIF ;
- Expliquer 2 usages pédagogiques des GIF dans un contenu e-learning ;
- Tester un outil pour créer un GIF animé.
Ce cours est en libre accès !
Aucune création de compte ou d'inscription n'est nécessaire, toutefois vous ne pourrez le parcourir qu'en lecture seule.
Pour participer aux activités (exercices, forum...), vous devez vous inscrire au cours
S'inscrire au cours -
Pour savoir rapidement ce que sont les GIF, d'où ils viennent et comment ils ont évolué.
2 minutes de lecture
-
Le GIF, ou Graphics Interchange Format, est un format d'image numérique. Sa principale particularité est qu'il permet de créer une animation en stockant plusieurs images dans un seul fichier et en les affichant de façon successive, un peu comme un "flipbook".
Avec plus de 30 ans de présence sur internet, le GIF fait partie des éléments de la culture web. Vous en avez sûrement déjà vu dans les fils d'actualités de vos réseaux sociaux ou dans certains articles. Mais connaissez-vous son histoire ?
Commençons par une rapide rétrospective du GIF.
Les années 90 : les débuts glorieux du GIF
Initialement format d'image statique, le GIF a commencé à s'animer avec l'apparition du web grâce aux ingénieurs de Netscape, le navigateur web dominant dans les années 90. L'engouement devient rapide, on en retrouve un peu partout pour ajouter un effet d'animation sur les sites, et plusieurs images commencent même à devenir virales.
Les années 2000 : la fin d'une mode...
Le début des années 2000 marque un arrêt dans l'utilisation des GIF. D'autres technologies, comme Flash, commencent à percer, et la possibilité de publier des vidéos rend obsolète le recours à des images qui bouclent à l'infini. Qui plus est, les GIF souffrent d'une image ringarde, avec des motifs flashy et répétitifs typiques d'un temps révolu du web.
...Et une résurgence !
Si les GIF ont été majoritairement boudés par les internautes, certaines communautés connotées "geek" continuent de les utiliser. On en retrouve sur des réseaux sociaux tels que Tumblr ou Reddit. Le GIF subsiste et revient peu à peu, par nostalgie ou effet de contre-culture.
Mais c'est surtout en 2014 que les GIF reviennent en force, sur Twitter, avec la mise en place d'un lecteur de GIF dans les tweets.
-
-
Que permet de faire le format GIF ? Qu'est-ce qui le distingue des autres formats d'image ?
2 minutes de lecture
-
Différences entre les formats d'images GIF, PNG et JPG
Le GIF est un format d'image lisible sur le web parmi d'autres. Vous connaissez probablement aussi les formats JPG et PNG qui sont des formats courants. Le tableau ci-dessous indique les principales différences entre ces 3 types de format.
Format Résumé Palette couleurs Transparence Compression Animation 
Joint Photographic Experts Group
C'est le format le plus utilisé pour publier des photos. Il permet d'afficher plus de 16 000 000 couleurs (format truecolor) ce qui le rend idéal pour les photos / illustrations très riches en couleurs et nuances. Non, le JPG ne gère pas la transparence. Il est impossible d'avoir un fond d'image transparent. Il permet de compresser l'image avec perte de données : plus on compresse l'image, plus la qualité de l'image en pâtit. Par contre cela réduit la taille du fichier, le rendant plus rapide à s'afficher sur le web. Non, le JPG ne gère pas les images animées. 
Portable Network Graphics
C'est un format adapté pour publier des images simples comprenant des aplats de couleurs. À partir du format 21 bits, le PNG peut afficher plus de 16 000 000 couleurs (format truecolor) comme le format JPG. Oui, le PNG peut afficher une couleur transparente. Il est possible d'avoir une image avec un fond transparent. La compression se fait sans perte de données, ce qui signifie que la qualité des images est préservée mais aussi que la taille du fichier peut être importante. Non, le PNG ne gère pas les images animées. Mais il existe une variante (APNG) qui le fait. 
Graphics Interchange Format
C'est le format le plus utilisé pour créer des images animées. Il permet d'afficher 256 couleurs (format 8 bits), ce qui nuit à la qualité de l'image. Oui, le GIF peut afficher une couleur transparente. Il est possible d'avoir une image avec un fond transparent. La compression se fait sans perte de données, mais le nombre limité de couleurs fait que toutes les informations qui composent l’image à l’origine ne sont pas préservées. Oui, le GIF gère les animations. C'est d'ailleurs pour cela qu'il est le plus souvent utilisé de nos jours.
Le format GIF en quelques points
- Il permet de gérer la transparence et l'animation d'une image.
- Le poids du fichier peut être assez lourd. L'utilisation de beaucoup de GIF sur une page web peut affecter son temps de chargement.
- La qualité de l'image est limitée du fait du nombre de couleurs que le format peut afficher (256 VS 16 000 000 avec le JPG ou le PNG). Il ne convient pas pour des images avec beaucoup de couleurs, de nuances et de dégradés.
Extrait de la vidéo "Introduction aux images numériques"
Retenez donc que si vous avez besoin d'une image statique avec un fond transparent, le PNG semble plus adapté que le GIF, car le rendu sera meilleur. Ce qui démarque le GIF des autres formats est surtout la possibilité de créer des images animées. Sur le plan pédagogique, ces animations peuvent être une alternative aux vidéos, ce que nous allons voir maintenant.
-
-
Dans quelles situations les GIF peuvent-ils être pertinents dans les formations en ligne ?
15 minutes de lecture
-
1) Les GIF pour expliquer un sujet / un concept
Un bon croquis vaut mieux qu'un long discours. Il est vrai que beaucoup de sujets sont plus simples à expliquer à l'aide d'un visuel.
Prenons un exemple : imaginons que nous souhaitons expliquer ce qu'est une fractale. Pour cela, nous pouvons simplement le dire avec des mots, par exemple en citant la définition qui en est faite sur Wikipédia. Mais pour aider à mieux appréhender ce que c'est, nous pouvons aussi afficher une image illustrant une figure fractale.
Une figure fractale est un objet mathématique qui présente une structure similaire à toutes les échelles. C'est un objet géométrique « infiniment morcelé » dont des détails sont observables à une échelle arbitrairement choisie. En zoomant sur une partie de la figure, il est possible de retrouver toute la figure ; on dit alors qu’elle est « auto similaire ».
Exemple du triangle de Sierpiński
Le résultat est déjà satisfaisant. Cependant, nous pouvons mieux illustrer la propriété auto similaire d'une fractale à l'aide d'une animation GIF.
Une figure fractale est un objet mathématique qui présente une structure similaire à toutes les échelles. C'est un objet géométrique « infiniment morcelé » dont des détails sont observables à une échelle arbitrairement choisie. En zoomant sur une partie de la figure, il est possible de retrouver toute la figure ; on dit alors qu’elle est « auto similaire ».
Exemple du triangle de Sierpiński
On peut se rendre compte ici de la plus-value du GIF animé en comparaison d'une image fixe du triangle de Sierpiński.
Si l'image fixe permet d'appréhender le concept de fractale, le GIF animé lui donne vie en simulant l'aspect auto similaire.
Beaucoup de sujets peuvent être appréhendés à travers une courte animation. Deux exemples supplémentaires ci-dessous.
Extrait de la présentation des principes FAIR - Doranum sur la définition du Persitent IDentifier
GIF créé à partir de la vidéo "Le véritable mouvement de la TERRE dans l'espace" de la chaîne Balade Mentale
-
3) Autres utilisations
Pour construire une page de cours e-learning, on utilise différents éléments graphiques comme la typographie (police, taille, graisse...), des icônes, des couleurs ou encore des images. Les GIF étant un type d'image, ils font naturellement partie de ces éléments graphiques.
Les GIF animés peuvent donc être utilisés pour plein d'autres raisons que celles évoquées auparavant. Ils peuvent remplacer d'autres éléments, on peut par exemple utiliser un GIF comme simple image décorative ou pour attirer l'attention sur un point important (comme on pourrait le faire avec un changement de taille de police, un fond de couleur...).
Exemple fictif d'utilisation d'un GIF pour attirer l'attention sur un point particulier
Les GIF animés attirent facilement le regard. Il ne faut pas en abuser pour ne pas nuire à la lecture. Chaque recours à un GIF doit être bien pensé et servir le contenu du cours.
-
-
Des outils et tutoriels pour créer des GIF.
10 minutes de lecture
-
Les GIF étant très populaires, beaucoup de solutions pour en créer existent. Il suffit de taper "outils pour créer des GIF" sur Google pour s'en rendre compte.
Les outils en ligne
Parmi les solutions pour créer des GIF, il y a des outils en ligne. Ils sont relativement simples, généralement ils proposent :
- d'importer des images ou des vidéos pour générer un GIF qu'il suffit de télécharger ;
- ou de faire une capture vidéo de l'écran du navigateur web, de l'enregistrer en GIF et de le télécharger.
Remarques : bien sûr, certains outils en ligne se démarquent des autres au niveau des services proposés, par exemple GIF Maker permet de contrôler la vitesse du défilement des images. Je n'ai pas vraiment un outil précis à conseiller, personnellement je n'utilise pas de services en ligne mais plutôt des outils en local (logiciels à télécharger). Vous pouvez trouver beaucoup de sites qui listent des outils en ligne, par exemple ici : https://www.codeur.com/blog/7-outils-ligne-creer-gifs/
Les logiciels à télécharger
L'avantage des logiciels est que l'on peut faire des screencasts sur toutes les applications de son ordinateur, pas seulement d'une fenêtre de son navigateur. Ainsi on peut facilement capturer l'écran d'un document PowerPoint, Word, Excel, PDF, de son bureau, de ses dossiers... bref ce que l'on souhaite, et ensuite générer cette capture vidéo en GIF.
Remarques : j'ai testé (et approuvé) ScreenToGif (Windows uniquement) et l'application Giphy Capture (Mac uniquement).
-
Télécharger ScreenToGif
ScreenToGif est un logiciel gratuit et très complet qui permet d'enregistrer tout ou partie de son écran et générer l'enregistrement en GIF. Il est disponible sur Windows uniquement.
Comment utiliser ScreenToGif ?
Vous trouverez sur le site officiel de ScreenToGif un premier tutoriel pour avoir un aperçu rapide de son utilisation : https://www.screentogif.com/how-to-use
En complément, le tutoriel ci-dessous vous donne un peu plus d'explications utiles. La vidéo est en anglais, mais vous pouvez activer les sous-titres en cliquant sur l'icône ici soulignée en rouge :
Easy & Free Way to Make Animated GIF Images with ScreenToGif - Chris' Tutorials
-
Télécharger Giphy Capture
Giphy Capture est une application gratuite issue de la plateforme Giphy. Comme avec ScreenToGif, on peut enregistrer tout ou partie de son écran et le générer en GIF. Les options d'édition sont plus restreintes, mais l'interface gagne en clarté et en simplicité. Giphy Capture est disponible uniquement sur Mac.
Comment utiliser Giphy Capture ?
La vidéo ci-dessous illustre simplement comment fonctionne l'application.
Comment faire un bon gif avec Giphy Capture - Numerama
-
Derniers points à savoir sur l'édition d'un GIF
- Chaque image composant un GIF est appelée "frame" (cadre en anglais).
- Plus un GIF contient de frames (donc de succession d'images), plus sa durée est longue.
- Il est possible d'augmenter ou de réduire le nombre d'images par seconde (frames per second ou FPS). Plus il y a de FPS, plus l'animation sera fluide.
- Les dimensions de la zone capturée, le nombre de FPS et la durée du GIF ont une incidence sur le poids final du fichier. Faites attention car le poids augmente très vite. Giphy Capture propose d'ailleurs de convertir le GIF en vidéo MP4 s'il considère que le poids du fichier est trop lourd.
- Si le fichier final est trop volumineux, tentez de réduire le nombre de FPS et / ou la taille du document. Cela diminuera en revanche la qualité du GIF. Il faut donc trouver le bon compromis entre la taille du fichier et qualité de la définition de l'image.
- Vous pouvez afficher du texte ("caption") directement dans votre GIF, ce qui est pratique pour donner des indications en même temps que les images défilent.
-
-
- GIF Keyboard de Tenor - Personnalisez vos conversations
- Vice - Désolé, les GIFs sont devenus un truc de gros boomer
- Wikipédia - Graphics Interchange Format
- France Culture - Le GIF, une histoire de la mode numérique
- The Huffington Post - Histoire du GIF : pour ses 25 ans, l'image animée fait son grand retour sur Internet
- MDN Web Docs - Guide des types et formats de fichiers d'images
- Codeur mag - 7 outils en ligne pour créer des GIF
- GIF Keyboard de Tenor - Personnalisez vos conversations
-
-
Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis.
-
