circle-info
New: AI Insights are here.
See what your users are asking.arrow-up-right
search
PricingLog inSign up

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éterminer si elles doivent être alignées à 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.

circle-info

Conseil : À des fins d’accessibilité, nous vous recommandons de définir un texte alternatif pour vos images.

hashtag
Exemple de bloc d’image

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.
Exemple de bloc d’image avec une légende

hashtag
Téléverser une image

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

  1. Glissez-déposez l’image depuis votre système de gestion de fichiers directement dans un bloc vide de votre page.

  2. Ajoutez un bloc d’image à 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 une URL d’image ou d’ajouter une image depuis Unsplasharrow-up-right à l’aide de la recherche intégrée.

circle-exclamation

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

hashtag
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 The Options menu icon in GitBook et choisissez Ajouter des images… du bloc pour rouvrir le Sélectionner des images panneau latéral.

Pour supprimer une image d’une galerie, ouvrez le menu Modifier de l’image que vous souhaitez supprimer et appuyez sur la touche Suppr ⌫ .

hashtag
Ajouter des images pour le mode clair et le mode sombre

Vous pouvez définir des images différentes 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 et cliquez sur Remplacer l’image The Replace image icon in GitBook.

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.

circle-exclamation

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.

hashtag
Images en mode clair et en mode sombre via la synchronisation GitHub/GitLab

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 <picture> et <source> à l’intérieur :

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

circle-exclamation

Remarque : Nous ne prenons pas encore en charge la syntaxe réservée à GitHubarrow-up-right via #gh-dark-mode-only ou #gh-light-mode-only.

hashtag
Redimensionnement

Pour redimensionner votre image, survolez-la et ouvrez le menu Modifier . 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
Redimensionner une 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 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 sa largeur à celle de l’éditeur, et le redimensionnement se basera sur cette limite.

circle-info

Remarque : Lors du redimensionnement d’images dans une galerie d’images, le résultat peut différer du redimensionnement d’une image individuelle.

hashtag
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 largeur et hauteur , 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 à sa taille maximale (bien que celle-ci soit limitée par l’éditeur)

hashtag
Aligner les images

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

Pour modifier l’alignement d’une image, ouvrez le menu Options The Options menu icon in GitBook 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.

hashtag
Encadrer les 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 environnant.

A black and white photograph of a lone figure walking across a stark white landscape
Les images encadrées peuvent avoir des légendes et afficher une grille subtile derrière la légende.

Pour ajouter un cadre à une image, survolez-la, ouvrez le menu Options du bloc et activez le bouton Avec cadre .

circle-info

Bon à savoir : Vous ne pouvez encadrer que des images uniques dans un bloc. Les blocs d’image qui contiennent plusieurs images et les images en ligne ne peuvent pas avoir de cadre.

hashtag
Représentation en Markdown

Mis à jour

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