The Art of the Subtle Animated GIF

This healthy obsession with animated GIF's was already alluded to in a previous blog post, Guess Web Design for a Living Was Inevitable. The Graphics Interchange Format (GIF) was first seen in the wild in 1987 as a simple 8 bits per pixel bitmap image with a staggering 256 colour palette. Well, it was staggering back in the day at least.

Although the 1987 GIF, the aptly named 87a supported multiple images, in 1989 the 89a GIF would support a whole set of new features such as animation delay and transparent backgrounds allowing for all types of exciting web design implications.

You have to take the humble GIF seriously and ask yourself, where would the interwebs be if it weren't for the original GIF image format? The animated GIF itself lies at the very heart and soul of the interwebs as we see it today. Way back when in the 1990's, a website wasn't a website if it didn't have an under construction, guestbook or similar aesthetically challenged set of animated GIF's. Who doesn't remember 'The Dancing Baby', or the retina smashing pages on Tripod?

It's future did at one point look uncertain though. What with the development of the Portable Networks Graphic (PNG) due in part to old GIF patent infringements, the use of the GIF image format in general had been slowly in decline for a number of years. And while all of this may be true... it's use got a severe boost last year when cinemagraphs started appearing on some of the interwebs most popular and influential websites.

These cinemagraphs weren't your everyday animated GIF... no no no, these were for want of a better expression a thing of beauty. Cinemagraphs... or if you'd prefer... 'a fancy name for a subtle animated GIF' (that debate will certainly go on, and on), are essentially animated GIF's, but then again, they are so much, much more.

You could lose a couple of hours staring at some of these, we can't take any credit for any of them mind you, but you can rest assured we're going to try to make a couple of our own. Here's a selection of some of the favorites, enjoy:

#25.

494.46 kB, 12 frames, 71 colours.

We call this "in the Lake District walking... needing a wee". If you really want to be picky though, the colour palette isn't the best, but that's not surprising when you realise the GIF is only using 71 colours!

#24.

1092.65 kB, 41 frames, 256 colours.

Is it possible to not look at this GIF and have Kumbaya rattling around your noggin? Although only 41 frames, the randomness of the flames are the best fire themed animated GIF by far.

#23.

839.08 kB, 52, frames, 254 colours.

Let us remind you that this vista is a GIF. A simple GIF, with 52 frames and 254 colours. A beautiful palette and beautiful cinemagraph. Wish yourself here, and feel the heat of the sand under your toes.

#22.

1010.69 kB, 22 frames, 196 colours.

It's certainly not the best example of looping on the list, but it is the first of the food and drink related cinemagraphs, apologies in advance if your feeling peckish... or thirsty =^..^=

#21.

468.39 kB, 8 frames, 202 colours.

OK, so it's half nine in the a.m and looks very bright outside to be watching a projector... explain? Still a damn fine example of an animated GIF.

#20.

390.42 kB, 90 frames, 256 colours.

A staggering 90 frames are needed to create this relatively simple, yet highly effective cinemagraph. Could be higher in the rankings for it's subtlety, but there's another 19 more to go.

#19.

276.38 kB, 25 frames, 226 colours.

The first of only three black and white cinemagraphs that make it onto the list... you'd think there'd be more due to the limited colour palette? Good to see this B&W using nearly all the greyscale available.

#18.

433.91 kB, 44 frames, 256 colours.

Even with just 44 frames, the rising steam still maintains a certain randomness about it. One of the things most fascinating about these GIF's.

#17.

710.64 kB, 30 frames, 256 colours.

Glug, glug, glug... the looping on this one is simply brilliant, how it's achieved will take some looking into. Intriguing palette too.

#16.

594.11 kB, 39 frames, 256 colours.

Obscene looping, but also notice the barber pole inside, above the counter and it's reflection. One of the purist examples of GIF animation, subtlety personified.

#15.

368.41 kB, 60 frames, 185 colours.

No list on the interwebs would be complete if there weren't a cat thrown into the mix. A lovely soft colour palette too.

#14.

370.83 kB, 66 frames, 256 colours.

How this is only 256 colours is simply amazing, yes it's a relatively simple cinemagraph (much like #20) but the quality and the detail is superb. Not to mention the overall effect of the image is stunning.

#13.

3403.86. kB, 59 frames, 256 colours.

By far the heaviest GIF on the list... bacon may make everything taste better, but guess it can also make anything including filesize fat?

#12.

277.82 kB, 54 frames, 84 colours.

Only 84 colours to create this cheeky one... looks like a punch is going to be thrown eventually. Even odds, whose your money on?

#11.

238.13 kB, 8 frames, 256 colours.

Hard to believe this is just 8 frames... it is!

#10.

2907.62 kB, 35 frames, 256 colours.

Gorgeous cinemagraph, gorgeous palette. Hang on a New York minute, these are GIF's again aren't they?

#9.

574.64 kB, 37 frames, 68 colours.

The worlds longest, never-ending subway train... the composition is sweet, and it's simply amazing that this is achieved with just 68 colours.

#8.

375.69 kB, 47 frames, 254 colours.

47 frames? With the brandy pour only being 8, seems a bit naughty. But the end result... wow, makes you thirsty, so very, very thirsty.

#7.

569.04 kB, 29 frames, 216 colours.

Could this cinemagraph have benefited from those extra 40 colours available... nah, it's visually captivating.

#6.

497.49 kB, 17 frames, 231 colours.

What is it about the underground / subway that lends itself so easily to repetition... monotony and purgatory?

#5.

489.48 kB, 37 frames, 217 colours.

Mesmerizing, again could it have benefited with more colours available... nah, it's near perfect. Could have been #1 but for the technical / aesthetic merits of the next 4.

#4.

485.50 kB, 8 frames, 212 colours.

8 frames... and you could stare it this near perfect image for 8 minutes, easily. Really interesting colour palette to boot.

#3.

452.00 kB, 30 frames, 255 colours.

30 frames may seem a lot for such a simple cinemagraph, but it is it's simplicity that helps it get this this high on the list... beautiful.

#2.

701.10 kB, 26 frames, 226 colours.

This one is actually called 'Can you smell them?'... yes, yes we can smell them!

#1.

153.12 kB, 31 frames, 256 colours.

#1 and the smallest file size. It doesn't make it to number one just for being the smallest. Like so many others on the list, perhaps the rule of thirds is strong, the overall composition is just sublime.

What is it that is so engaging with these cinemagraphs? We can immerse ourselves in the quality of HDTV without even thinking, so what makes these beautiful, simple, limited palette GIF animations so captivating?

Expect to see several more blog posts on the whole nostalgic love affair with the animated GIF. Up next after these subtle animated GIF's... think we might take a peek at some of our favorite movie and TV GIF's? So stay tuned!

At design dpi we're happy to still have the opportunity to be creating animated GIF's for banner ad campaigns. It may always be a battle squeezing in as much quality as we can to the banner ad, what with the restrictions already given to a 256 colour palette but also to the restrictions placed on file size for banner ad design, however challenging it is, it's always rewarding.

Don't forget to take a look at some of the past banner ad designs and some of the newer ones here, and please get in touch with your own findings of cinemagraphs, subtle animated GIF's... and all things GIF in general!

David Ellicott's squiggle