Record Your Screen and Turn It Into a Small GIF for a GitHub README (No Install)

Description and use

Step‑by‑step guide to produce a small, high‑quality GIF for a GitHub README without installing software, ensuring fast load and good visual appeal.

Problem

Creating a crisp, small GIF for a GitHub README without installing software, avoiding watermarks, large file sizes, and poor color quality.

Outcome

A short, high‑quality GIF that loads quickly and displays well on mobile, enhancing the README’s visual appeal.

Workflow

• Prepare the window: resize to ~1000×600, increase font size, hide bookmarks and notifications, use a clean demo account, plan a 3–8 second action.
• Record with Nibbo’s browser‑based screen recorder (getDisplayMedia + MediaRecorder), leaving mic, audio, webcam off.
• Trim start/end in the recording if needed; on macOS use Cmd+Shift+5, on Windows Win+Alt+R.
• Convert to GIF with Nibbo’s Video to GIF tool: set start/end, width 720–900 px, FPS 10–15, colors 128–256, dither off for flat UI, loop forever.
• Aim for <5 MB; GitHub accepts larger but large GIFs load slowly.
• Add the GIF to the README: drag into editor or commit under docs/, include meaningful alt text.
• Optionally use MP4 for longer demos: smaller size but no autoplay loop.

Evidence

The usual problems: the recording tool adds a watermark, the GIF ends up 40 MB, or the colors look like a 1998 website.

Source

The screen recorder in Nibbo uses the browser's getDisplayMedia and MediaRecorder APIs, so you can capture a single window or tab without installing anything.

Source

Aim for under 5 MB. GitHub accepts larger files, but big GIFs load slowly and some mobile clients won't autoplay them.

Source

GitHub renders uploaded .mp4/.mov files as inline video players in READMEs and issues (drag-and-drop the file into the editor).

Source