> For the complete documentation index, see [llms.txt](https://smedai.aivd.ch/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smedai.aivd.ch/applications/gitbook/creer/blocs/images.md). # Images {% hint style="info" %} Cette page vise des **contributeurs invités**. Vous pouvez éditer le contenu d’un ou plusieurs espaces. Vous n’avez généralement pas accès aux réglages d’**organisation**, de **site publié** ou de **mise en ligne**. Pour ces sujets, contactez les responsables de l’espace ou l’équipe SIC. {% endhint %} Vous pouvez insérer des images dans votre page, puis choisir leur taille et les aligner à gauche, au centre ou à droite. Vous pouvez également, facultativement, inclure un texte alternatif et/ou une légende sur votre bloc d'image. {% hint style="info" %} **Conseil :** Pour des raisons d'accessibilité, nous recommandons de définir un texte alternatif pour vos images. {% endhint %} #### 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.](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1446776709462-d6b525c57bd3%3Fcrop%3Dentropy%26cs%3Dsrgb%26fm%3Djpg%26ixid%3DM3wxOTcwMjR8MHwxfHNlYXJjaHwyfHxzcGFjZXxlbnwwfHx8fDE3MzMxOTY5NTR8MA%26ixlib%3Drb-4.0.3%26q%3D85\&width=768\&dpr=3\&quality=100\&sign=5ab0271\&sv=2) Exemple de bloc d'image avec une légende #### Téléchargement d'une image Il existe deux façons d'ajouter des images à votre contenu : {% stepper %} {% step %} ### Glisser-déposer depuis votre système de fichiers Faites glisser l'image depuis votre système de gestion de fichiers directement dans un bloc vide de votre page. {% endstep %} {% step %} ### Utiliser le panneau Sélectionner des images Ajouter 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 ce processus, vous pouvez choisir de télécharger un fichier, sélectionner un fichier précédemment téléchargé, coller une URL d'image ou ajouter une image depuis [Unsplash](https://unsplash.com/) via la recherche intégrée. {% endstep %} {% endstepper %} {% hint style="warning" %} GitBook vous permet de télécharger 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** ![The Options menu icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FaS1QvPIBVYwhpFTGcPBN%252Foptions-menu.svg%3Falt%3Dmedia%26token%3D3ee40bbf-f4fb-41fa-aa30-306b559cbe88\&width=300\&dpr=3\&quality=100\&sign=54060725\&sv=2) et choisissez **Ajouter des images…** pour ouvrir le **Sélectionner des images** panneau latéral à nouveau. Pour supprimer une image d'une galerie, ouvrez le **menu Modifier** ![](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FA3OfGjPkE5GnOQvN36jN%252Fedit.svg%3Falt%3Dmedia%26token%3D6f70239f-d889-4e64-9ec6-4801df47a48d\&width=300\&dpr=3\&quality=100\&sign=43e7e66a\&sv=2) sur l'image que vous souhaitez supprimer et appuyez sur la **Supprimer ⌫** touche. #### Ajout d'images pour le mode clair et sombre Vous pouvez définir des images différentes pour les versions en mode clair et sombre de votre site publié. GitBook affichera automatiquement l'image correcte en fonction du mode de votre visiteur. Pour ajouter une image pour le mode sombre, survolez votre image, ouvrez le **menu Modifier** ![](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FA3OfGjPkE5GnOQvN36jN%252Fedit.svg%3Falt%3Dmedia%26token%3D6f70239f-d889-4e64-9ec6-4801df47a48d\&width=300\&dpr=3\&quality=100\&sign=43e7e66a\&sv=2) et cliquez sur **Remplacer l'image** ![The Replace image icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252F0mPo1tPDFeEbPOr1gc4V%252Freplace%2520image.svg%3Falt%3Dmedia%26token%3D9f037f9a-0f37-4c5b-9b30-6b55ffb11f5b\&width=300\&dpr=3\&quality=100\&sign=9ac50745\&sv=2). Dans le menu déroulant, choisissez **Ajouter une image pour le mode sombre**. Une fois que vous avez défini cela, 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 en mode clair et sombre pour certains cas, notamment les couvertures de page ou les couvertures d'image sur [cartes](/applications/gitbook/creer/blocs/cartes.md). {% endhint %} {% hint style="info" %} La gestion du thème et de la publication du site est faite par les owners. Ici, on documente uniquement la rédaction et les assets. {% endhint %} #### Images pour mode clair et sombre via la synchronisation GitHub/GitLab (optionnel) Si vous utilisez Git Sync, vous pouvez aussi gérer clair/sombre via HTML, avec `` et `(prefers-color-scheme: dark)`.
Exemples HTML **Image en bloc** ```html Texte avant
Logo GitHub
Texte de la légende
Texte après ``` **Image en ligne** ```html Texte avant l'image Le logo GitHub Texte après l'image ```
{% hint style="warning" %} **Remarque :** Nous ne prenons pas encore en charge [la syntaxe réservée à GitHubarrow-up-right](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** . Cliquez sur le **Taille** bouton pour changer 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 * Moyenne – 50 % de la taille de l'image * Grande – 75 % de la taille de l'image * Adapter – Supprime toutes les spécifications de taille et affiche soit à pleine taille soit limité à une largeur maximale de **735 pixels** pour les images plus larges. 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. {% hint style="info" %} **Remarque :** Lors du redimensionnement d'images dans une galerie d'images, les résultats peuvent différer du redimensionnement d'une image individuelle. {% endhint %} {% hint style="info" %} Vous pouvez rendre les blocs d'image [pleine largeur](/applications/gitbook/creer/blocs.md#blocs-pleine-largeur) en cliquant sur le **menu Options** à côté du bloc, puis **Pleine largeur**. {% endhint %} #### Redimensionnement des images via la synchronisation Git Si vous souhaitez plus de contrôle 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 . Conformément aux 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 : `` Définit l'image à 100 pixels de large\ `` Définit l'image à taille réelle (bien que cela soit limité par l'éditeur) #### Aligner les images Par défaut, les blocs d'image afficheront votre image à pleine taille, alignée au centre. Pour changer l'alignement d'une image, ouvrez le **menu Options** du bloc et choisissez l'alignement que vous souhaitez. 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 cohérent et les séparer visuellement de leur 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 affichent 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 **Avec cadre** commutateur. {% 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 cadres. {% 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
Le logo GitBook
//Bloc avec légende et texte alternatif
Le logo GitBook

Logo GitBook

// Bloc avec image encadrée
Le logo GitBook
//Bloc avec image différente pour le mode sombre et le mode clair, avec légende
Logo GitHub
Texte de la légende
``` --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://smedai.aivd.ch/applications/gitbook/creer/blocs/images.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.