GIF in Notion: Loops in an Image Block, No Page Lag

A GIF in Notion shows the click your doc keeps describing

Drop a GIF into Notion and it lands as an image block, looping with no play button to press. That makes it the right tool for the two-second UI moment, as long as the file doesn't drag the page. Here's the whole workflow, with the conversion done on your own machine.

By the What the GIF team · Published July 10, 2026 · Updated July 23, 2026

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

Put a looping GIF in a Notion doc

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

Capture the interaction. Record the click or flow with the screen recorder you already use. QuickTime, the Snipping Tool's video mode, anything that saves a video file works as a source.

Open the file in the converter. Bring the recording to What the GIF and drop it on the tool. Decoding and encoding both happen locally, so the footage isn't sent off for processing.

Trim to the two seconds that teach. Cut the clip down to the moment the interface responds. Frame-level trimming means the loop can begin the instant the cursor commits and end as the panel settles.

Crop to the interface. Lock 16:9 or 4:3 for a panel, 1:1 for a single control, 9:16 for a phone flow, and position the crop over the action.

Bring the weight down. Run the frame rate at 10 to 15 fps, thin the palette into the 64 to 128 range, and export near 720 to 800 px wide. The size projection should read 1 to 3 MB before you commit.

Drop it into Notion. Drag the exported GIF onto the page, paste it, or place it with /image. It arrives as an image block, already looping, ready to resize and caption.

How Notion treats a GIF (and why that's the point)

Notion has a video block and an image block, and they behave nothing alike. A video block shows a poster frame and waits for a click. A GIF goes in as an image block, and image blocks animate immediately, loop indefinitely, and offer no controls at all. For a three-second interaction, that difference is everything: the teammate skimming your onboarding page sees the panel slide open as they scroll past, without deciding to watch anything.

The behavior comes with a bill. Notion serves that GIF to every reader on every page load, and a GIF stores its animation as a pile of nearly complete frames. A careless export can weigh 20 MB, at which point your wiki page develops that telltale hesitation and people quietly stop opening it. So the job splits in two: pick moments worth looping, and make the files light.

The raw material is a screen capture you already have, from QuickTime, the Snipping Tool, or wherever the moment got recorded; the screen recording route covers the capture side. What the GIF handles the other half, turning that video file into the loop.

Weight targets for a page people keep opening

Notion won't stop you from embedding something enormous, so the discipline is yours. For a UI loop, 1 to 3 MB is comfortable, and the projected output size in the converter recalculates as you work, which makes the target concrete instead of hopeful.

Three controls do most of the shrinking:

Frame rate. Menus, cursors, and panels are slow subjects. At 12 fps a UI clip reads naturally, and against a 30 fps source you've dropped more than half the frames before touching anything else.
Palette. Interface chrome is flat fills and text, which rarely needs anywhere near the format's 256-color ceiling. Cut to 64 and look; climb toward 128 only if a gradient or a thumbnail starts banding.
Output width. A Notion column shows most images at a few hundred pixels across. Exporting at 720 to 800 px keeps the loop crisp at that size and sheds the weight of a full-resolution capture.

Trimming is the fourth lever and the cheapest one. The three seconds where the modal opens don't need the eight seconds around them. When a doc genuinely calls for a showier clip, spend the levers the other way: hold a higher frame rate and a fuller palette, and accept the bigger file knowingly.

Crop before you embed

Raw screen captures are mostly wallpaper. Inside a column, that means the button you're demonstrating shrinks to a speck while empty desktop fills the block. Crop first, so the interaction is the frame.

The crop locks to fixed ratios, which keeps the output from stretching:

16:9 or 4:3 for a settings panel, form, or dashboard slab that sits in a full-width block.
1:1 for one tight interaction, a toggle flipping or a menu opening, in a narrower column.
9:16 for a phone flow or a tall sidebar, where the action runs vertically.

Drag the box over the cursor's path and the element it lands on. Everything else can go.

Internal footage stays internal

Wikis and walkthrough docs get built from exactly the material you shouldn't hand to a random converter site: staging builds, admin panels, test accounts full of plausible customer data. The usual upload-first tools take that footage onto their servers to process it, and you take their word for what happens next.

Here the processing happens inside the page you have open. The video decodes locally, the GIF encodes locally, and there is no request carrying your frames to anyone. Clip an unannounced feature, caption it, drop it in the team wiki; the footage existed on your machine and now in your Notion workspace, nowhere in between. The no-upload page lays out the mechanics if the security review wants receipts.

Placing it on the page

Notion accepts the finished file three ways, all ending in the same looping image block:

Drag it in. Pull the .gif from Finder or Explorer onto the page and it starts looping where it lands.
Paste. Copy the file, click where it belongs, paste.
/image. The slash command with Upload gives you exact placement between existing blocks.

Then size it down with the block's side handle, since full-width is rarely right for a walkthrough, and add a caption to label the step. The block works inside toggles (nice for an optional "see it done" reveal), callouts, and columns beside the written instructions. For the craft of pacing a longer walkthrough, the demo GIF guide picks up where this page leaves off.

Questions, answered

Do GIFs autoplay in Notion or do readers have to click?

They autoplay. Notion stores a GIF as an image block, and image blocks animate continuously with no play button, no controls, and no poster frame. That's the practical difference from the video block, which waits for a click, and it's why GIFs suit short UI moments in docs.

What file size keeps a wiki page feeling fast?

Stay in the 1 to 3 MB range for a UI loop. Every visitor downloads every embedded GIF on every load, so weight compounds across a team. Short trims, 10 to 15 fps, a 64 to 128 color palette, and a 720 to 800 px export width get most screen captures there without visible damage.

Can the GIF live inside a toggle, callout, or column?

Yes. Once placed, it's an ordinary image block, so it moves anywhere blocks go. Toggles make a tidy "expand for the demo" pattern, callouts give a step visual weight, and a column pairs the loop with its written instructions side by side.

My source is a Loom or a Zoom recording. Does that work?

It does, once it's a file. Export the recording as MP4 (or whatever the platform offers), then convert it like any other clip. The tool reads mp4, mov, webm, and the other formats a browser can decode; the Loom guide covers the export step.

Why does the loop look soft once it's on the page?

Almost always a scale mismatch. A GIF exported small and then stretched wide by the block handle goes blurry, and a full-desktop capture squeezed into a column loses its text. Export near the display width, around 720 to 800 px, and crop tight enough that the interface fills the frame.

Is it safe to make GIFs from an unreleased build?

That's the strongest case for converting locally. The processing runs in your own browser rather than on a conversion service's server, so pre-launch screens and admin views never leave your machine on the way to becoming a wiki GIF. No third party holds a copy, because none ever received one.