Skip to content
GIFShrink

Optimize GIF for the Web

A practical checklist for fast-loading GIFs — plus the optimizer to apply it. Drop a GIF to start with the Balanced level.

Drop GIFs here

Compressed on your device — nothing is uploaded, so there is no upload limit

GIF optimization checklist

  1. Trim the clip. Every second costs the same as the last; 2–4 seconds that loop well beat 10 seconds.
  2. Match the display size. A GIF shown at 600 px wide should not be 1200 px wide — that is four times the pixels.
  3. Lower the frame rate. 10–15 fps is smooth enough for most GIFs. Use Frames → Drop 1 in 2 on a 30 fps clip to get 15 fps.
  4. Use as few colors as the content allows. 256 for video, 64–128 for flat graphics and UI.
  5. Be careful with dithering. Use it for gradients, avoid it for flat colors — it multiplies file size.
  6. Optimize frames. Store only what changes between frames (Lossless level).
  7. Add light lossy compression. The Balanced level is usually invisible; it saves 10–15% on video clips and far more on flat animations.
  8. Lazy-load it. Add loading="lazy", width and height to the <img> tag so it doesn’t block the page or shift the layout.

Making a GIF from video? Start optimized

Most large GIFs come from video conversions. If you create them with ffmpeg, a two-pass palette gives the best colors per byte — then run the result through the optimizer above for lossy compression: 

ffmpeg -i clip.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=128[p];[b][p]paletteuse=dither=bayer:bayer_scale=4" clip.gif

fps=12 sets the frame rate, scale=600:-1 the width, max_colors the palette size, and bayer_scale=4 keeps dithering light so the GIF compresses well. Screen recorders and design tools often export GIFs without any frame optimization — for those, the Lossless level alone can cut the size by more than half.

When GIF is the wrong format

GIF is from 1987. For long or high-resolution clips on your own site, an MP4 or animated WebP is usually several times smaller at better quality — use <video autoplay muted loop playsinline> for a GIF-like effect. Keep GIF where it is the only option: emoji, email, forums, chat apps, documentation and README files. That is where squeezing the GIF itself pays off.

Next: lossless GIF optimizer · reduce a GIF to a size limit · GIF compressor

Optimize GIF: questions

What is the best frame rate for a GIF?

Between 10 and 15 fps for most clips. Film and screen recordings are captured at 24–60 fps, but GIF viewers rarely need more than 15; every extra frame adds to the file. Browsers also slow down delays under 20 ms (50 fps), so higher rates do not play faster anyway.

What size should a GIF be for a website?

No wider than it is displayed — typically 480–800 px for content GIFs. Aim for under 1–2 MB for inline GIFs and add loading="lazy" to the img tag so it does not delay the page.

Should I use dithering when making a GIF?

Use it for smooth gradients (skies, skin, shadows), avoid it for flat graphics and screen recordings. Dithering hides banding but scatters pixels, which compresses poorly and flickers between frames.

Is WebP or MP4 better than GIF?

For file size, yes — both are far more efficient. Use them where the platform supports them (your own site, most social networks). Keep GIF for places that only accept GIF: emoji, email, many forums, chat apps and README files.

Can I optimize a GIF without software?

Yes — this page does it in your browser. Drop the GIF, keep Balanced (or Lossless for pixel-exact output), and download. No install, no account, no upload.