Optimised, Animated GIF using Inkscape, Gimp, gifsicle

Animated GIFs are a 90s hangover that will not go away! I was asked to make an animated banner 728×90 at under 50kB. Quite a tall order.

Inkscape

I designed the animation in my favourite vector drawing package, Inkscape. Each frame was a different layer; I could turn off and on layers one at a time to edit the separate frames. Obviously this is only useful for very simple animations, but I needed to keep changes between frames to a minimum to keep the file size down anyway.

So then I Exported the page, frame by frame to frame-1.png, frame-2.png, ...

Gimp

Next I imported the frames into Gimp (Gimp is available for Windows, too). To do this I started Gimp, then chose Open As Layers... from the File menu, and selected all the frames (in order). The first frame becomes the 'background' layer, with the other frames on top.

I wanted the first frame to linger longer than the others. To do this I changed the layer name to include (1400ms) so the layer was now called background (1400ms) - you can do this for any of the layers, but all the others I wanted to share the default.

Creating the animated GIF is the easiest bit. File menu, then Save As... and enter a filename ending .gif A pop-up includes the option "Save as Animation", tick this.

The next dialog box offers various other options. I removed the GIF comment (every byte counts!) and set the default frame delay.

Ta-daaa, I have a working animated GIF. But it's 118kB.

Reducing filesize with gifsicle

Available from Debian/Ubuntu standard repositories, gifsicle is a brilliant example of what makes GNU/Linux so great. A tiny program which does things flexibly. One of the things it can do is optimise animations. It has 3 levels: the man page warns you that the third, most aggressive option might take more time. On my system it took 0.04s, time well spent!

It works in a pipeline so you have to call it like this:

gifsicle -O3 <original.gif >compressed.gif

This reduced my animation down to 27kB! Job done.

Tags: 

Comments

Animated GIFs eh? They seem to be enjoying something of a renaissance these days :-/ I'll definitely have a crack at using gifsicle, nice one. Have you seen GIFsockets? http://vimeo.com/49447841 I think that's the craziest use I've seen for animated GIFs!

Charlie replied on

Hi,

From 118 to 27 kb's sounds great, but what about quality loss? Is your 27kb one at the same quality level as the original 118 one?

Jeff

Jeff replied on

Yeah, quality was fine.

Rich replied on

Add new comment