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.
Exemple d’un bloc d’image
Téléversement d’une image
Il existe deux façons d’ajouter des images à votre contenu :
Faites glisser 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 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 à l’aide de la recherche intégrée.
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 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 de l’image que vous souhaitez supprimer et appuyez sur la touche Suppr. ⌫ key.
Ajout d’images pour les modes clair et sombre
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 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.
Images en mode clair et sombre via GitHub/GitLab Sync
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 :
Pour les images en ligne (images intégrées dans le texte), utilisez <picture> avec un <source> à l’intérieur :
Redimensionnement
Pour redimensionner votre image, survolez-la et ouvrez le menu Édition . Cliquez sur le bouton Taille pour modifier la taille de votre image parmi les options disponibles.

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.
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 et choisissez l’alignement souhaité. Cela n’affectera que les images plus étroites que l’éditeur, ou les images que vous avez redimensionnées.
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.

Pour ajouter un cadre à une image, survolez-la, ouvrez le menu Options et activez le bouton Avec cadre .
Représentation en Markdown
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.
Mis à jour
Ce contenu vous a-t-il été utile ?