Images

Overview

Use images to illustrate concepts, show UI, and make your documentation easier to scan. Documentation.AI automatically optimizes images uploaded through the Web Editor and serves them from a CDN, so you get:

• Fast, cached delivery for all uploaded images.

• Responsive sizing with preserved aspect ratio.

• Built-in support for accessibility via required alt text.

You can add images in two ways:

• Web Editor: Insert and manage images visually.

• Code Editor / MDX: Use the <Image> component with explicit props.

Images can also be combined with other layout components such as <Card> (via its image prop) and <Columns> to build richer page layouts.

Using with Web Editor

Use the Web Editor to insert and manage images without writing code. For more on the editor itself, see Web Editor.

Insert an image

1. Place your cursor on a new line.

2. Type / to open the command menu.

3. Select Image.

4. In the picker that appears, either:

   • Click Upload image to choose a file from your computer, or

   • Select an already uploaded image from the list.

The selected image is inserted into the page and served from an optimized CDN.

Resize, align, and manage the image

Hover over an image to reveal controls:

• Top-left badge: Shows current image dimensions (width × height).

• Side drag handles: Drag horizontally from the left or right edge to resize the width; height adjusts automatically to preserve aspect ratio.

• Top-right toolbar:

  • Alignment icon: Align the image (for example, left, center, or right).

  • Zoom icon: Open the image in full size.

  • Trash icon: Remove the image from the page.

Edit image properties

1. Hover over the image and click the three-dot menu in the top-right corner.

2. In Image properties, you can update:

   • Image URL: The full CDN URL for the uploaded image.

   • Caption: Optional text displayed below the image.

   • Alt text: Required descriptive text for accessibility and SEO.

Using with Code Editor

When editing pages as MDX (for example in the Code Editor), use the <Image> component to add images directly in code.

Basic usage

<Image
  src="https://your-cdn.com/image.png"
  alt="Description of the image"
  width="800"
  height="600"
/>

Key props

Use these props to control how images render:

Alignment and sizing example

<Image
  src="https://your-cdn.com/image.png"
  alt="Center aligned image"
  width="400"
  height="300"
  style="width: 400px; height: auto; margin: 0 auto;"
/>

You can combine <Image> with layout components like <Columns> or include an image in a <Card> via its image prop to create more complex grids and feature blocks.

Advanced options

Performance and loading behavior

Use priority and fetchpriority to fine-tune how critical images load:

<Image
  src="https://your-cdn.com/hero-image.png"
  alt="Hero banner showing product features"
  width="1200"
  height="600"
  priority={true}
  fetchpriority="high"
/>

External URLs

You can reference external images directly in MDX:

<Image
  src="https://external-cdn.com/image.jpg"
  alt="External image description"
  width="600"
  height="400"
/>

Specifications

• URL format: Only absolute URLs are supported.

• Alt text: Required for all images (for accessibility and SEO).

• Supported formats: JPEG, JPG, PNG, GIF, WebP, SVG, ICO.

• CDN: Images uploaded via the Web Editor are automatically optimized and cached.