Syntaxe des images
Les images sont des éléments visuels importants dans la documentation. Markdown propose une syntaxe concise pour insérer et gérer les images.
Syntaxe de base des images
Images en ligne
Utilisez le format 
:
markdown

Images avec titre
Ajoutez un titre optionnel :
markdown

Lorsque vous survolez l'image, le texte du titre s'affiche.
Images de type référence
Style de référence de base
markdown
![texte alternatif][image-ref]
[image-ref]: https://www.markdownlang.com/image.jpg "Titre optionnel"
Style de référence abrégé
Lorsque le label de référence est identique au texte alternatif :
markdown
![Logo Markdown][]
[Logo Markdown]: https://www.markdownlang.com/markdown-logo.png
Types de chemins d'image
URL absolue
markdown

Chemin relatif
markdown



Chemin relatif à la racine
markdown

Fonctionnalités avancées pour les images
Images cliquables (liens)
Encapsulez une image dans un lien :
markdown
[](https://www.markdownlang.com)
Rendu : Cliquer sur l'image ouvrira le lien spécifié.
Contrôle des images avec HTML
Spécifier la taille
markdown
<img src="image.jpg" alt="Description" width="300" height="200">
Alignement des images
markdown
<!-- Centrer -->
<div align="center">
<img src="image.jpg" alt="Image centrée" width="400">
</div>
<!-- Aligner à droite -->
<div align="right">
<img src="image.jpg" alt="Image alignée à droite" width="300">
</div>
Images responsives
markdown
<img src="image.jpg" alt="Image responsive" style="max-width: 100%; height: auto;">
Affichage combiné d'images
Affichage côte à côte
markdown
<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">
Grille d'images
markdown
<table>
<tr>
<td><img src="img1.jpg" width="200"></td>
<td><img src="img2.jpg" width="200"></td>
</tr>
<tr>
<td><img src="img3.jpg" width="200"></td>
<td><img src="img4.jpg" width="200"></td>
</tr>
</table>
Image et texte mélangés
markdown
<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">
Ceci est un paragraphe de texte avec l'image flottant à gauche. Le texte s'enroule autour de l'image, créant une mise en page mixte. Cela peut être utilisé pour des profils personnels ou des présentations de produits.
<div style="clear: both;"></div>
Bonnes pratiques pour le texte alternatif (alt)
Texte descriptif
markdown
✅ Recommandé : Décrivez le contenu de l'image

❌ Non recommandé : Texte sans signification


Images fonctionnelles
markdown
✅ Recommandé : Expliquez la fonction de l'image


❌ Non recommandé : Répéter le texte environnant
Cliquez  pour rechercher
Images décoratives
markdown
✅ Recommandé : Utilisez un texte alternatif vide pour les images décoratives

❌ Non recommandé : Description inutile

Formats d'image courants
Formats adaptés au web
Format | Utilisation | Caractéristiques |
---|---|---|
JPEG | Photos, images complexes | Fichier léger, compression avec perte |
PNG | Icônes, fonds transparents | Compression sans perte, supporte la transparence |
WebP | Images web modernes | Taille réduite, meilleure qualité |
SVG | Graphiques vectoriels, icônes | Redimensionnable, fichier léger |
GIF | Animations simples | Supporte l'animation, couleurs limitées |
Conseils de choix de format
markdown
✅ Utilisation recommandée :
 ← JPEG pour les photos
 ← PNG pour les icônes
 ← SVG pour les graphiques vectoriels
 ← GIF pour les animations simples
❌ Non recommandé :
 ← JPEG inadapté pour les icônes
 ← Les fichiers PNG peuvent être volumineux
Conseils d'optimisation des images
Optimisation de la taille des fichiers
Choisissez la bonne résolution
markdown<!-- Recommandé pour l'affichage web --> <img src="image.jpg" width="800" alt="Description"> ← Image 2x pour écrans haute densité
Utilisez une compression appropriée
markdown<!-- Qualité JPEG : 70-80% recommandé --> 
Chargement différé (lazy loading)
markdown<img src="image.jpg" alt="Description" loading="lazy">
Utilisation de CDN et d'hébergement d'images
markdown
<!-- Utilisez un CDN pour l'accélération -->

<!-- Service d'hébergement d'images -->

Erreurs courantes et solutions
1. Erreur de chemin
markdown
❌ Erreur :
 ← Le chemin n'existe pas
✅ Correct :
 ← Vérifiez le chemin du fichier
 ← Utilisez le bon chemin relatif
2. Texte alternatif manquant
markdown
❌ Erreur :
 ← Image importante sans description
✅ Correct :

3. Problème de contrôle de la taille
markdown
❌ Problème : Image trop grande
 ← Peut casser la mise en page
✅ Solution :
<img src="huge-image.jpg" alt="Grande image" style="max-width: 100%;">
4. Problème de lien image
markdown
❌ Erreur :
[(https://www.markdownlang.com) ← Erreur de syntaxe
✅ Correct :
[](https://www.markdownlang.com)
Scénarios pratiques
1. Documentation technique
markdown
## Étapes d'installation
1. Téléchargez l'installeur

2. Lancez l'installeur

3. Terminez l'installation

2. Présentation produit
markdown
## Fonctionnalités du produit
### Design UI moderne
<div align="center">
<img src="ui-screenshot.png" alt="Capture d'écran de l'interface produit" width="600">
<p><em>Interface utilisateur propre et intuitive</em></p>
</div>
### Support multi-plateforme
<table>
<tr>
<td align="center">
<img src="windows-logo.png" width="60"><br>
<strong>Windows</strong>
</td>
<td align="center">
<img src="mac-logo.png" width="60"><br>
<strong>macOS</strong>
</td>
<td align="center">
<img src="linux-logo.png" width="60"><br>
<strong>Linux</strong>
</td>
</tr>
</table>
3. Profil personnel
markdown
## À propos de moi
<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">
Bonjour ! Je suis développeur full-stack spécialisé dans les technologies web modernes. J'ai plus de 5 ans d'expérience et je maîtrise divers langages et frameworks.
### Stack de compétences



<div style="clear: both;"></div>
4. Instructions de tutoriel
markdown
## Configuration de l'éditeur de code
Suivez ces étapes pour configurer votre environnement de développement :
1. **Ouvrez les paramètres**

2. **Recherchez les éléments de configuration**

3. **Modifiez la valeur de configuration**

> 💡 **Astuce** : Redémarrez l'éditeur après la configuration pour que les paramètres soient pris en compte.
Accessibilité
Rédigez un texte alternatif pertinent
markdown
✅ Recommandé : Description détaillée

❌ Non recommandé : Répétition simple

Utilisez des descriptions structurées
markdown

Sortie HTML
Les images Markdown sont converties en HTML :
markdown

Converti en :
html
<img src="image.jpg" alt="Texte alternatif" title="Titre de l'image">
Images de type référence :
markdown
![Texte alternatif][ref]
[ref]: image.jpg "Titre"
Converti en :
html
<img src="image.jpg" alt="Texte alternatif" title="Titre">
Syntaxes associées
- Syntaxe des liens – Création de liens
- Syntaxe HTML – Intégration HTML
- Blocs de code délimités – Mise en évidence du code
Pratique
Essayez de créer les éléments suivants :
- Une page de présentation produit avec plusieurs images
- Un tutoriel technique avec des captures d'écran et explications étape par étape
- Une page de présentation d'équipe avec avatars et informations des membres
- Un graphique comparatif montrant des tendances de données
Outils recommandés
Outils d'édition d'image
- Outils en ligne : Canva, Figma, Photopea
- Logiciels de bureau : GIMP, Paint.NET, Adobe Photoshop
- Outils de capture d'écran : Snipaste, Lightshot, outils de capture intégrés
Outils d'optimisation d'image
- Outils de compression : TinyPNG, ImageOptim, Squoosh
- Conversion de format : CloudConvert, Online-Convert
- Traitement par lot : ImageMagick, XnConvert
Services d'hébergement d'images
- Services gratuits : GitHub, Gitee, sm.ms
- Services payants : Qiniu Cloud, Alibaba Cloud OSS, Tencent Cloud COS
- Accélération CDN : jsDelivr, Cloudflare, AWS CloudFront