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.
On this page
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
What it means for your design
What it means for your design
What it means for your design
What it means for your design
What it means for your design
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.
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.
- 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.
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.
# 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.gifWidth
Frame rate
Length
Width
Frame rate
Length
Width
Frame rate
Length
Width
Frame rate
Length
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.
Designed for a GIF email header: large words, one ground, colour that moves slowly so few pixels change.
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 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 and MP4 vs WebM.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile