Comment ajouter des images en Markdown

Lors de la visite d’un site web, on remarque rapidement que les images rendent les pages plus attrayantes et visuellement engageantes. Si le contenu se limitait uniquement au texte, il semblerait terne et monotone. Les éléments visuels aident les utilisateurs à mieux comprendre et mémoriser les informations, tout en rendant l’interface plus conviviale.

Markdown est un langage de balisage simple et facile à utiliser, permettant de rédiger du texte avec un minimum d’effort. Il est largement utilisé pour la documentation, les articles et les billets de blog. Markdown permet également d’ajouter des images, qui jouent un rôle essentiel dans la visualisation du contenu, le rendant plus clair et mémorable.

Méthodes principales pour ajouter des images

Copier le lien

Il existe deux méthodes principales pour insérer des images en Markdown : images locales et liens externes.

Images locales

Copier le lien

Pour insérer des images stockées localement, il est important de spécifier correctement le chemin du fichier. Il est recommandé de conserver les images dans le même dossier que le fichier Markdown ou au même niveau hiérarchique.

Si l’image se trouve dans le même dossier que le fichier .md, il suffit d’indiquer son nom :

• 

Si l’image se trouve dans un sous-dossier (par exemple /img) :

• 

Le texte entre crochets ([Computer]) représente le texte alternatif (alt-text). Il s’affiche lorsque l’image ne peut pas être chargée et est également utilisé par les lecteurs d’écran pour décrire les images aux utilisateurs malvoyants.

Le chemin de l’image est placé entre parenthèses. Assurez-vous qu’il est correct afin d’éviter tout problème d’affichage une fois le contenu mis en ligne.

Images externes

Copier le lien

Pour insérer une image hébergée sur Internet, indiquez simplement son URL :

• 

Avantages des images externes :

• Économie d’espace dans le dépôt

• Pratique lorsque les images sont fréquemment mises à jour

Inconvénients :

• Dépendance envers une source externe

• Si l’image est supprimée ou si l’URL change, elle ne s’affichera plus

Taille des images

Copier le lien

Le Markdown standard ne permet pas de contrôler la taille des images (sauf sur certaines plateformes comme GitHub), mais il est possible d’utiliser du HTML :

• <img src="/img/computer.png" alt="Computer" width="500" height="300">

Mise en forme avancée

Copier le lien

La mise en forme enrichie attire l’attention et rend le contenu plus accessible et plus facile à lire.

Légende d’image

Copier le lien

Les légendes apportent des informations supplémentaires au lecteur :

• 

Image cliquable

Copier le lien

Pour créer une image cliquable menant vers une autre ressource, placez la syntaxe Markdown de l’image à l’intérieur d’un lien :

• [](https://site)

Texte alternatif efficace

Copier le lien

Le texte alternatif doit décrire clairement le contenu de l’image.

Mauvais alt-text :

• 

Bon alt-text :

• 

Pourquoi le texte alternatif est-il important ?

Copier le lien

Accessibilité :
Les lecteurs d’écran lisent le texte alternatif aux utilisateurs malvoyants.

SEO :
Les moteurs de recherche indexent le texte alternatif, ce qui améliore la visibilité du contenu.

Conseils pour travailler avec des images

Copier le lien

• Utilisez des images de taille réduite pour accélérer le chargement des pages.

• Optimisez les images avant de les mettre en ligne.

• Assurez-vous que le texte alternatif est unique et précis.

• Le nom de fichier doit être pertinent et contenir des mots-clés.
  Exemple : utiliser computer-setup.png plutôt que img123.png.

Méthodes d’insertion des images — Tableau comparatif

Copier le lien

Conclusion

Copier le lien

Vous savez maintenant comment insérer des images en Markdown, contrôler leur taille, ajouter des légendes et améliorer l’accessibilité grâce au texte alternatif. Les images rendent le contenu plus visuel et aident les lecteurs à mieux comprendre l’information.

Découvrez aussi nos solutions d’hébergement WordPress fiables et hautes performances pour vos sites WordPress.