TL:DR – This article is about creating silky-smooth awesome GIFs with a tiny file size 🙌🏼
Even though we’re taking brave steps into things like CSS & SVG animation, you still can’t beat a solid GIF for cross-platform animation support.
It may have just celebrated it’s 30th (Yes, thirtieth) birthday, but you’d be surprised how much you can still squeeze out of a GIF with a bit of optimisation. It’s totally possible to make something outlandish like a 10 second GIF running at 25 frames per second (FPS) that weighs in at 1MB instead of 20MB.
Use an illustrative style with a limited colour palette
GIFs really start to bulk out when you use a broad colour palette. By using an illustrative style with a handful of colours you can add a surprising amount of detail and motion to a GIF without adding much file size.
Freeze unanimated sections
If you’re doing a straight-up video-to-GIF conversion, freeze any areas that are not animating. Even totally still objects in a video will have their pixels change slightly from frame to frame – adding unnecessary file size.The GIF below is a 25 frames per second straight up conversion from a video, weighing in at a horrible 4.4MB.
We can freeze all of the pixels around the flame (and flame reflection), by copy/pasting the first frame over the top of the video, and erasing the sections that animate. This way, the GIF is totally static, apart from the video that’s animating underneath.
After freezing the unanimated sections the GIF size drops from 4.4MB to 1.4MB, a pretty drastic drop, but looks pretty much identical.
We can take things one step further by reducing the frame rate from 25 frames to 10 frames per second. Ta-da! We now have a GIF that looks practically identical to our 4.4MB starting monster, but only weighs in at 590kb 🎉
Say no to excessive content, colour & gradients
Nothing kills a GIF faster than too many colours. GIFs are limited to 256 colours as a maximum, which is bad news for photorealistic animation at a manageable file size – or else you end up with a dreaded
over-dithered GIF that looks all pixely – like this guy below.
If you have to use gradients in a GIF (pls don’t) it’s best to remove as many other colours as possible, and keep things simple.The GIF above has been reduced from 7 images to 4, and kept to roughly the same colour palette (removing the colourful salad, field images etc…).You can still spot some less-than-ideal banding and pixely dithering doing on, but it looks a lot better than before.
