| description |
|---|
Learn how to add images to the documentation. |
Images should be stored in an images directory next to the .md file referencing them, using relative paths. Use descriptive alt text and captions to ensure accessibility and Search Engine Optimization (SEO) benefits. Optimize images for the web to improve page load times.
- Maximum image width: 800px.
- Supported formats:
png,jpg,gif(use the most efficient compression available). - Prohibited formats:
bmp,tiff,swf(Flash)
If images are used, these must be stored in an images directory next to the .md file referencing them using relative paths.
Maintain a clear and consistent directory structure:
/topic # Main documentation directory
│── README.md # Main content file
│── another-page.md # Another markdown file
│── /images # Image storage
│ ├── image1.png
│ ├── image2.jpg
│
└── /subtopic # Subdirectory for related content
│── README.md
│── topic.md
│── another-topic.md
│── /images # Subdirectory for subtopic images
├── image3.png
Use the following markdown syntax to insert images:
Images added through the GitBook platform are automatically inserted using HTML syntax, as shown in the example below:
<figure><img src="../images/sample.png" alt="The New Backoffice"></figure>However, when contributing to the documentation via GitHub, it is recommended to use Markdown for images instead:
{% hint style="info" %} Always provide alt text or a caption to describe the image’s purpose and content. {% endhint %}
- Use clear and relevant filenames. For example:
dashboard-view.pnginstead ofimage1.png. - Avoid excessive text in images. If text is necessary, provide a description above or below the image in the documentation.
- Use SVG format for diagrams and icons where possible to ensure scalability.