Images & Media

Enhance your documentation with rich visual content. Documentation.AI provides optimized image handling, video embedding, and support for various media types to make your content more engaging and informative.

Images

Basic image usage

Add images with automatic optimization and responsive sizing:

<Image
  uid="your-unique-id"
  src="https://blob-cdn.documentation.ai/org-9a676b51-6366-4fb8-82b9-8bcebd1e04cd/doc-d763805d-9c20-4ace-b537-11aa3933f9f9/1760013284686-qcst1aqods-Abstract-Painting-Light-Blue.webp"
  alt="ACME Company abstract design example"
  width="800"
  height="400"
/>

Image sizing and alignment

Control image dimensions and positioning:

Default sizing (responsive):

Fixed width with center alignment:

Small inline image:

This text wraps around the small image. You can use CSS styling to control how images interact with surrounding text content. This is useful for diagrams, icons, or small screenshots that supplement the main text.

<!-- Responsive (default) -->
<Image
  uid="acme-image-05"
  src="https://acme.com/image.png"
  alt="Descriptive alt text"
  width="600"
  height="300"
/>

<!-- Fixed width, centered -->
<Image
  uid="acme-image-06"
  src="https://acme.com/image.png"
  alt="Descriptive alt text"
  width="400"
  height="200"
  style="width: 400px; height: auto; margin: 0 auto;"
/>

<!-- Inline with text wrapping -->
<Image
  uid="acme-image-07"
  src="https://acme.com/image.png"
  alt="Descriptive alt text"
  width="200"
  height="100"
  style="width: 200px; height: auto; float: right; margin: 0 0 1rem 1rem;"
/>

Performance optimization

Use performance attributes for optimal loading:

<!-- For above-the-fold images -->
<Image
  uid="acme-image-09"
  src="https://acme.com/hero-image.png"
  alt="Main dashboard view"
  width="800"
  height="400"
  priority={true}
  fetchpriority="high"
/>

Image Types and Use Cases

Screenshots and UI examples

Perfect for showing actual interfaces and workflows:

Best practices for UI screenshots:

• Use consistent browser and device types
• Include relevant UI context (navigation, headers)
• Highlight important elements with annotations if needed
• Keep screenshots up-to-date with current interface

Diagrams and architecture

Use images to explain complex systems and workflows:

Common diagram types:

• System architecture diagrams
• Database schema illustrations
• User flow charts
• Network topology maps
• Process flowcharts

Code annotations

Enhance code examples with visual annotations:

// The code being annotated in the image above
function authenticateUser(credentials) {
  // 1. Validate input parameters
  if (!credentials.email || !credentials.password) {
    throw new Error('Email and password required');
  }
  
  // 2. Hash password for comparison
  const hashedPassword = hashPassword(credentials.password);
  
  // 3. Query database for user
  const user = database.findUser({ email: credentials.email });
  
  // 4. Compare passwords and return result
  return user && user.password === hashedPassword;
}

Videos and Embedded Media

Video embedding

Embed videos from popular platforms:

<!-- YouTube video -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="Getting Started with Our Platform"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

<!-- Vimeo video -->
<iframe 
  src="https://player.vimeo.com/video/VIDEO_ID" 
  width="640" 
  height="360" 
  frameborder="0" 
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen>
</iframe>

Interactive demos and prototypes

Embed interactive prototypes and demos:

<!-- Figma prototype -->
<iframe 
  style="border: 1px solid rgba(0, 0, 0, 0.1);" 
  width="800" 
  height="450" 
  src="https://www.figma.com/embed?embed_host=share&url=YOUR_FIGMA_URL" 
  allowfullscreen>
</iframe>

<!-- CodePen demo -->
<iframe 
  height="400" 
  style="width: 100%;" 
  scrolling="no" 
  title="Interactive Component Demo" 
  src="https://codepen.io/username/embed/PEN_ID?default-tab=result" 
  frameborder="no" 
  loading="lazy" 
  allowtransparency="true" 
  allowfullscreen="true">
</iframe>

Media Organization Patterns

Before and after comparisons

Show improvements and changes visually:

Before (Old UI)After (New UI)

Step-by-step visual guides

Combine images with instructions:

Step 1: Access the settings menu

Click on the settings icon (⚙️) in the top navigation bar.

Step 2: Navigate to integrations

Select the "Integrations" tab from the settings sidebar.

Step 3: Connect your service

Click "Connect" next to your desired service and follow the authentication flow.

Multiple views and perspectives

Show different aspects of the same feature:

Desktop View

Mobile View

Tablet View

Best Practices

Image optimization

File formats:

• PNG - Screenshots, diagrams, images with transparency
• JPEG - Photos, complex images with many colors
• SVG - Icons, simple diagrams, logos (scalable)
• WebP - Modern format with excellent compression (auto-converted by Documentation.AI)

Size guidelines:

• Screenshots: 1200-1600px wide for desktop, 375-414px for mobile
• Diagrams: 800-1200px wide depending on complexity
• Icons: 32px, 64px, or SVG for different use cases
• Hero images: 1920px wide or larger for full-width displays

Accessibility considerations

Alt text guidelines:

• ✅ Good: "Dashboard showing three active projects with completion percentages"
• ❌ Poor: "Dashboard" or "Screenshot"

Descriptive alt text examples:

<!-- Good alt text -->
<Image
  uid="acme-image-21"
  alt="API response showing user object with id, name, email, and createdAt fields"
  src="api-response-example.png"
/>

<!-- Poor alt text -->  
<Image
  uid="acme-image-22"
  alt="API response"
  src="api-response-example.png"
/>

Color and contrast:

• Ensure text in images has sufficient contrast
• Don't rely solely on color to convey information
• Test images with color blindness simulators

Performance guidelines

Loading optimization:

• Use appropriate image sizes for display context
• Enable lazy loading for images below the fold
• Compress images appropriately for web delivery
• Provide width/height attributes to prevent layout shift

CDN and hosting:

• Upload through Documentation.AI editor for automatic optimization
• Use absolute URLs for external images
• Consider image loading performance in page speed

Advanced Media Features

Image captions and context

Add captions to provide additional context:

Figure 1: API performance improvements after implementing caching and query optimization. Average response time decreased by 70% over 6 months.

Responsive image behavior

Images automatically adapt to different screen sizes:

<!-- This image will scale down on mobile devices -->
<Image
  uid="acme-image-24"
  src="wide-screenshot.png"
  alt="Full desktop interface"
  width="1200"
  height="800"
/>

<!-- Use CSS for more control -->
<Image
  uid="acme-image-25"
  src="wide-screenshot.png" 
  alt="Full desktop interface"
  width="1200"
  height="800"
  style="max-width: 100%; height: auto;"
/>

Image galleries and collections

Organize multiple related images:

What's next?

Continue exploring component features:

• Tables & Lists - Organize structured data alongside images
• Expandables & Tabs - Create interactive galleries and media collections
• Code Examples - Combine visual examples with code snippets
• Callouts & Alerts - Highlight important visual information