Images

Overview

Add images with automatic optimization, accessibility features, and responsive behavior.
You can work with images in two ways:

• Editor UI: Upload, resize, align, and annotate images visually.

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

Images uploaded via the editor are stored and served from an optimized CDN.

Add images from the editor UI (recommended)

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 below.

The selected image is inserted into the page and automatically optimized.

Resize, align, and manage the image

Hover over the image to reveal controls:

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

• Side drag handles: Handles on the left and right edges let you resize the image.

  • Drag horizontally to adjust width.

  • Height adjusts automatically to keep the original aspect ratio.

• Top-right toolbar:

  • Alignment icon: Change image alignment (for example, left, center, or right).

  • Zoom icon: View the image in full size.

  • Trash icon: Delete the image from the page.

Edit image properties (URL, caption, alt text)

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

2. In Image Properties you can configure:

   • 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.

Use the Image component in MDX

Use the <Image> component to add images directly in MDX:

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

Attributes

Alignment and sizing in MDX

Control image dimensions and positioning with width, height, and style:

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

Performance optimization

Use priority and fetchpriority for above-the-fold images that impact perceived loading speed:

<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 also reference external images directly in MDX. These won’t be automatically optimized by the editor’s CDN.

<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 (SEO and accessibility)

• Formats: JPEG, JPG, PNG, GIF, WebP, SVG, ICO

• CDN: Editor-uploaded images are automatically optimized