Images & Media in Web Editor

Add images, videos, and other media to your documentation using the Documentation.AI web editor. All uploaded media is automatically optimized and served from a CDN for fast loading.

Adding Images

Upload with Slash Command

Use the /image command to access your media library and upload new images:

1. In the web editor, type /image where you want to add an image
2. Select Image from the component menu
3. Choose from options:
   • Browse uploaded images: Select from your existing media library
   • Upload new image: Click the upload button to add new files
   • Paste image URL: Enter an external image URL

Copy and Paste Images

Directly paste images from your clipboard:

1. Copy an image from any source (screenshot, image file, web browser)
2. Place your cursor where you want the image
3. Paste using Ctrl+V (Windows/Linux) or Cmd+V (Mac)
4. The image will automatically upload and insert

Image Configuration

After adding an image, configure its properties in the component panel:

• Alt text (required): Add descriptive text for accessibility
• Dimensions: Set width and height for layout optimization
• Alignment: Use CSS styles for positioning
• Priority loading: Enable only for above-the-fold images

For complete Image component options, see the Image component reference.

Adding Videos and Media

Video Uploads

Add videos using the /video command or component menu:

1. Type /video in the editor
2. Select the Video component
3. Choose your video source:
   • Platform embed: YouTube, Vimeo, Loom URLs
   • Direct video file: Upload MP4, WebM, or other video files
   • External video URL: Link to hosted video files

Platform Video Embeds

For YouTube, Vimeo, and Loom videos, use embed URLs (not watch URLs):

<Video 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="Descriptive video title"
  width="560" 
  height="315"
/>

Configure video dimensions and accessibility title in the component panel. For complete Video component options, see the Video component reference.

Iframe Embeds

Embed forms, tools, or other external content:

1. Type /iframe to add an iframe
2. Enter the URL of the content to embed
3. Set dimensions and accessibility title
4. Configure security settings if needed

Use iframes for Google Forms, interactive demos, or other web tools. For complete Iframe component options, see the Video and Iframe reference.

Supported File Types

Images

• JPEG/JPG: Standard photo format
• PNG: Graphics with transparency
• GIF: Animated images
• WebP: Modern, efficient format
• SVG: Scalable vector graphics
• ICO: Icon files

Videos

• MP4: Most compatible video format
• WebM: Modern web video format
• OGV: Open-source video format

File Size Limits and Optimization

Upload Limits

• Maximum file size: 20 MB per file
• Recommended image size: 100-200 KB for optimal performance
• CDN optimization: Automatic resizing and format conversion

Performance Best Practices

1. Compress images before uploading when possible
2. Use appropriate formats: JPEG for photos, PNG for graphics with transparency
3. Set dimensions to prevent layout shift during loading
4. Enable priority loading only for above-the-fold images
5. Add descriptive alt text for all images

Image Optimization Tips

• Keep file sizes under 200 KB when possible
• Use WebP format for better compression
• Set explicit width and height to improve Core Web Vitals
• Documentation.AI automatically optimizes uploaded images

Media Management

Current Limitations

Viewing Uploaded Media

Access your media library:

1. Type /image or /video in any document
2. Browse through previously uploaded files
3. Select and reuse existing media across different pages
4. View file details and usage information

Organizing Media

• Use descriptive filenames when uploading
• Add comprehensive alt text for searchability
• Group related media by uploading them during related content creation
• Reuse media across multiple pages to maintain consistency

Troubleshooting

Common Issues

Getting Help

If you encounter issues with media uploads or display:

1. Check the Troubleshooting guide for web editor issues
2. Review Error Codes for specific error messages
3. Contact Support for technical assistance

Next Steps

Continue building your documentation:

• Organize Content: Structure your documentation effectively
• Web Editor Overview: Learn more web editor features
• Publishing Process: Deploy your documentation changes