Why a looping GIF is the right call inside Notion
Notion embeds a GIF as an image block, and image blocks loop on their own with no play button, no controls, and no thumbnail to click. That's the whole trick. A teammate scrolling your onboarding doc sees the actual motion of "click here, then this panel slides open" without leaving the page or hunting for a video. A real video block makes them press play, then watch a static poster frame until they do. For a three-second UI moment, that's friction you don't need.
GIFs earn their keep in exactly the spots Notion is built for: a setup wiki where a step is easier shown than written, a product walkthrough where the cursor needs to move, a release note that demos the new toggle in two seconds. The catch is that a GIF is a stack of full frames, so a careless one balloons to 20 MB and makes the page crawl on every load. The job is a small, clean loop, and that's a converter problem, not a Notion problem.
You start with a recording you already have: a screen recording from QuickTime, the Windows Snipping Tool, or whatever you grabbed the moment with. What the GIF takes that video file and turns it into the GIF. It does not record your screen for you, so capture the clip first, then bring the file over.
Keep the file small so the page stays fast
Notion doesn't impose a tight per-image cap, but every reader downloads that GIF on every page view, and a heavy one drags the whole doc. A wiki page that takes a beat too long to paint is a wiki page people stop opening. Treat 1 to 3 MB as your comfortable target for a UI loop, and let the live size estimate keep you honest as you tune.
Two settings carry most of the weight:
- Frame rate: 10 to 15 fps. Screen recordings of cursors, menus, and panels read perfectly at 12 fps. UI motion is mostly slow and deliberate, so you rarely need more, and dropping from 30 to 12 fps cuts the frame count by more than half before you touch anything else.
- Colors: 64 to 128. A GIF maxes out at 256 colors, but flat interface chrome (solid fills, text, a few accent buttons) survives a cut to 64 or 128 with no visible change. Reducing the palette is where a screen recording gets genuinely light. Bump it back up only if you see banding in a gradient or a photo.
- Scale down. Notion renders most images a few hundred pixels wide in the column. A GIF exported at 720 or 800 pixels wide looks crisp and weighs a fraction of a full-resolution capture. Downscale on the way out.
Trimming is the other lever, and it's free. Every frame you cut is bytes you never ship. If you only need the three seconds where the modal opens, don't ship the eight seconds around it. If your doc is heading somewhere that demands sharper output than a wiki, the high-quality conversion walkthrough covers pushing fps and colors back up without the file getting absurd.
Crop to the part of the screen that matters
A raw screen recording is mostly empty desktop. Inside a Notion column, that means your three pixels of actual button get shrunk into oblivion while the chrome around it eats the space. Crop tight to the action before you export.
The crop locks to exact ratios, so pick the one that fits the block:
- 4:3 or 16:9 for a standard slab of interface, a settings panel, a form, a dashboard. These sit naturally in a full-width Notion block.
- 1:1 (square) when you're showing one tight interaction, like a single toggle flipping or a dropdown opening. It reads cleanly in a narrower column.
- 9:16 (vertical) for a mobile-app walkthrough or a tall sidebar flow, where the phone frame or the menu runs top to bottom.
Because the ratio is locked, the output never comes out squashed or stretched. Position the crop box over the cursor's path and the element you're demoing, and let the rest of the desktop fall away.
The real reason: your footage never leaves the tab
Here's the part that matters more than people admit. Product walkthroughs and internal wikis are built from recordings of unreleased features, admin panels, and customer data sitting in test accounts. That footage is exactly what you don't want passing through some free conversion site you found on page one, where it gets uploaded, processed on a server, and quietly retained for who knows how long.
What the GIF runs the entire conversion inside your browser tab. The video is decoded and re-encoded client-side, so nothing uploads, there's no account to make, and there's no watermark stamped across your interface. Once the page has loaded it even works offline, which tells you plainly that no server is involved. You can clip an unannounced feature out of a staging build, turn it into a GIF, and paste it into the team wiki without that frame ever touching a third party. If privacy is the headline reason you're here, the no-upload converter page makes the same case in more detail, and it's the same tool either way.
Dropping the GIF into your Notion page
Once the GIF is exported, Notion gives you a few ways in, and they all loop the same:
- Drag and drop. Pull the .gif straight from your Finder or Explorer window onto the page. It lands as an image block and starts looping immediately.
- Paste it. Copy the file and paste it where your cursor sits. Same result, one fewer step.
- Type /image. Use the slash command, choose Upload, and pick your GIF. Handy when you want it placed precisely between two existing blocks.
After it's in, drag the block's side handle to size it down to a sensible width, full-bleed is rarely what a walkthrough wants. You can drop a caption under it with the standard caption control to label the step. The same GIF works in a callout block, a toggle (great for "expand to see the demo"), or a column next to its written instructions. If this doc is part of a polished onboarding flow, the product demo GIF guide goes deeper on pacing and framing a walkthrough so it reads in one loop.