Skip to main content

Screenshots & Videos

Purpose

Centralize guidance and conventions for adding high-quality screenshots and videos to documentation.

Conventions​

Asset TypeLocationFormatNaming Pattern
Screenshot/static/imagespng / webpmodule-context-action.png
Video/static/videosmp4 (H.264 + AAC)module-scenario.mp4
SVG Icon/static/imagessvgicon-name.svg

Quality Guidelines​

  • Hide personal data in screenshots (blur or use placeholder accounts).
  • Prefer 1280px width captures; Docusaurus scales responsively.
  • Use WebP for large illustrative images to reduce size.
  • Keep videos < 25MB; trim dead time; add poster image.

Embedding Examples​

Image​

![Guests List](/images/placeholder-guests-list.png)

Video With Poster​

<video controls width="720" poster="/images/placeholder-badges-list.png">
  <source src="/videos/badges-user-story.mp4" type="video/mp4" />
  <p>Your browser cannot play this video. <a href="/videos/badges-user-story.mp4">Download</a>.</p>
</video>

Side-by-Side Images​

| Form List | Form Builder |
|-----------|--------------|
| ![Forms List](/images/placeholder-forms-list.png) | ![Form Builder Empty](/images/placeholder-form-builder-empty.png) |

Posters​

Add a representative still frame as a poster for each video under /images.

Accessibility​

  • Provide alt text describing purpose, not visual minutiae.
  • Complex diagrams: follow with a textual summary.
  • Videos: optional caption track (VTT) recommended for narration.

Optimization Script (Optional)​

Use a local script to convert PNG/JPG to WebP (quality 80):

for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Checklist Before Commit​

  • Filenames lowercase, hyphen separated.
  • No spaces or personal data.
  • Formats correct (.mp4 for videos, .webp for optimized large images).
  • Alt text present.

Last updated: 2025-11-24