Skip to content

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 ![texte alternatif](URL de l'image) :

markdown
![Logo Markdown](https://www.markdownlang.com/markdown-logo.png)

Images avec titre

Ajoutez un titre optionnel :

markdown
![Logo Markdown](https://www.markdownlang.com/markdown-logo.png "Logo officiel 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
![Image Web](https://www.markdownlang.com/images/photo.jpg)

Chemin relatif

markdown
![Image locale](./images/photo.jpg)
![Image du dossier parent](../images/photo.jpg)
![Image du même dossier](photo.jpg)

Chemin relatif à la racine

markdown
![Image du répertoire racine](/images/photo.jpg)

Fonctionnalités avancées pour les images

Images cliquables (liens)

Encapsulez une image dans un lien :

markdown
[![Description de l'image](image.jpg)](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
![Un utilisateur travaillant sur un ordinateur portable dans un espace de travail](workspace.jpg)

❌ Non recommandé : Texte sans signification
![Image](workspace.jpg)
![Cliquez ici](workspace.jpg)

Images fonctionnelles

markdown
✅ Recommandé : Expliquez la fonction de l'image
![Bouton de recherche](search-icon.png)
![Lien vers le dépôt GitHub](github-logo.png)

❌ Non recommandé : Répéter le texte environnant
Cliquez ![Cliquez](search-icon.png) pour rechercher

Images décoratives

markdown
✅ Recommandé : Utilisez un texte alternatif vide pour les images décoratives
![](decorative-border.png)

❌ Non recommandé : Description inutile
![Motif de bordure décorative](decorative-border.png)

Formats d'image courants

Formats adaptés au web

FormatUtilisationCaractéristiques
JPEGPhotos, images complexesFichier léger, compression avec perte
PNGIcônes, fonds transparentsCompression sans perte, supporte la transparence
WebPImages web modernesTaille réduite, meilleure qualité
SVGGraphiques vectoriels, icônesRedimensionnable, fichier léger
GIFAnimations simplesSupporte l'animation, couleurs limitées

Conseils de choix de format

markdown
✅ Utilisation recommandée :
![Photo](photo.jpg)           ← JPEG pour les photos
![Icône](icon.png)            ← PNG pour les icônes
![Vecteur](logo.svg)          ← SVG pour les graphiques vectoriels
![Animation](animation.gif)   ← GIF pour les animations simples

❌ Non recommandé :
![Icône](icon.jpg)            ← JPEG inadapté pour les icônes
![Photo](photo.png)           ← Les fichiers PNG peuvent être volumineux

Conseils d'optimisation des images

Optimisation de la taille des fichiers

  1. 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é
  2. Utilisez une compression appropriée

    markdown
    <!-- Qualité JPEG : 70-80% recommandé -->
    ![Photo optimisée](optimized-photo.jpg)
  3. 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 -->
![Image CDN](https://cdn.example.com/images/photo.jpg)

<!-- Service d'hébergement d'images -->
![Image hébergée](https://img.example.com/upload/photo.jpg)

Erreurs courantes et solutions

1. Erreur de chemin

markdown
❌ Erreur :
![Image](images/photo.jpg)    ← Le chemin n'existe pas

✅ Correct :
![Image](./images/photo.jpg)  ← Vérifiez le chemin du fichier
![Image](/assets/photo.jpg)   ← Utilisez le bon chemin relatif

2. Texte alternatif manquant

markdown
❌ Erreur :
![](important-chart.jpg)     ← Image importante sans description

✅ Correct :
![Graphique comparatif des ventes 2023](important-chart.jpg)

3. Problème de contrôle de la taille

markdown
❌ Problème : Image trop grande
![Grande image](huge-image.jpg)   ← 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 :
[![Image](image.jpg)(https://www.markdownlang.com)  ← Erreur de syntaxe

✅ Correct :
[![Image](image.jpg)](https://www.markdownlang.com)

Scénarios pratiques

1. Documentation technique

markdown
## Étapes d'installation

1. Téléchargez l'installeur

   ![Capture d'écran de la page de téléchargement](download-page.png)

2. Lancez l'installeur

   ![Interface de l'assistant d'installation](installer-wizard.png)

3. Terminez l'installation

   ![Confirmation de l'installation terminée](installation-complete.png)

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

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<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**

   ![Entrée des paramètres VS Code](vscode-settings-1.png)

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

   ![Recherche de configuration](vscode-settings-2.png)

3. **Modifiez la valeur de configuration**

   ![Modification de la configuration](vscode-settings-3.png)

> 💡 **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
![Graphique en barres montrant une croissance de 15 % du chiffre d'affaires au T3 2023 avec une flèche rouge vers le haut](revenue-chart-q3.png)

❌ Non recommandé : Répétition simple
![Graphique](revenue-chart-q3.png)

Utilisez des descriptions structurées

markdown
![Photo de groupe de l'équipe : rangée avant de gauche à droite Zhang San, Li Si, Wang Wu ; rangée arrière de gauche à droite Zhao Liu, Sun Qi, Zhou Ba](team-photo.jpg)

Sortie HTML

Les images Markdown sont converties en HTML :

markdown
![Texte alternatif](image.jpg "Titre de l'image")

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

Pratique

Essayez de créer les éléments suivants :

  1. Une page de présentation produit avec plusieurs images
  2. Un tutoriel technique avec des captures d'écran et explications étape par étape
  3. Une page de présentation d'équipe avec avatars et informations des membres
  4. 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

Build by www.markdownlang.com