How To Create Gifs

Frame rate: less is more

GIF is a format from 1987 that refuses to die. Newer formats are more efficient (WebP, APNG, AVIF animations), but GIF still wins for one reason: it plays everywhere with zero ceremony. Drop one in Slack, email, a tweet, a blog post, and it just loops. The tradeoff is file size and quality — GIFs over 2–3MB are painful on mobile, and the 256-color palette means vibrant photos look posterized. This guide covers the frame rate that’s actually readable (10–15fps, not 60), loop counts, the 256-color limitation and how to work around it, the size-versus-quality tradeoff, when GIF beats video, and the accessibility considerations that most people ignore.

The 256-color palette

If you’re converting from video, pick a frame rate that divides cleanly into the source. A 30fps video at 15fps means skipping every other frame — clean. At 14fps you get uneven skipping that looks stuttery.

File size targets

GIF supports at most 256 colors per image. Full-color photos (millions of colors) have to be quantized down, which produces banding in smooth gradients — sky, skin, sunsets all look posterized. Two mitigations:

Dimensions matter more than duration

Anything over 5MB feels sluggish on mobile connections. If you’re over target, reduce dimensions first (every halving cuts size ~75%), then frame rate, then palette size, then length.

Loop count and pacing

A 640×360 GIF at 3 seconds is dramatically smaller than a 1280×720 GIF at 2 seconds. GIF is pixel-inefficient. For web inline use, 480–720 pixels wide is the sweet spot — enough to read action, small enough to ship fast. Retina doesn’t help GIFs; nobody expects them to be sharp.

When GIF beats video

Default is infinite loop. That’s fine for reaction GIFs and short loops. For product demos that run 10 seconds, consider a finite loop count (2–3 repeats) so viewers can concentrate on whatever’s next to it.

WebP and APNG as alternatives

Pacing matters. Start and end on a similar frame so the loop point is invisible. Put a brief pause (300–500ms hold on the last frame) before looping — viewers process what they just saw rather than getting yanked back to the start.

Transparency

GIFs autoplay everywhere with no controls, no tap-to-play, no sound, no codec negotiation. For short, silent, looping content under 4MB, GIF is the path of least friction. Slack previews inline, email clients display them (mostly), documentation tools embed them trivially.

Capturing screen recordings for GIFs

GIF supports 1-bit transparency — each pixel is either fully opaque or fully transparent, no in-between. For overlays that need smooth edges or partial transparency (drop shadows, antialiasing), GIF produces visible jaggies. Use APNG or WebP if you need real alpha transparency.

Accessibility and motion sensitivity

Screen recordings are usually oversized and over-framerate for GIF output. Workflow: capture the screen at high quality as MP4 or MOV, trim to the exact moment that matters, downscale to ~720px wide, export at 12–15fps. Avoid capturing mouse movement as background motion if it’s not part of the demo; it wastes frames.

Captions and text overlays

Looping motion can trigger vestibular disorders, attention issues, and migraines. Guidelines for respectful GIF use:

Common mistakes

Because GIFs have no audio, text overlays carry the narrative weight. Keep text large (at least 5% of the GIF height for readability on mobile), high-contrast (white text with a dark outline or backdrop), and on screen long enough to read at a relaxed pace (1 word per 150–200ms). A text that flashes past in 3 frames at 12fps (250ms) is unreadable.

Run the numbers