Générateur d'images Markdown

Suivant

La syntaxe d’image de Markdown, ![alt](src "title"), est facile à rater : une parenthèse oubliée, un texte alternatif manquant ou une confusion avec la syntaxe de lien, et votre document affiche un espace réservé cassé. Ce générateur prend l’URL de l’image, le texte alternatif, un titre facultatif et une cible de lien facultative, puis produit à la fois le Markdown en ligne et celui de style référence pour que vous colliez celui qui convient à votre document.

Comment générer la syntaxe d'image Markdown

  1. 1

    Collez l'URL de l'image

    URL absolue (https://...) ou chemin relatif (/images/hero.png).

  2. 2

    Rédigez le texte alternatif

    Ce que montre l'image, en une phrase. Indispensable pour l'accessibilité.

  3. 3

    Ajoutez un titre (facultatif)

    Affiché au survol dans la plupart des moteurs de rendu.

  4. 4

    Enveloppez-la dans un lien (facultatif)

    Indiquez une URL pour rendre l'image cliquable.

  5. 5

    Copiez l'extrait

    Obtenez la sortie en ligne `![alt](src)` ou de style référence `![alt][ref]`.

Les quatre variantes de syntaxe

En ligne, sans titre :

![Visuel principal du produit](/images/hero.png)

En ligne, avec titre :

![Visuel principal](/images/hero.png "Visuel principal pris en octobre 2026")

Image cliquable (image enveloppée dans un lien) :

[![Visuel principal](/images/hero.png)](https://example.com/buy)

Style référence (garde les longues URL hors du paragraphe) :

![Visuel principal][hero]

[hero]: /images/hero.png "Visuel principal pris en octobre 2026"

Le texte alternatif compte

  • Accessibilité. Les lecteurs d’écran énoncent le texte alternatif ; un texte alternatif vide rend l’image de fait invisible pour une personne malvoyante.
  • SEO. Les moteurs de recherche s’appuient sur le texte alternatif pour comprendre le contenu de l’image. Un texte alternatif absent nuit au trafic issu de la recherche d’images.
  • Dégradation élégante. Si l’image ne se charge pas, c’est le texte alternatif que voient les utilisateurs.

Bon et mauvais texte alternatif

Intention Bon texte alternatif Mauvais texte alternatif
Photo de produit “Tasse en céramique rouge sur un bureau en bois, anse à gauche” “Image de tasse”
Capture d’écran “Page de connexion avec e-mail, mot de passe et boutons SSO” “capture.png”
Décoratif "" (texte alternatif vide pour la pure décoration) “image décorative”
Infographie “Graphique à barres : le chiffre d’affaires est passé de 1 M€ en 2023 à 3 M€ en 2026” “graphique à barres”

Pièges

  • Ne commencez pas le texte alternatif par “Image de”, les lecteurs d’écran l’annoncent déjà comme une image.
  • Chemins absolus ou relatifs. Les chemins relatifs cassent quand le document est rendu hors de son dossier (par exemple, dans l’aperçu de GitHub). En cas de doute, utilisez des chemins absolus.
  • Les espaces dans les URL exigent un encodage : %20 à la place d’un espace, sinon l’image ne se charge pas.

Questions fréquentes

Pas en Markdown pur. La plupart des moteurs de rendu (GFM, Docusaurus, MkDocs) reviennent au HTML brut pour le dimensionnement, <img src="..." width="400" alt="...">. Certains dialectes prennent en charge ![alt](url =400x), mais ce n’est pas universel.

Le texte alternatif est énoncé aux lecteurs d’écran et affiché si l’image échoue. Le titre est l’infobulle qui apparaît au survol : généralement facultatif et ignoré sur les appareils tactiles.

Lorsque l’image apparaît plusieurs fois, ou lorsque l’URL est longue et encombre le paragraphe. Le style référence garde le texte lisible et fait des changements d’URL une seule modification.

Oui, imbriquer une image dans un lien ([![alt](img)](url)) est du CommonMark standard. La sortie rendue est un hyperlien qui enveloppe un <img>.

Outils similaires

Outil disponible dans d’autres langues