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 si vous souhaitez les aligner à gauche, au centre ou à droite. Vous pouvez également, si vous le souhaitez, inclure un texte alternatif et/ou une légende sur votre bloc d'image.

Astuce : Pour des raisons d'accessibilité, nous vous recommandons de définir un texte alternatif pour vos images.

Exemple de bloc d'image

Téléchargement d'une image

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

Faites glisser et déposez l'image depuis votre système de gestion de fichiers directement dans un bloc vide de votre page.
Ajoutez un bloc d'image à votre page et utilisez le Panneau latéral Sélectionner des images qui apparaît à droite de la fenêtre.

Si vous suivez la deuxième méthode, vous pouvez choisir de télécharger un fichier, sélectionner un fichier déjà téléchargé, coller une URL d'image ou ajouter une image depuis Unsplash en utilisant la recherche intégrée.

GitBook vous permet de télécharger des images jusqu'à 100 Mo par fichier.

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 du bloc et choisissez Ajouter des images… pour ouvrir à nouveau le Panneau latéral Sélectionner des images.

Pour supprimer une image d'une galerie, ouvrez le Menu Actions sur l'image que vous souhaitez supprimer et appuyez sur la touche Supprimer ⌫.

Ajouter des images pour le mode clair et sombre

Vous pouvez définir des images différentes pour les versions mode clair et mode sombre de votre site publié. GitBook affichera automatiquement l'image correcte en fonction du mode dans lequel se trouve votre visiteur.

Pour ajouter une image pour le mode sombre, survolez votre image, ouvrez le Menu Actions et cliquez sur Remplacer l'image .

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.

Remarque : GitBook ne prend actuellement pas en charge les images pour le mode clair et sombre dans certains cas, y compris les couvertures de page ou les couvertures d'image sur les cartes.

Images pour le mode clair et sombre via la synchronisation GitHub/GitLab

Vous pouvez également ajouter des images pour le mode clair et sombre en 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 :

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 la légende</figcaption>
</figure>

Texte après

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

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 texte après l'image

Remarque : Nous ne prenons pas encore en charge la syntaxe spécifique à GitHub via #gh-dark-mode-only ou #gh-light-mode-only.

Redimensionnement

Pour redimensionner votre image, survolez-la et ouvrez le Menu Actions . Cliquez sur le bouton Taille pour modifier la taille de votre image parmi les options disponibles.

A GitBook screenshot showing how to resize an image

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 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 la largeur de l'image à celle de l'éditeur, et le redimensionnement sera basé sur cette limite.

Remarque : Lorsque vous redimensionnez des images dans une galerie d'images, les résultats peuvent différer du redimensionnement d'une image individuelle.

Vous pouvez faire en sorte que les blocs d’images s’étendent sur toute la largeur de votre fenêtre en cliquant sur le menu Options à côté du bloc et en choisissant Pleine largeur.

Redimensionnement des images via Git Sync

Si vous souhaitez un contrôle plus précis sur la taille de votre image, vous pouvez spécifier la taille exacte en utilisant Markdown sur GitHub ou GitLab.

Lorsque nous exportons une image, nous utilisons la balise HTML <img/>. Selon les spécifications, nous pouvons spécifier les dimensions de l’image en utilisant les 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 à la taille maximale (bien que cela soit limité par l’éditeur)

Alignement des images

Par défaut, les blocs d’images afficheront votre image à sa taille maximale, centrée.

Pour changer l’alignement d’une image, ouvrez le menu Options du bloc et choisissez l’alignement souhaité. Cela n’affectera que les images plus étroites que l’éditeur, ou les images que vous avez redimensionnées.

Représentation en 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 différente pour le mode 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 la légende</figcaption>
</figure>

Mis à jour il y a 1 mois

Ce contenu vous a-t-il été utile ?