Images Markdown

Les images rendent votre contenu plus engageant et aident à illustrer vos points. Markdown fournit une syntaxe simple pour ajouter des images, bien que vous ayez parfois besoin de HTML pour des fonctionnalités plus avancées.

Syntaxe de base des images

La syntaxe de base pour les images en Markdown est similaire aux liens, mais avec un point d'exclamation au début : 

![Texte alternatif](url-image.jpg)
![Image locale](./images/photo.jpg)
![Image externe](https://exemple.com/image.jpg)

Images avec titres

Vous pouvez ajouter des titres qui apparaissent lorsque les utilisateurs passent la souris sur l'image : 

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

Meilleures pratiques pour le texte alternatif

Le texte alternatif est crucial pour l'accessibilité et le SEO :

1. Être descriptif

❌ Pas utile : 

![Image](photo.jpg)
![Photo](pic.png)

✅ Descriptif : 

![Femme programmant sur un ordinateur portable dans un café](codage-cafe.jpg)
![Graphique en barres montrant l'augmentation des ventes de 2020 à 2024](graphique-ventes.png)

2. Rester concis

❌ Trop long : 

![Ceci est une description vraiment longue d'une image qui montre une personne assise à un ordinateur dans ce qui semble être un environnement de bureau moderne avec des murs blancs et de grandes fenêtres](bureau.jpg)

✅ Concis : 

![Personne travaillant à l'ordinateur dans un bureau moderne](bureau.jpg)

3. Ne pas inclure "Image de" ou "Photo de"

❌ Redondant : 

![Image d'un chien jouant dans le parc](chien.jpg)

✅ Direct : 

![Chien jouant dans le parc](chien.jpg)

Images de référence

Comme les liens, vous pouvez utiliser la syntaxe de référence pour les images : 

![Texte alternatif][reference-image]  

[reference-image]: image.jpg "Titre optionnel"

Exemple

Voici notre logo : ![Logo de l'entreprise][logo]

Et voici une capture d'écran : ![Capture d'écran de l'app][capture]

[logo]: /images/logo.png "Logo de Mon Entreprise"
[capture]: /images/app.png "Capture d'écran du tableau de bord de l'app"

Chemins et URLs d'images

Images locales

![Image locale](./images/photo.jpg)
![Chemin relatif](../assets/icone.png)
![Chemin absolu](/public/images/banniere.jpg)

Images externes

![Image externe](https://exemple.com/image.jpg)
![Photo Unsplash](https://images.unsplash.com/photo-123/photo.jpg)

Modèles courants

Image avec légende

![Réunion d'équipe en salle de conférence](reunion.jpg)
*Figure 1 : Réunion d'équipe hebdomadaire discutant des jalons du projet*

Images avant/après

## Avant
![Ancien design du site web](ancien-design.png)

## Après
![Nouveau design du site web](nouveau-design.png)

Instructions étape par étape

1. Cliquez sur l'icône des paramètres
   ![Icône des paramètres en haut à droite](icone-parametres.png)

2. Sélectionnez "Paramètres du compte"
   ![Option du menu des paramètres du compte](menu-compte.png)

3. Mettez à jour vos informations de profil
   ![Formulaire de profil avec champs modifiables](formulaire-profil.png)

Galerie d'images

## Captures d'écran du projet

![Page d'accueil](accueil.png) ![Tableau de bord](tableau-bord.png) ![Paramètres](parametres.png)

Dépannage des images

Problèmes courants

  1. Image qui ne s'affiche pas : Vérifiez le chemin et le nom du fichier

  2. Icône d'image cassée : Vérifiez que l'URL de l'image est accessible
  3. Image trop grande : Redimensionnez ou compressez l'image
  4. Mauvais format : Assurez-vous que le navigateur supporte le format d'image

Tester les images

  • •
    Prévisualisez dans votre éditeur Markdown

  • •
    Vérifiez dans différents navigateurs
  • •
    Vérifiez sur les appareils mobiles
  • •
    Testez avec des connexions internet lentes

Techniques avancées

Liens d'images

Combinez les images avec les liens : 

[![Cliquez pour voir plus grand](miniature.jpg)](taille-complete.jpg)

Les images sont un moyen puissant d'améliorer vos documents Markdown. Utilisez-les judicieusement pour soutenir votre contenu et améliorer l'expérience utilisateur !

Besoin de mettre l'accent sur du texte dans votre contenu ? Apprenez le formatage barré ensuite.