Syntaxe Markdown pour images 2026 : GitHub, Notion, HackMD, Obsidian en un guide
Pas envie de lire ? Trois phrases suffisent
- La syntaxe Markdown de base
marche partout - Le redimensionnement diffère sur chaque plateforme — c'est le piège
- L'URL doit être un lien direct public — pas de lien de partage Google Drive
Maintenant, le détail complet.
Syntaxe de base universelle
texte alternatif: s'affiche si l'image ne charge pas, lu par les lecteurs d'écranURL image: URL accessible publiquement (lien direct)
Avec titre (affiché au survol) :
Syntaxe référence (utile pour réutiliser la même image) :
![texte alternatif][logo]
[logo]: https://example.com/image.png "Titre"
Redimensionnement : chacun fait à sa sauce
Le piège numéro un. Cinq plateformes principales, cinq approches.
| Plateforme | Syntaxe de redimensionnement | Exemple |
|---|---|---|
| GitHub | Pas de syntaxe Markdown, HTML obligatoire | <img src="url" width="300"> |
| HackMD | =largeurXhauteur après l'URL |
 |
| Notion | Redimensionnement manuel à la souris | Upload puis glisser les bords |
| Obsidian | ` | largeurou |
| Typora | HTML ou zoom CSS | <img src="url" style="zoom:50%"> |
GitHub
Le renderer Markdown de GitHub ne supporte aucune syntaxe de taille Markdown. Seule solution : HTML.
<img src="https://example.com/image.png" width="400" alt="description">
GitHub supporte les attributs width, height, align de <img>. L'attribut style est filtré pour des raisons de sécurité.
HackMD
Syntaxe d'extension propre à HackMD, avec =largeurXhauteur après l'URL :
Largeur seule, hauteur automatique :
Cette syntaxe est spécifique à HackMD — ne fonctionne pas ailleurs.
Obsidian
Redimensionnement dans le texte alternatif :
Obsidian supporte aussi les liens internes Wiki-style :
![[image.png|300]]
Notion
Notion supporte l'import Markdown de base, mais le redimensionnement se fait dans l'interface à la souris. Pas de syntaxe.
À noter : Notion réhéberge les images externes sur son CDN (prod-files-secure.s3.us-west-2.amazonaws.com). Donc la source initiale n'affecte pas la vitesse d'affichage, mais vous ne pouvez pas mettre à jour l'image en changeant l'original.
Compatibilité des sources d'images
Toutes les URLs ne s'affichent pas sur toutes les plateformes. Tests réels :
| Source image | GitHub | HackMD | Notion | Obsidian | Typora |
|---|---|---|---|---|---|
| Hébergeur direct (lpic.cc, ImgBB, etc.) | OK | OK | OK | OK | OK |
| Image dans repo GitHub | OK | OK | OK | Config requise | OK |
| Lien de partage Google Drive | Non | Non | Ré-upload auto | Instable | Non |
| Lien de partage Dropbox | Non | Non | Ré-upload auto | Instable | Non |
| Base64 inline | OK | OK | Non | OK | OK |
Point clé : les liens de partage Google Drive et Dropbox ne sont pas des liens directs image. La plupart des plateformes Markdown ne savent pas les rendre. Il vous faut un hébergeur qui fournit un lien direct.
Hotlinking : votre image sera-t-elle bloquée ?
Le hotlinking consiste à référencer sur votre page une image hébergée ailleurs. Certains services bloquent pour économiser la bande passante.
| Service | Hotlinking autorisé | Commentaire |
|---|---|---|
| Hébergeurs d'images (lpic.cc, ImgBB) | Oui | Fonction cœur |
| Repos GitHub | Oui (avec limites) | Rate limit sur gros trafic |
| Imgur | Partiel (certaines régions bloquées) | Politique variable |
| WordPress.com | Non | Vérifie le Referer |
| La plupart des sites | Non | Bloque le référencement externe |
Bonnes pratiques pour rédaction technique
Quelques principes pour vos articles de blog ou doc technique :
L'alt text ne se bâcle pas
<!-- À éviter -->
<!-- Correct -->
Rôles de l'alt text :
- Affichage quand l'image ne charge pas
- Lu par les lecteurs d'écran (accessibilité, obligatoire sous RGAA pour sites publics français)
- Aide les moteurs de recherche à comprendre l'image (SEO)
Nommer les fichiers image
<!-- À éviter -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg
<!-- Correct -->
github-actions-workflow-config.png
npm-install-success-output.png
Un bon nom = vous retrouvez en six mois à quoi sert l'image.
Choix du format
- Captures d'écran, interfaces : PNG (texte net)
- Photos, images complexes : WebP ou JPEG (fichier plus léger)
- Icônes, logos, graphiques : SVG (pas de pixelisation au zoom)
- Démo animée : GIF ou WebP animé (gardez sous 5 Mo)
Compresser avant upload
Peu importe le format, compressez avant. Outils recommandés :
- Squoosh (squoosh.app) — Google, dans le navigateur
- TinyPNG (tinypng.com) — batch PNG/JPEG
- ImageOptim (macOS) — glisser-déposer, préserve la qualité
Pour une doc cross-platform
Si votre Markdown doit tourner sur plusieurs plateformes :
- Syntaxe image : standard
, zéro extension propriétaire - Taille : redimensionnez à l'upload (largeur recommandée 600-800 px), pas en syntaxe
- Source : hébergeur à lien direct (comme lpic.cc, sans inscription, lien direct garanti), évitez Google Drive/Dropbox
- Format : PNG ou WebP, évitez BMP et TIFF
À noter, lpic.cc ne supporte pas (encore) le redimensionnement custom ou le cropping temps réel. Préparez vos images avant upload. Pour du batch ou du traitement programmatique, Cloudinary ou Imgur API (dans les régions accessibles) sont au-dessus.
FAQ
Q1 : Peut-on centrer une image en Markdown ?
Le Markdown standard ne prend pas en charge l'alignement. Sur GitHub, utilisez HTML : <p align="center"><img src="url" width="400"></p>. HackMD supporte la syntaxe {:center}. Notion et Obsidian passent par l'UI.
Q2 : Peut-on utiliser des images locales en Markdown ?
Oui, avec chemin relatif : . Valable uniquement dans les éditeurs locaux (Typora, Obsidian, VS Code). Pour publication web, il faut uploader les images sur un hébergeur et obtenir une URL publique.
Q3 : Pourquoi mon image ne s'affiche pas dans README GitHub ?
Trois causes typiques : (1) URL non directe, nécessite login ; (2) serveur source bloque le hotlinking depuis GitHub ; (3) chemin relatif erroné, ne pointe pas vers le bon fichier dans le repo.
Q4 : La syntaxe =300x de HackMD marche-t-elle ailleurs ?
Non. C'est une extension propre à HackMD. GitHub, Notion, Obsidian l'ignorent. Pour du cross-platform, préparez les tailles à l'upload ou utilisez <img> HTML (supporté par GitHub et HackMD).
Q5 : Lien direct vs lien de partage, différence ?
Un lien direct pointe directement vers le fichier image (URL terminant souvent par .jpg, .png, .webp). Ouvert dans un navigateur : image brute. Un lien de partage est une URL de page web qui affiche l'image dans une interface (ex : page d'aperçu Google Drive). Markdown a besoin d'un lien direct pour rendre correctement.
Q6 : Existe-t-il des éditeurs Markdown populaires en France ?
Oui : Typora est très utilisé en France (développeurs, universitaires). Obsidian a explosé chez les chercheurs et étudiants francophones. Joplin (open source) et Notion tiennent aussi une belle part du marché. Pour la rédaction collaborative de documents techniques en français, HackMD et Outline (open source) sont des alternatives à Notion avec hébergement européen possible.