GIFs are everywhere these days, having made something of a resurgence in the last few years. Cinemagrams and good old fashioned animated GIFs can be found in places and that and there’s an ever-growing range of tools for making them, so what’s the problem?
The problem is size. For example, Reaction GIFs work best when they pop up like lightning and deliver their sassy/funny/withering/whatever response instantly. If you’re waiting 30 seconds for an oversized GIF to load it takes the fun out and can leave you actively cross at the poster for wasting your time through poor optimisation. A 3 second GIF does NOT need to be 3Mb.
Here’s why it’s relevant to us. We’ve started adding GIFs into some of our emails to demonstrate how some of Kong’s features work - a quick animation can get across the gist in a few seconds.
So, lets talk tech about GIFs for a minute. (Disclaimer! This is not intended to be the end-all guide to GIF creation, just some stuff that works for us)
File size is the most important thing as far as we’re concerned. If a GIF is too big it might be rejected by a mailbox, and it might take so long to download that the recipient clicks away before they’ve seen it. So, here’s a few of the techniques we use to keep the file sizes down.
- Dimensions - we work to a width of 500 pixels, as experience has shown that most email clients will be able to work with this.
- First frame - this is an important one. If an email client does not play animated GIFs then it will usually default to only show the first frame. To allow for this we make sure that the first frame has representative content in it, in one of two ways. The first is to have a single frame at the start, then go into the main animation. This can lead to a ‘flash’ if the GIF loops, and is better suited to GIFs that only play once. The second method is for looping animations, and is simply to start in the middle. This means that if animations aren’t supported the viewer still gets to see something interesting.
- Frame rate - more frames means a larger file. Solution - reduce the frame rate! Our go-to frame rate for animated GIFs is 15 frames per second. The tradeoff is that the animation is not quite as smooth, but the files can be significantly smaller. The key to this working is context - if we were making a YouTube video then 15fps would likely be distracting as the viewer will expect smooth motion, but in an email it works just fine.
- Palette size - GIFs have a limited palette of up to 256 colours. If you’ve ever seen a video converted to GIF and the colours have looked off this is why - there’s not enough colour values available to represent the scene. For our feature examples this is less of an issue, as there’s only a few carefully selected colours on screen at once. Even so, we’re careful to reduce the number of colours in the GIF to the minimum we can get away with without reducing the image quality.
- Pauses - If you import your animated GIF into Photoshop you can delete frames and change the duration of others. For sections where nothing is happening you can save a good chunk of filesize by removing duplicated frames and setting a single frame to last longer.
- Content - Don’t show everything. For our feature highlights we pick a part of the process that represents what’s going on. Some of the workflows are too long to practically GIF, and would not be as interesting as a short clip. Keeping it short lets us keep it interesting and keep the file size down. Double win.
- Optimise - As a final pass we usually run images through something like ImageOptim, to squeeze the final few bits out.
TL;DR - Make animated GIFs with small file sizes for increased fun.
PS Here’s the settings we used to make the GIF at the top. The size is different because it’s not for an email, and transparency is turned on because Photoshop added about 100kb when it was turned off. Weird.