> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/fr/creer-du-contenu/blocks/insert-images.md).

# Images

Ajoutez une image ou une galerie d’images à une page, ajoutez des variantes d’image pour le mode sombre, et redimensionnez et alignez les images selon vos besoins

Vous pouvez insérer des images dans votre page, puis choisir leur taille et décider de les aligner à gauche, au centre ou à droite. Vous pouvez également, en option, ajouter un texte alternatif et/ou une légende à votre bloc d’image.

{% hint style="info" %}
**Astuce :** Pour des raisons d’accessibilité, nous vous recommandons de définir un texte alternatif pour vos images.
{% endhint %}

### Exemple d’un bloc d’image <a href="#example-of-an-image-block" id="example-of-an-image-block"></a>

<div align="center"><figure><img src="https://images.unsplash.com/photo-1446776709462-d6b525c57bd3?crop=entropy&#x26;cs=srgb&#x26;fm=jpg&#x26;ixid=M3wxOTcwMjR8MHwxfHNlYXJjaHwyfHxzcGFjZXxlbnwwfHx8fDE3MzMxOTY5NTR8MA&#x26;ixlib=rb-4.0.3&#x26;q=85" alt="A photograph taken from space looking back towards Earth. A satellite is in the foreground, and in the background is an ocean-covered part of our planet with patchy clouds."><figcaption><p>Exemple d’un bloc d’image avec une légende</p></figcaption></figure></div>

### Téléversement d’une image

Il existe deux façons d’ajouter des images à votre contenu :

