A screen recording is the clearest way to show a bug, a feature, or a how-to — but a raw video file is awkward to share. A GIF autoplays inline and loops forever, so it lands perfectly in a README, a GitHub issue, a Jira ticket, or a Slack thread.
Drop in a recording from QuickTime, OBS, ShareX, the Windows Game Bar, or a Loom/Xbox export (MP4, MOV, or WebM all work), trim it to the part that matters, and export a tidy GIF — entirely in your browser, with nothing uploaded.
Why GIFs beat video for demos
GIFs render inline in Markdown, GitHub, GitLab, Slack, and most chat tools — no play button, no embed, no second click. The reader sees the behaviour the instant they scroll to it.
They also loop automatically, which is exactly what you want for a short repro or a UI interaction: the viewer can watch it again without touching anything.
Trim the dead air first
Screen recordings are mostly setup — finding the window, moving the cursor, getting ready. The single biggest improvement to a demo GIF is cutting straight to the action with the timeline handles.
A focused 3–8 second clip is both clearer and dramatically smaller than the full recording. If a few moments need emphasis, drop the playback speed to 0.5× so they read clearly.
How to turn a screen recording into a GIF
- 1
Drop in your recording
MP4, MOV, or WebM from any recorder works. It loads locally — nothing is uploaded.
- 2
Trim to the action
Cut out the setup and dead air so the GIF gets straight to the point.
- 3
Keep the width, lower the FPS
Use Original or 720px so text stays legible, and 10–15 FPS to keep the file small.
- 4
Caption and download
Optionally drop a caption to label a step, then export your GIF.
Recommended settings for screen GIFs
Legibility first: keep width high, spend less on frame rate.
| For | Width | FPS | Why |
|---|---|---|---|
| README / docs demo | Original or 720px | 15 | Crisp text, smooth enough |
| Bug repro in a ticket | 640px | 10 | Small, fast to attach |
| Cursor-heavy interaction | 720px | 20 | Extra FPS for smooth motion |
Tips for sharper screen GIFs
- Crop to just the relevant window or region — it sharpens the result and shrinks the file.
- Keep GitHub attachments under its per-file limit (currently 10 MB) by trimming and downscaling.
- Use a caption to label steps ("click here", "before", "after") without re-recording.
Screen recording to GIF — FAQ
Which screen recorders does it work with?
Any that export MP4, MOV, or WebM — QuickTime, OBS, ShareX, Windows Game Bar, Loom exports, and more. The file is read locally in your browser.
Why is the text in my screen GIF blurry?
GIF's 256-colour limit softens fine text. Keep the width high (Original or 720px), crop to the relevant area, and slide Quality toward Sharper.
How do I keep the GIF small enough for GitHub?
Trim to the essential few seconds and lower the frame rate to 10–15 FPS. Most repros fit comfortably under GitHub’s per-file limit that way.
Does my recording get uploaded anywhere?
No. Conversion runs entirely in your browser, so your screen recording never leaves your device.