Make a Product Demo GIF for Docs or GitHub — No Upload
A short GIF is often the fastest way to show a UI bug, feature, or workflow in docs. This guide keeps the GIF readable without letting the file size explode.
Step-by-step
Record only the action
Capture the shortest screen recording that shows the problem or feature. Avoid full-window idle time because every extra second becomes many GIF frames.
Trim to 2-8 seconds
Use the Video Trimmer first. Start one beat before the click and end once the UI state is clear.
Export at 480 px and 10-12 FPS
In Video to GIF, set width to 480 px and FPS to 10 or 12. This keeps text legible while staying friendly for GitHub and docs pages.
Recommended settings
| Recommended duration | 2-8 seconds |
|---|---|
| Recommended width | 480 px for UI text, 360 px for small embeds |
| Recommended FPS | 10-12 FPS |
| Best content | UI actions, short bug repros, simple product demos |
Quality check before publishing
- Play the first and last three seconds to catch bad trims, black frames, missing audio, or a visible jump at the end.
- Confirm the exported file matches the important settings above, especially duration, aspect ratio, resolution, codec, and file size.
- Preview once on the target platform or device before deleting the original source file.
- If the clip will be reposted publicly, strip metadata first and verify no private names, GPS data, or device fingerprints remain.
Tools you may also need
FAQ
Why not use 30 FPS for a product GIF?
UI demos rarely need it. 30 FPS can triple file size while making text harder to load in docs and GitHub issues.
When should I use MP4 instead?
If the clip is longer than 8-10 seconds, has full-screen motion, or needs audio, MP4/WebM is a better format than GIF.
Does this run in my browser?
Yes — every step in this guide uses an in-browser FFmpeg WebAssembly tool. Your video never uploads to a server and never leaves your device.