Achieving small sizes when converting animations to GIF is not always easy.
Here are some techniques I usually use to lower the KB down.
Remove every other frame
- You’ve rendered the animation to a movie file (.mov, .mp4, etc).
- Open Photoshop.
- File > Import > Video Frames to Layers…
- Tick Limit to Every… and pick 2 Frames
- Double the duration of every frame to make up for the frames you took out.
Sometimes keeping the duration just under double will make the animation less jittery.
Remove repeated frames
- Quite similar to the method above, simply identify similar frames
- Remove all repetitions leaving just one instance
- Increase the duration of the only instance left to make up for the removed frames.
Optimising with Save For Web
- Import your video file or animation to Photoshop
- File > Export > Save For Web (Legacy) (or CMD/Crtl + Shift + S) to access the Save For Web panel in Photoshop
Here it’s going to be a trial and error process.
Generally just bringing the Dither to 99% and the Lossy to 1 makes a big difference:
I usually balance Colours, Dither, Lossy and the Color Reduction Algorithm to reach an acceptable level of compression (not too much as it will look bad, not too little as we’ll end up with a big file).
Some additional notes
- Flat colours work better. GIF uses a very limited number of colours (shades count as colours) so textures and photographic animations result in bigger files sizes.
- GIF reuses a lot of information, this means that if all the content on your animation changes from frame to frame you’ll end up with a bigger file size. This is why cinemagraphs work so well, they only change a small part of the image.
- Avoid crazy dimensions, if you’re exporting a full HD GIF ask yourself if you shouldn’t be working with .mp4 instead.
- Using GIF on Powerpoint might present itself as confusing to say the least. Powerpoint sets a default duration for each frame on the GIF so you’ll have to cut down the number of frames on your animation to avoid ending up with slowed down GIFs.
- If working with transparency don’t forget to set a matte colour that matches your background.
- If your background has a complex number of colours (like a photograph) maybe you should consider a PNG sprite instead of a GIF.
- There’s a quicker way to reduce the number frames on an animation, you can drop the frame-rate you’re working with. If you start your animation at 12fps in a way you’ll have removed every other frame when comparing it with a 24fps animation. I don’t do this often because:
- I prefer working at a higher frame-rate from the start and then drop it on the compression stage,
- If you change the frame-rate by dragging the video file to Photoshop you won’t have control of the duration of each separate frame because you’re working on a timeline and not a frame-by-frame animation.