Zum Hauptinhalt springen

Images and media

Three ways to put an image on a page.

1. Drag into the editor

Drag any image (PNG, JPG, SVG, WebP, GIF) directly into the editor's chat or onto a markdown page. Docsio uploads it, places it in your project's static/img/ folder, and inserts the markdown for you.

2. Reference a URL

If your image is already hosted somewhere — your CDN, GitHub raw URL, an S3 bucket — just reference it in markdown:

![Architecture diagram](https://cdn.acme.com/diagrams/architecture.png)

External images render fine, but won't be cached on your domain or covered by your CDN.

3. Upload via the AI agent

"Use the logo from https://acme.com/logo.svg as the brand mark."

The agent downloads it, places it in the right folder, and updates references.

Image markdown

Standard markdown:

![Alt text](/img/screenshot.png)

For more control (alignment, sizing) use HTML inline:

<img src="/img/screenshot.png" alt="Alt text" width="600" />

Auto-optimization

Every image you upload to your project is:

  • Served from the same CDN as your docs (fast everywhere)
  • Lazily loaded (off-screen images don't slow page load)
  • Wrapped with rounded corners and a subtle border by default — matches the docs theme

Videos

Embed video by linking to YouTube, Vimeo, Loom, or any oEmbed-supported provider:

[Watch the demo](https://youtu.be/dQw4w9WgXcQ)

For inline embedded videos, use the iframe approach:

<iframe
  width="100%"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Demo video"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen>
</iframe>

Animated GIFs and screen captures

GIFs work but get large. For short product demos, a Loom or YouTube link is usually better — smaller page weight, mobile-friendly.

Logo and favicon

Special case: your logo and favicon don't go in static/img/ — they're set on the project itself in Branding settings.

Tips

  • Keep originals high-res. Docsio downsizes for delivery, but having the original lets you re-export later if needed.
  • Use SVG for logos and diagrams. Crisp at any size, tiny file size.
  • Alt text matters. Both for accessibility and for the AI chat widget — visitors searching by phrase will find images via their alt text.