# Animated GIFs: make them small, smooth and on brand

[Canonical HTML page](https://gradiently.design/guide/gif-maker-tips)

GIF is old, limited and still everywhere: email, chat, docs and READMEs. Work with its limits instead of against them and it can look surprisingly good.

## The short version

- An animated GIF can hold at most 256 colours in each frame, which is why smooth gradients often band or speckle.
- The biggest levers on GIF file size are pixel dimensions, frame count and how much of the picture changes between frames.
- For most designed GIFs, 10 to 15 frames per second at the size it will be displayed is a good balance of smoothness and weight.
- Generating a custom palette from the animation itself gives far better colour than a generic web palette.
- Use GIF where video can't play, such as email, and use MP4 or WebM everywhere else.

A good **animated GIF** is small because it is planned around the format's limits: a modest pixel size, 10 to 15 frames per second, a colour palette built from the animation itself and as little of the frame changing as possible. GIF stores at most 256 colours per frame and compresses far less efficiently than video, so the same loop that is a light MP4 can be a heavy GIF. Use it where it is the only option, mainly email and some chat and document tools, and make it carefully.

## What a GIF can and can't do

| Limit | What it means for your design |
| --- | --- |
| 256 colours per frame | Gradients, photos and soft shadows must be squeezed into a small palette |
| Transparency is on or off | No soft edges: anti-aliased shapes get a halo against unexpected backgrounds |
| Frame delays in hundredths of a second | Exact 30 fps isn't possible; 10, 20, 25 or 50 fps divide cleanly |
| No sound | The message has to work silently, which is good practice anyway |
| Simple compression | Files grow fast with size, length and motion |

Every GIF decision comes back to these five facts.

Browsers also treat extremely short frame delays as slower than requested, so pushing a GIF towards high frame rates often gives you a bigger file that doesn't even play faster. For why frame rate matters in the first place, see [frame rate explained](https://gradiently.design/guide/frame-rate-explained).

## How to keep an animated GIF small

File size is mostly decided before you export. These are the levers in order of how much they usually matter.

1. **Make it the size it will be shown** An email header shown at 600 px wide doesn't need to be 1200 px wide as a GIF if weight matters more than sharpness on dense screens. Halving the width roughly quarters the pixels.
2. **Shorten the loop** Two or three seconds that loop cleanly beat ten seconds that don't. Every frame adds weight.
3. **Drop the frame rate** 10 to 15 fps is smooth enough for drifting colour and type. Slow motion needs fewer frames than fast motion.
4. **Move less of the frame** GIF encoders can store only the pixels that change. Still text over a slowly moving area is far lighter than a whole frame in motion.
5. **Limit the colours** If the design only uses 64 colours, a 64 colour palette is smaller and looks the same.

## Palettes, dithering and banding

When a frame has more than 256 colours, the encoder has to choose. It can round every pixel to its nearest palette colour, which makes gradients step into visible bands, or it can **dither**, scattering pixels of neighbouring colours to fake the in-betweens. Dithering looks smoother from a distance and grainy up close, and it makes files bigger because the pattern changes from frame to frame.

- As designed: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Rounded to too few colours: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

An exaggerated view of banding. Real GIFs have more steps than this, but on wide, subtle gradients the steps still show.

- **Build the palette from the animation.** A palette generated from your own frames spends its 256 slots on colours you actually use, not on a generic set.
- **Use ordered dithering for animation.** A fixed pattern such as Bayer stays put between frames, so it shimmers less and compresses better than error diffusion.
- **Prefer bolder, shorter gradients.** A gradient between two close colours across a large area is the worst case. More contrast across a smaller area bands less.
- **Add grain on purpose.** A little texture in the design hides steps, though it does add weight. Test both.

The same problem in still images, and how to fix it at the source, is in [gradient banding](https://gradiently.design/guide/gradient-banding).

## Export settings that work

If you have a video and need a GIF, FFmpeg's two step palette method gives much better colour than a single pass. The first command builds a palette from your clip; the second uses it. Gifsicle can then shave off more weight.

```bash
# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif
```

fps=12 and a 600 px width suit an email header. stats_mode=diff and diff_mode=rectangle favour the parts of the frame that move.

| Use | Width | Frame rate | Length |
| --- | --- | --- | --- |
| Email header | 600 to 1200 px | 10 to 15 fps | 2 to 5 seconds |
| Chat reaction or sticker | 240 to 480 px | 10 to 15 fps | 1 to 3 seconds |
| Docs or README demo | 800 to 1200 px | 10 to 20 fps | As short as the demo allows |
| Slide or presentation | 960 to 1920 px | 15 to 20 fps | 3 to 6 seconds |

Starting points. Email headers are designed at 1200×600 and shown at 600 px wide, so pick the width by whether sharpness or weight matters more.

## Keeping a GIF on brand

Because the palette is so small, GIF is unusually good at revealing whether your brand colours were chosen with care. Colours that are close in hue merge, and a background that relies on subtle shifts can collapse into flat steps. Brands that look best as GIFs lean on a clear ground colour, one or two strong accents and type that is large enough to survive a small palette.

Welcome email header reading thanks for joining over a slowly moving gradient

Designed for a GIF email header: large words, one ground, colour that moves slowly so few pixels change.

Square animated graphic with the single word shipped on a bold gradient

A one word square for chat and docs. Few elements, bold contrast, a short loop.

Gradiently exports GIF on Pro alongside MP4 and WebM, so you can design once, then hand the GIF to your email tool and the video to social. Because the moving background is a Mark that belongs to you, the GIF in someone's inbox looks like your brand rather than a stock loop. For email specifically, read [animated email headers](https://gradiently.design/guide/animated-email-header) for the fallback rules.

### Avoid

- A GIF on a website where video would play
- Exporting at double size and letting HTML shrink it, unchecked
- 30 fps for a slow colour drift
- Text that only appears in the last frame
- Soft transparent edges on an unknown background

### Do

- GIF for email and tools that need images; MP4 or WebM elsewhere
- Pick the size on purpose and check the file weight
- 10 to 15 fps, a short clean loop
- A first frame that works as a still
- A solid background that matches where it will sit

If you are choosing between formats rather than polishing a GIF, start with [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4) and [MP4 vs WebM](https://gradiently.design/guide/mp4-vs-webm).

## FAQ

### How do I make an animated GIF smaller?

Reduce its pixel dimensions, shorten the loop, lower the frame rate to around 10 to 15 fps and keep most of the frame still. A palette built from the animation and a pass through an optimiser like gifsicle help further.

### Why do gradients look striped in a GIF?

A GIF frame can hold at most 256 colours, so a smooth gradient is rounded into steps. A custom palette, ordered dithering and a little grain all reduce the effect.

### What frame rate should an animated GIF be?

10 to 15 fps suits most designed GIFs. Because GIF frame delays are set in hundredths of a second, rates such as 10, 20 or 25 fps divide more cleanly than 30.

### Should I use GIF or MP4?

Use MP4 or WebM wherever video plays, because the files are smaller and the colour is better. Use GIF for email and for tools that only accept images.

### Can a GIF have a transparent background?

Yes, but each pixel is either fully transparent or fully solid, so soft edges get a visible fringe. Match the edge colour to the background it will sit on.