[go: up one dir, main page]

What the GIFvideo → gif, the way creatives need it
Guide for developers

A README GIF gets one second to prove the project works

GitHub plays your GIF on loop with no controls, so the demo has to land before a visitor scrolls. Here's how to cut a screen recording into a loop that loads on hotel wifi, keeps terminal text legible, and stays inside GitHub's file caps.

Drop a video, get a GIF free · frame-perfect · nothing leaves your browser Open the converter →

Make a demo GIF for a GitHub README

What the GIF does the whole thing locally, right in your browser: nothing here ever leaves your machine.

  1. Record the thing working. Capture your CLI or app with the recorder your OS ships (Cmd+Shift+5, Game Bar, or OBS) and keep the take short. An MP4 or MOV export is all the converter needs.
  2. Drag the file into the tool. Open What the GIF, head to the converter at /#tool, and drop the recording in. Conversion is client-side code, so the footage stays on your machine throughout.
  3. Cut to the four-second version. Trim so the clip opens on the frame the command runs and closes as the output settles. Frame-level cuts on the timeline keep the loop from opening mid-hunt.
  4. Crop and scale for the README column. Lock 16:9 or 1:1 around the window that matters, dump the menu bar, and export near 800 px wide. That matches how GitHub renders it and shrinks the file at the same time.
  5. Spend your color and frame budget. Set 10 to 15 fps, start at 64 colors and climb only if highlighting bands, and check the output estimate against a 2 to 8 MB target.
  6. Commit it and reference it. Put the GIF in docs/ or assets/ and link it with Markdown image syntax, or drag it into GitHub and paste the CDN URL. Add alt text either way.

The constraint: autoplay, no controls, impatient readers

A GIF in a README starts playing the moment the page renders and loops until the tab dies. Nobody can pause it, scrub it, or slow it down, because GitHub gives GIFs no player chrome at all. That's a gift and a trap. The gift: your demo runs without asking anyone to click. The trap: a visitor deciding whether to clone your repo gives the animation a second or two, so if the loop opens with you hunting for the right menu, that's the demo they judge.

GIF is also a spectacularly inefficient container. Every frame is stored more or less whole, the palette tops out at 256 colors, and there's no motion compression worth the name. Left unattended, a twenty-second capture of a full desktop lands in the tens of megabytes. The work is deciding what not to ship: fewer seconds, fewer pixels, fewer colors, chosen deliberately.

GitHub's actual numbers

Two caps matter. Upload through the web interface and GitHub rejects anything over 25 MB. Push through git and files past 100 MB draw warnings or refusals. Neither is a budget, though. The budget is what a stranger on a phone will tolerate, and that puts a good README GIF between 2 and 8 MB. Over that, mobile readers watch a gray box slowly resolve while your first impression evaporates.

Hosting is a fork in the road. Commit the file to the repo (a docs/ or assets/ folder is the convention) and reference it by relative path; it stays versioned and shows up in offline clones. Or drag it into an issue or the README editor, let GitHub park it on the user-content CDN, and paste the URL it hands back; your repo stays lean. Both routes work. Both reward a file that was small before it ever left your machine.

Capture the demo, convert it locally

Grab the footage with whatever recorder you already trust: Cmd+Shift+5 on macOS, the Game Bar on Windows, OBS on Linux. Save an MP4 or MOV and drag it into the converter. From there every step runs as client-side code on your own hardware. No upload progress bar, no queue, and no copy of your staging environment or half-built feature resting on someone else's server. Longer captures from meetings or full work sessions follow the same path; the screen recording guide walks that case.

Settings that keep terminal text readable

Small file and legible text pull in opposite directions. These are the levers, roughly in order of payoff:

A running estimate of the output size sits alongside the controls and updates with every change, so getting under 8 MB is a decision, not a surprise. If the target is smaller still, the small-file recipe pushes the same levers harder.

The Markdown, and where the GIF goes

Embedding is one line, the same syntax as any image:

Place it directly under the title and one-line description so it sits above the fold, and write real alt text inside the brackets, both for screen readers and for the day the image fails to load. After that, the file is portable: the same loop can front a product demo on a landing page or a changelog entry without another export.

Ship the README that demos itself

Drag the recording in, cut it to the moment the tool earns its stars, and export a GIF that clears GitHub's caps with room to spare. Converted on your machine, start to finish.

Open the converter

Questions, answered

Where do GitHub's 25 MB and 100 MB limits actually apply?
The 25 MB cap covers files added through the web uploader; git pushes tolerate files up to 100 MB before warnings and refusals start. Neither should shape a README GIF, since anything past roughly 8 MB already loads badly on phones and slow connections, right where new visitors form their opinions.
Readers can't pause a README GIF. How should that change the edit?
Cut it so any random moment makes sense, because that's when someone will look at it. Open on action rather than setup, hold the finished state for a beat so the loop has a readable ending, and keep the whole thing short enough that a viewer catches a full cycle in the time they'd give a screenshot.
How do I keep terminal output legible after conversion?
Crop close to the pane so the text is large relative to the frame, export near the width GitHub will render instead of shrinking a 1440p capture, and give a dark theme 64 to 128 colors. Skip heavy dithering on flat backgrounds, since the speckle it adds reads as noise behind monospace glyphs.
Repo or CDN: where should the file itself live?
Committing it keeps the demo versioned alongside the code and visible in offline clones. Dragging it into an issue or the README editor hands hosting to GitHub's user-content CDN and keeps the repo slim. Pick based on whether the GIF should travel with the history; the Markdown is nearly identical either way.
Does converting the recording send it anywhere?
No. The page does the decoding and encoding itself, in the browser, and there's no server on the other end handling your file. A capture of internal tooling or an unshipped feature stays with you, which is the whole reason to convert this way rather than through an upload-first site.
What frame rate suits a CLI demo?
Ten fps covers most terminal work: text appears, output scrolls, done. Go to 15 when a cursor glides or a UI animates, and stop there. Frame count multiplies file size directly, and nothing in a README needs 30 fps smoothness.