# Images

Vous pouvez insérer des images dans votre page, puis choisir leur taille et décider si elles doivent être alignées à gauche, au centre ou à droite. Vous pouvez également inclure, en option, un texte alternatif et/ou une légende sur votre bloc d’image.

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

### Exemple de 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 de bloc d’image avec une légende</p></figcaption></figure></div>

### Téléverser 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](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/fr/creating-content/blocks/..#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, sélectionner un fichier déjà téléversé, coller une URL d’image ou 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 %}

#### 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="broken-reference" 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&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> et choisissez **Ajouter des images…** pour ouvrir à nouveau le **Sélectionner des images** panneau latéral.

Pour supprimer une image d’une galerie, ouvrez le **menu Modifier** <picture><source srcset="broken-reference" 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&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> sur l’image que vous souhaitez supprimer, puis appuyez sur la touche **Suppr ⌫** .

### Ajouter des images pour le mode clair et le mode 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 en mode sombre de votre site publié. GitBook affichera automatiquement l’image correcte selon le mode utilisé par votre visiteur.

Pour ajouter une image pour le mode sombre, survolez votre image, ouvrez le **menu Modifier** <picture><source srcset="broken-reference" 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&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> et cliquez sur **Remplacer l’image** <picture><source srcset="broken-reference" 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&#x26;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 pas encore en charge les images en mode clair et en mode sombre dans certains cas, notamment les couvertures de page ou les couvertures d’image sur les [cartes](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/fr/creating-content/blocks/cards).
{% endhint %}

### Images en mode clair et en mode sombre via la synchronisation GitHub/GitLab <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 en mode sombre dans Markdown via la syntaxe HTML (`<picture>` et `<source>`).

Pour les images de bloc, utilisez l’élément HTML `<figure>` avec un élément `<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 placées au fil du texte), utilisez `<picture>` avec un élément `<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 propre à 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 Modifier** <picture><source srcset="broken-reference" 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&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture>. Cliquez sur le bouton **Taille** pour changer la taille de votre image parmi les विकल्प 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&#x26;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 sera basé sur cette limite.

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

{% hint style="info" %}
Vous pouvez rendre les blocs d’image [occupent toute la largeur de votre fenêtre](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/fr/creating-content/blocks/..#full-width-blocks) en cliquant sur **menu Options** <picture><source srcset="broken-reference" 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&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> à côté du bloc et en choisissant **Pleine largeur**.
{% endhint %}

### Redimensionner des images via Git Sync

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

Lorsque nous exportons 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 la largeur de l’image à 100 pixels\
`<img width="100%" />` Définit l’image à sa taille complète (bien que cela soit limité par l’éditeur)

### Aligner les images

Par défaut, les blocs d’image afficheront votre image à sa taille maximale, alignée au centre.

Pour modifier l’alignement d’une image, ouvrez le **menu Options** <picture><source srcset="broken-reference" 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&#x26;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).

### Encadrer les images

Vous pouvez ajouter un cadre aux blocs d’image pour donner à vos images un aspect homogène et les distinguer 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&#x26;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 subtile derrière la légende.</p></figcaption></figure></div>

Pour ajouter un cadre à une image, survolez-la, ouvrez le **menu Options** <picture><source srcset="broken-reference" 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&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> et activez l’interrupteur **Avec cadre** .

{% hint style="info" %}
**Bon à savoir :** Vous ne pouvez encadrer que des 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 une image différente pour le mode sombre et le mode 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>
```