[Moodle|Guide] Insérer des images dans une zone de texte (atto)

Instructions

Ajouter une image

1. Placez le curseur à l’endroit où l’image doit apparaître.

2. Cliquez sur le bouton Image de l’éditeur ATTO.

3. Dans le formulaire qui s’ouvre, cliquez sur Parcourir les dépôts puis Déposer un fichier pour sélectionner votre image.

4. Une fois le fichier téléchargé, vous pouvez :

   • modifier ses dimensions,

   • ajouter un texte alternatif (important pour l’accessibilité),

   • ajuster l’alignement dans le texte.

5. Cliquez sur Insérer pour valider.

Positionner les images avec des grilles Bootstrap

Pour aligner une image à côté d’un texte ou créer une disposition en colonnes :

1. Activez le mode édition dans votre zone de texte.

2. Cliquez sur le bouton Grille Bootstrap de l’éditeur ATTO.

3. Choisissez le nombre de colonnes souhaité (par exemple : 2 colonnes pour texte + image).

4. Insérez le texte dans la première colonne et l’image dans la seconde.

5. Vous pouvez ajuster la largeur relative des colonnes pour équilibrer le rendu.

Formats d’image recommandés

Pour le Web :

• .jpg pour les photos

• .gif pour les dessins avec peu de couleurs (logos, pictogrammes)

• .png pour les images nécessitant transparence ou meilleure qualité (remplace souvent .jpg ou .gif)

Optimiser les images

Pour garantir un affichage correct et rapide :

• La largeur de l’image ne doit généralement pas dépasser 800 pixels, car la plupart des écrans ne nécessitent pas plus pour une lecture confortable.

• La résolution doit être inférieure ou égale à 72 dpi, suffisante pour l’écran.

• Redimensionnez et compressez vos images avant de les intégrer pour limiter le poids des pages.

Bonnes pratiques

• Ajoutez toujours un texte alternatif pour les utilisateurs de lecteurs d’écran.

• N’insérez pas d’images trop volumineuses, car elles ralentissent le chargement du cours.

• Évitez de zoomer ou réduire excessivement une image directement dans Moodle : redimensionnez plutôt le fichier source.