> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter des médias

> Importez, gérez et intégrez des images et autres ressources multimédias dans vos pages de documentation via le gestionnaire de fichiers de l'éditeur.

<div id="supported-file-types">
  ## Types de fichiers pris en charge
</div>

* **Images** : PNG, JPG, JPEG, GIF, WebP (max 20 Mo)
* **Vidéos** : MP4, WebM (max 20 Mo)
* **Polices** : TrueType (TTF), WOFF, WOFF2
* **Autres** : PDF, ICO (favicons)

<div id="add-media-to-a-page">
  ## Ajouter des médias à une page
</div>

<div id="drag-and-drop">
  ### Glisser-déposer
</div>

Glissez-déposez des éléments multimédias depuis votre ordinateur ou le gestionnaire de ressources dans une page. En mode visuel, l'image ou la vidéo est insérée directement dans le contenu. En mode Markdown, l'éditeur insère le chemin à l'emplacement de votre curseur. Les images sont enregistrées à la racine de votre dossier `images/`, et les vidéos à la racine de votre dossier `videos/`.

<div id="slash-command">
  ### Commande /
</div>

Tapez <kbd>/image</kbd> pour ouvrir le menu d’images ou <kbd>/video</kbd> pour ouvrir le menu de vidéos. Importez un nouveau média ou sélectionnez un fichier existant.

<div id="embed">
  ### Intégrer
</div>

Tapez <kbd>/embed</kbd> et collez une URL YouTube, Loom ou Vimeo. L’éditeur détecte le fournisseur et génère automatiquement l’iframe. Dans le menu slash, les recherches `youtube`, `yt`, `loom` et `vimeo` font également apparaître la commande **Embed**.

Pour les autres contenus intégrés, tapez <kbd>/embed</kbd>, puis activez **Intégration manuelle** pour écrire du HTML personnalisé.

<div id="upload-files">
  ### Téléverser des fichiers
</div>

Utilisez l’explorateur de fichiers dans la barre latérale pour téléverser ou rechercher des fichiers. Faites glisser des fichiers et déposez-les dans un dossier pour organiser les ressources multimédias.

<Frame>
  <img src="https://mintcdn.com/mintlify/2vGCTglg0h_W2coC/images/editor/assets-light.png?fit=max&auto=format&n=2vGCTglg0h_W2coC&q=85&s=f61f5484c02e90ea06d68d6d0b8ed8f8" alt="Explorateur de fichiers ouvert dans le menu de la barre latérale de l’éditeur." className="block dark:hidden" width="790" height="816" data-path="images/editor/assets-light.png" />

  <img src="https://mintcdn.com/mintlify/2vGCTglg0h_W2coC/images/editor/assets-dark.png?fit=max&auto=format&n=2vGCTglg0h_W2coC&q=85&s=1f68623f07f19cbefb6d4958724603aa" alt="Explorateur de fichiers ouvert dans le menu de la barre latérale de l’éditeur." className="hidden dark:block" width="792" height="818" data-path="images/editor/assets-dark.png" />
</Frame>

<div id="format-images">
  ## Mettre en forme les images
</div>

Après avoir inséré une image en mode visuel, survolez-la pour afficher une barre d’outils avec des options de mise en forme.

* **Aperçu clair/sombre** : basculez entre le mode clair et le mode sombre pour voir l’apparence de l’image dans chaque thème.
* **Alignement** : choisissez un alignement de l’image : gauche, centré, droite ou pleine largeur.
* **Frame** : entourez l’image d’un composant `<Frame>` pour ajouter une bordure et un arrière-plan.
* **Paramètres** : remplacez l’image ou mettez à jour son texte alternatif.

<div id="manage-assets">
  ## Gérer les ressources
</div>

<div id="organize-with-folders">
  ### Organiser à l’aide de dossiers
</div>

Cliquez sur le bouton **+** dans l’explorateur de fichiers pour créer un nouveau dossier. Faites glisser et déposez des fichiers et des dossiers dans l’arborescence pour les réorganiser.

<div id="rename-and-edit-assets">
  ### Renommer et modifier des ressources
</div>

Survolez une ressource et cliquez sur le bouton **...** pour renommer le fichier ou mettre à jour son texte alternatif.

<div id="delete-assets">
  ### Supprimer des ressources
</div>

Survolez une ressource, puis cliquez sur le bouton <Icon icon="trash" /> pour la supprimer.

<div id="best-practices">
  ## Bonnes pratiques
</div>

* **Utilisez des noms explicites** : Nommez clairement vos fichiers, par exemple `api-dashboard-light.png` plutôt que `img1.png`.
* **Ajoutez un texte alternatif (alt)** : Fournissez un texte alternatif descriptif pour l’accessibilité et le SEO.
* **Organisez à l’aide de dossiers** : Regroupez les ressources associées, comme les variantes en mode clair et sombre ou pour une fonctionnalité ou une section spécifique.
* **Utilisez des formats adaptés** : PNG pour les graphiques avec transparence, JPG pour les photos, SVG pour les icônes et les logos (vous ne pouvez pas téléverser de fichiers SVG via l'éditeur, mais vous pouvez les ajouter à votre référentiel via Git).


## Related topics

- [Ajouter des exemples de SDK](/docs/fr/api-playground/adding-sdk-examples.md)
- [Créer et modifier des pages](/docs/fr/editor/pages.md)
- [Configurer l'assistant](/docs/fr/assistant/configure.md)