.png?width=47&height=30&name=Logo-symbol%20(1).png){kind=logo}
Des visuels bien choisis et bien dimensionnés rendent vos modules plus agréables à suivre et plus rapides à charger, sur ordinateur comme sur téléphone. Cet article présente les règles de Teach Up pour les images, puis nos conseils et quelques exemples pour vous inspirer.
Sommaire
Les règles de Teach Up
Le format des images
Les formats d'images acceptés dans un module ou une évaluation sont les suivants : *.png, *.jpg, *.jpeg, *.jpe, *.jp2, *.gif, *.bmp, *.tiff, *.tif, *.svg, *.xcf, *.jfif, *.ico, *.cur, *.map, *.psd, *.avif, *.webp
Le poids des activités
Teach Up n’impose pas de limite de poids pour une activité dans son ensemble. Veillez cependant à ne pas utiliser trop de gigaoctets, pour deux raisons :
- le temps de chargement des pages ;
- l'impact écologique.
Plus une page est lourde, plus elle met de temps à charger et plus elle consomme d'énergie.
Exportez vos images en RVB à 72 dpi, ou 150 dpi au maximum si vous souhaitez une meilleure qualité. Pour compresser vos médias, vous pouvez utiliser des compresseurs en ligne comme tinypng.com.
La taille des images
Dans Teach Up, seules les couvertures de chapitre ont une taille définie : 1920 x 1440 px (pixels) sur un écran d’ordinateur. Le visuel choisi occupe tout l’écran, quel que soit l'appareil.
 |
 |
| Ordinateur | Téléphone |
L’image est recadrée sur téléphone. Centrez votre élément principal pour qu’il reste toujours visible, et évitez de placer des informations importantes trop près des bords.
Les visuels des inputs peuvent avoir toutes les tailles et toutes les formes (paysage, carré, portrait).
Pour un rendu optimal, privilégiez toutefois des images ou des captures d’écran de bonne qualité, d'une largeur comprise entre 980 et 1600 pixels. Au-delà, Teach Up redimensionne automatiquement l’image pour la réduire.
Le logo
Vous pouvez importer votre logo dans une activité Teach Up. Placez-le dans la zone prévue à cet effet, au format PNG, de préférence en blanc ou dans une couleur claire.
Nos conseils et astuces
Les bannières
Évitez les images trop sombres. Un filtre noir transparent est automatiquement appliqué sur votre visuel pour garantir la lisibilité du titre.
Placez l’élément principal de votre visuel au centre. La bannière s’adapte aux écrans de téléphone en recadrant l’image : si l’élément est décalé à gauche ou à droite, il risque de ne pas apparaître sur mobile.
N’ajoutez pas de texte sur votre image. Le texte est saisi directement dans Teach Up pour gérer l'affichage sur tous les écrans, faciliter les traductions et garantir l’accessibilité pour les lecteurs d’écran.
N’ajoutez pas non plus de logo sur votre image. Un emplacement dédié est prévu dans Teach Up : le logo y est automatiquement intégré et répété à des endroits stratégiques.
Les visuels
Vous souhaitez intégrer une image au format portrait ? Teach Up risque de l’afficher trop grande, car la plateforme redimensionne les visuels en fonction de leur largeur (entre 980 et 1600 pixels).
Ajoutez un fond blanc autour de votre image pour l’élargir « artificiellement ». Votre visuel sera ainsi correctement intégré.
 |
 |
| Image sans fond blanc | Image avec fond blanc |
L'accessibilité
Pour une accessibilité maximale, écrivez toujours le texte dans Teach Up : les lecteurs d’écran ne peuvent pas lire le texte incrusté dans une image. Si vous devez ajouter du texte sur un visuel, retranscrivez-le dans Teach Up, soit en légende du visuel, soit dans un champ input, comme pour les zones à cliquer.
Ajoutez des descriptions aux photos et images, et la transcription des audios en légende.
Retrouvez plus d'informations dans l'article Accessibilité dans Teach Up.
Des exemples d'illustrations visuelles
Les bannières
Illustrations, photos ou GIF : les bannières plongent rapidement l’apprenant dans un univers.
Les zones à cliquer
Les zones à cliquer permettent de pointer certaines parties d’une image et d’écrire le texte correspondant dans Teach Up.
Utilisez-les comme sommaire ou comme étapes de parcours, illustrés par des pictos ou des illustrations.
Utilisez-les pour présenter des points clés, sous forme de pictos ou d'illustrations.
Utilisez-les sur une image pour illustrer un point précis et zoomer dessus.
Utilisez-les sur un schéma (attention à l'accessibilité et à la traduction lorsque l'image contient du texte).
Attention : toutes vos photos et tous vos médias doivent être libres de droits pour un usage commercial.