Images

Use image blocks to embed a picture, screenshot, diagram or icon. The image expands to fill the width of the content area and can be zoomed in with a click.

Basic syntax

![Alternative text](assets/foto.png)
![Alternative text](https://placehold.net/main.svg)

You can add optional CSS classes after the source, separated by a space.

Example

Here you can see more details about the supported image sources (local files vs remote URLs).

Images fill the width of the content and can be zoomed with a click.

Supported formats

Any image format that the browser can render is supported, including:

• .png -- lossless, ideal for screenshots and diagrams that need transparency.
• .jpg / .jpeg -- lossy, ideal for photos.
• .gif -- still images and simple animations.
• .webp -- modern format with both lossless and lossy modes, smaller than PNG/JPG.
• .svg -- vector format that scales to any size without quality loss.
• .avif -- modern format with excellent compression.

For best results across browsers, prefer .webp or .png for diagrams and .webp or .jpg for photos.

Alternative text

The text inside the square brackets is the alternative text (alt). It is shown when the image cannot be loaded and is read aloud by screen readers. It is the single most important thing for the accessibility of your documentation.

Note:

Write the alt text as if you were describing the image to a colleague over the phone. Be specific: "Bar chart of monthly active users, January through June" is better than "chart".

Note:

If the image is purely decorative and adds no information, you can use an empty alt (![]()). This tells assistive technology to skip the image.

Zooming

Every image rendered by MMX can be zoomed in with a click on desktop and tapped on touch devices. The zoom view also supports keyboard navigation (arrow keys to pan, Esc to close).