Résumé de section

  • Replier Déplier

    Bienvenue !

    Tout replier Tout déplier

    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

    • Auteur(s) / Formateur(s): Viet Jeannaud - Fondation Callisto
      Public cible: Formateurs
      Date de publication: 25 mars 2022
      Durée estimée: 30 minutes
      Licence: CC BY-NC-SA
      Open badge: Non
      Nombre d'inscrits: 15

  • Replier Déplier

    Une brève histoire du GIF

    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.


      tenor.com

      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.

      tenor.com

      tenor.com

      ...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.


    • Le GIF devient un moyen alternatif d'exprimer ses propos, ses émotions, ses réactions, d'une façon plus simple, directe et parlante qu'avec des mots. Au delà du format image, le GIF est donc une forme de communication singulière du web, au même titre que les émoticônes et les mèmes.

      Désormais, tout le monde peut créer ses propres GIF facilement. Les plateformes de création et de partage de GIF sont nombreuses (Giphy, Gif Maker...).


      2022 : le GIF, "un truc de gros boomer" ?

      La mode, ça va ça vient... En ce début d'année, le magasine Vice indique dans un article que les GIF sont devenus ringards aux yeux de la jeune génération.

      Les GIF souffrent de leur succès, leur démocratisation les a rendus probablement trop banals, trop faciles... 

      Bien qu'une étude sociologique sur l'usage des GIF pourrait être intéressante, nous allons plutôt nous pencher ici sur leurs usages pédagogiques. Mais avant cela, quelques caractéristiques techniques de ce format d'image.

  • Replier Déplier

    Caractéristiques techniques

    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.

  • Replier Déplier

    Usages pédagogiques

    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 ».

      Triangle de Sierpinski

      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 ».

      Triangle de Sierpinski en GIF animé

      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. 


      Animation GIF faisant le parallèle entre l'attribution d'un DOI et l'estampillage d'un code barre sur des produits.

      Extrait de la présentation des principes FAIR - Doranum sur la définition du Persitent IDentifier


      Animation GIF montrant le déplacement du soleil et des planètes gravitant autour.

      GIF créé à partir de la vidéo "Le véritable mouvement de la TERRE dans l'espace" de la chaîne Balade Mentale

    • 2) Les GIF pour guider pas à pas

      Les tutoriels ou didacticiels sont des guides pratiques qui montrent étape par étape comment parvenir à un objectif précis. L'utilisation de GIF animés peut aider à la confection de tutoriels étant donné que l'on peut montrer à l'aide d'une image comment procéder pour réaliser une action.

      Prenons un exemple concret pour illustrer cela.


      Exemple de tutoriel "Utiliser la transition Morphose dans PowerPoint"

      Imaginons la situation suivante : on souhaite expliquer à un public comment créer une transition du type "morphose" dans Microsoft PowerPoint. Pour cela, nous pouvons décider de créer un bref tutoriel combinant texte et image.

      Tutoriel réadapté de la page support Microsoft "Utiliser la transition Morphose dans PowerPoint"



      Et les vidéos ?

      Bien sûr, le format vidéo est très souvent utilisé pour la réalisation de tutoriels. D'ailleurs, celui de Microsoft sur la transition Morphose est au format vidéo :

      Vidéo issue de la page support Microsoft
      Notez que l'on retrouve sur cette page un équivalent de la vidéo au format texte / image.


      Les vidéos sont donc tout aussi efficaces en matière de tutoriel. Alors si vous vous demandez pourquoi privilégier la combinaison texte / image, voici trois pistes qui peuvent vous aider à prendre une décision plus éclairée.


      Il existe d'autres formats de tutoriels basés sur du texte / image. Le plus répandu est probablement le document PDF. Ce format a l'avantage de pouvoir être téléchargé et (ou) imprimé pour une consultation hors connexion.
      Exemple : le tutoriel de l'académie de Poitiers "Comment écrire dans un document PDF ?"

    • 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...).

      Animation d'une icône "attention" qui s'agrandit et rétrécie, avec un texte fictif à côté.

      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. 

  • Replier Déplier

    Créer un GIF

    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.

      Capture d'écran d'une page Google avec pour requête "outils pour créer des GIF". Nombre de résultats trouvés : 207000000.


      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.

      Télécharger ScreenToGif


      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. 

      Télécharger Giphy Capture


      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.


  • Replier Déplier

    Références


  • Replier Déplier

    Merci d'avoir suivi ce cours !

    • Forum

      Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis. 

    • Sur le même thème

      Cours: Vidéos, diaporamas, présentations graphiques : créer vos propres sons d’accompagnement
      Cours: Créer le visuel d'un open badge
      Cours: Utiliser des GIF dans ses formations
      Cours: Créer une Ressource Éducative Libre (REL)