1. Faites glisser l’image depuis votre système de gestion de fichiers directement dans un bloc vide de votre page.
2. [Ajoutez un bloc d’image](/docs/documentation/fr/creer-du-contenu/blocks.md#inserting-a-new-content-block) à votre page et utilisez le **Sélectionner des images** panneau latéral qui apparaît à droite de la fenêtre.

Si vous suivez le deuxième processus, vous pouvez choisir de téléverser un fichier, de sélectionner un fichier déjà téléversé, de coller l’URL d’une image ou d’ajouter une image depuis [Unsplash](https://unsplash.com/) à l’aide de la recherche intégrée.

{% hint style="warning" %}
GitBook vous permet de téléverser des images jusqu’à 100 Mo par fichier.
{% endhint %}

Il n’y a pas de limite fixe au nombre total de ressources dans une section, bien que GitBook se réserve le droit de bloquer les comptes en cas d’abus. Pour les fichiers plus volumineux que la limite de téléversement, stockez-les dans un service comme Google Drive ou Dropbox et créez un lien vers eux depuis votre page.

Les GIF animés sont limités à 200 images par fichier. Les fichiers volumineux — GIF inclus — ralentissent le chargement de votre page ; évitez donc, dans la mesure du possible, de téléverser directement les gros fichiers.

#### Créer une galerie d’images

Ajouter plus d’une image à un bloc d’image créera une galerie. Pour ce faire, ouvrez le **menu Options** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> et choisissez **Ajouter des images…** pour rouvrir le **Sélectionner des images** panneau latéral.

Pour supprimer une image d’une galerie, ouvrez le **menu Édition** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> de l’image que vous souhaitez supprimer et appuyez sur la touche **Suppr. ⌫** key.

### Ajout d’images pour les modes clair et sombre <a href="#light-and-dark-mode" id="light-and-dark-mode"></a>

Vous pouvez définir différentes images pour les versions en mode clair et sombre de votre site publié. GitBook affichera automatiquement l’image appropriée selon le mode utilisé par votre visiteur.

Pour ajouter une image pour le mode sombre, survolez votre image, ouvrez le **menu Édition** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> et cliquez sur **Remplacer l’image** <picture><source srcset="/files/B8EhRVkFXw7nB8Q01UEZ" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F0mPo1tPDFeEbPOr1gc4V%2Freplace%20image.svg?alt=media&amp;token=9f037f9a-0f37-4c5b-9b30-6b55ffb11f5b" alt="The Replace image icon in GitBook"></picture>.

Dans le menu déroulant, choisissez **Ajouter une image pour le mode sombre**. Une fois cela défini, vous pouvez remplacer l’une ou l’autre image depuis ce même menu.

{% hint style="warning" %}
**Remarque :** GitBook ne prend actuellement pas en charge les images pour les modes clair et sombre dans certains cas, y compris les couvertures de page ou les couvertures d’image sur [les cartes](/docs/documentation/fr/creer-du-contenu/blocks/cards.md).
{% endhint %}

### Images en mode clair et sombre via GitHub/GitLab Sync <a href="#light-and-dark-mode-through-github-gitlab-sync" id="light-and-dark-mode-through-github-gitlab-sync"></a>

Vous pouvez également ajouter des images en mode clair et sombre dans Markdown via la syntaxe HTML (`<picture>` et `<source>`).

Pour les images de bloc, utilisez l’élément HTML `<figure>` avec un `<picture>` et `<source>` à l’intérieur :

```html
Texte avant

<figure>
  <picture>
    <source
      srcset="
        https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
      "
      media="(prefers-color-scheme: dark)"
    />
    <img
      src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
      alt="Logo GitHub"
    />
  </picture>
  <figcaption>Texte de légende</figcaption>
</figure>

Texte après
```

Pour les images en ligne (images intégrées dans le texte), utilisez `<picture>` avec un `<source>` à l’intérieur :

```html
Texte avant l’image
<picture
  ><source
    srcset="
      https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    "
    media="(prefers-color-scheme: dark)" />
  <img
    src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
    alt="Le logo GitHub"
/></picture>
et le texte après l’image
```

{% hint style="warning" %}
**Remarque :** Nous ne prenons pas encore en charge [la syntaxe réservée à GitHub](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) via `#gh-dark-mode-only` ou `#gh-light-mode-only`.
{% endhint %}

### Redimensionnement

Pour redimensionner votre image, survolez-la et ouvrez le **menu Édition** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture>. Cliquez sur le **bouton Taille** pour modifier la taille de votre image parmi les options disponibles.

<figure><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1cWY3c3CgGXIK4Bgnhb6%2Fimage_resizing%402x.png?alt=media&amp;token=112c7e1d-6a04-4a59-a69d-6292a74297ff" alt="A GitBook screenshot showing how to resize an image"><figcaption><p>Redimensionner une image</p></figcaption></figure>

* **Petit** – 25 % de la taille de l’image
* **Moyen** – 50 % de la taille de l’image
* **Grand** – 75 % de la taille de l’image
* **Ajuster** – Supprime toutes les spécifications de taille et affiche l’image soit en taille réelle, soit limitée à une largeur maximale de **735** **pixels** pour les images plus grandes.

Si votre image est plus large que l’éditeur, GitBook limitera plutôt la largeur de l’image à celle de l’éditeur, et le redimensionnement se basera sur cette limite.

{% hint style="info" %}
**Remarque :** Lors du redimensionnement des images dans une galerie d’images, le résultat peut différer du redimensionnement d’une image individuelle.
{% endhint %}

### Redimensionnement des images via Git Sync

Si vous souhaitez davantage de contrôle sur la taille de votre image, vous pouvez préciser la taille exacte à l’aide de Markdown dans GitHub ou GitLab.

Lors de l’export d’une image, nous utilisons la balise HTML `<img/>`. Conformément aux spécifications, nous pouvons définir les dimensions de l’image à l’aide des attributs `width` et `height` , qui n’acceptent que des valeurs en pixels ou une combinaison d’un nombre et d’un signe `%` .\
\
Les variantes valides pour spécifier les dimensions de l’image sont :\
\
`<img width="100" />` Définit l’image à 100 pixels de large\
`<img width="100%" />` Définit l’image en taille réelle (bien que cela soit limité par l’éditeur)

### Alignement des images

Par défaut, les blocs d’image affichent votre image en taille réelle, alignée au centre.

Pour modifier l’alignement d’une image, ouvrez le **menu Options** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> et choisissez l’alignement souhaité. Cela n’affectera que les images plus étroites que l’éditeur, ou les images que vous avez [redimensionnées](#resizing).

### Encadrement des images

Vous pouvez ajouter un cadre aux blocs d’image pour donner à vos images un aspect cohérent et les séparer visuellement du contenu qui les entoure.

<div data-with-frame="true"><figure><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FfL0VWcltHyuCKeqJsW0Q%2Fimage-frame-demo%402x.jpg?alt=media&amp;token=6cac6c68-c288-4c42-abb2-e2bb7de23652" alt="A black and white photograph of a lone figure walking across a stark white landscape"><figcaption><p>Les images encadrées peuvent avoir des légendes et affichent une grille discrète derrière la légende.</p></figcaption></figure></div>

Pour ajouter un cadre à une image, survolez-la, ouvrez le **menu Options** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> et activez le bouton **Avec cadre** .

{% hint style="info" %}
**Bon à savoir :** Vous ne pouvez encadrer que les images uniques dans un bloc. Les blocs d’image contenant plusieurs images et les images en ligne ne peuvent pas avoir de cadre.
{% endhint %}

### Représentation en Markdown

```markdown
//Bloc simple
![](https://gitbook.com/images/gitbook.png)

//Bloc avec légende
![Le logo GitBook](https://gitbook.com/images/gitbook.png)

//Bloc avec texte alternatif

<figure><img src="https://gitbook.com/images/gitbook.png" alt="Le logo GitBook"></figure>

//Bloc avec légende et texte alternatif

<figure><img src="https://gitbook.com/images/gitbook.png" alt="Le logo GitBook"><figcaption><p>Logo GitBook</p></figcaption></figure>

// Bloc avec image encadrée

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="Le logo GitBook"></div>

//Bloc avec image différente pour les modes sombre et clair, avec légende

<figure>
  <picture>
    <source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)">
    <img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="Logo GitHub">
  </picture>
  <figcaption>Texte de légende</figcaption>
</figure>
```

### Pourquoi mon image ne se charge-t-elle pas ?

Une erreur « impossible de charger l’image » signifie que l’image a été modifiée ou supprimée à sa source. Si vous avez intégré une image par URL plutôt que de la téléverser, GitBook dépend de cette URL : si l’image est déplacée ou disparaît de la source, elle cesse d’apparaître sur votre page.

Pour résoudre le problème, téléversez l’image directement dans GitBook, ou mettez à jour l’URL si l’emplacement de l’image a changé. L’erreur peut aussi apparaître lorsque vous copiez une image d’une section à une autre, car chaque section possède son propre répertoire de fichiers — téléversez à nouveau l’image dans la nouvelle section.

Vous pouvez consulter tous les fichiers téléversés dans une section dans l’onglet **Bibliothèque** à côté de **Pages** en haut de la table des matières.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/fr/creer-du-contenu/blocks/insert-images.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
