Components

Images

Reference for adding images using the Image component and markdown syntax.

Overview

Add images with automatic optimization, accessibility features, and responsive behavior. Images uploaded via the editor are served from an optimized CDN.

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

Abstract geometric pattern with colorful shapes

The alt attribute is mandatory for SEO and accessibility. Provide descriptive text that explains the image content.

Attributes

srcstring

Required

Image URL (absolute URLs only). Use CDN URLs for optimized delivery.

altstring

Required

Descriptive text for accessibility and SEO. Explains image content to screen readers.

widthstring

Image width in pixels. Used for layout optimization and preventing layout shift.

heightstring

Image height in pixels. Used for layout optimization and preventing layout shift.

stylestring

CSS styles for alignment, sizing, and positioning. Use for responsive behavior.

priorityboolean

Load immediately instead of lazy loading. Use for above-the-fold images (default: false).

fetchprioritystring

Browser loading priority: high, low, auto. Use high for critical images.

Alignment and sizing

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

<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 attributes for above-the-fold images that affect loading performance:

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

Use performance attributes only for above-the-fold images. Overusing priority can hurt overall page performance.

Adding images

Editor upload

Use the Documentation.AI editor for automatic CDN optimization:

Type /image command in the editor
Click the "+" icon and select image element
Copy and paste images directly into the editor
Browse and select from uploaded images

Editor-uploaded images are automatically optimized and served from our CDN for better performance.

External URLs

Use absolute URLs for external images. Note that external images may not be optimized.

<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

External CDN images may not be optimized for performance. Use the editor upload for best results.