Animated GIFs Made Easy

Behind The Scenes

Here's a small example (albeit 13kbs) showing how, by simply 'stacking' layers on top of each other, we can produce 'perspective' in an animation. This image wasn't designed with any real purpose in mind, and so it may seem a tad trite for a Web page. Try to keep in mind that by using animations on your Website, you're not only adding to the aesthetics and interest of the pages, you're also adding to the download time for your visitors.

So it's always a good practice to create them with very specific intent, to embellish the message within your site content; not just for the sake of 'eye candy'. And on the same note, having more than 2 animations per page can not only boggle the eye, but put extra stress on the user's browser and system resources.

The above animation contains 11 images/layers. Each layer/image is a copy of the previous one, which has been altered slightly to produce changes in the progression of the sequence. It would be good to note here that what you're seeing in that animation is something of an optical illusion. What I mean by that is your eyes are actually seeing things that aren't really there (kind of like when you don't go to sleep for 35 hours!).

Hey! Just for the fun of it, here's a slightly different version of the eyes animation, where the individual frames were set to 'overlay' on top of each other instead of replacing each other. It's a tad more devious-looking. What do I mean by this?

Well, when your eyes perceive that animation, they're 'filling in' a bunch of blank spots where the animation isn't actually doing anything. Does anyone remember those little 'flip books' that were big way back in the ol' days? The ones that had a small drawing on each page of the book that was drawn in sequence to produce the illusion of a continuous animation, when you peeled back the pages with your thumb and let them flip over real fast? We're using the same principal here. Your eyes are so well designed (or so easily fooled) that they can 'create' (or imagine) the missing parts of an animation, which will make the sequence of broken movements 'appear' to flow more continuously than they really do.

Here again is the de-constructed smiley animation from page 2, where you can see exactly just how choppy the images look from one to the next. Notice all the 'missing' movements in the sequence? Well those empty spots will appear to be there when these images are played at an average rate of about 10/100s of a second. That's pretty fast per image. So fast, in fact, that the images' positions will appear to blur together, and your eyes won't be able to see all the holes that are actually there. This point proves the 'eyes fooled' theory.

Let's fool your eyes for a minute. See if you can tell just what parts of the face's movements your eyes are 'filling in'.

And what does all this mean you ask? Hmm...

Well essentially this all comes down to one thing again... file size! files size! file size! Why, that 'full facial contortion extravaganza' was only a measly 1.7 kb. Yep. It's a proven fact that fewer frames in an animation can heartily reduce the finished animation's file size; especially if you're using a Global Optimized Palette (hint hint). And that means? More happy visitors! If you don't 'need' all those extra frames in your animation, then why add them? Save yourself some work (unless you're entering the piece into a contest or something).

You'd be surprised to learn that most animations you see on big corporate-type Web sites have fewer than 5-5 frames, tops. And most of them are optimized to the max. But hey! It gets the job done right?! Also, keep in mind here that folks have gotten used to Web animations being slightly "choppy looking". And that's fine for the purpose they serve. What folks will never get used to though, is having to click on a link, go make dinner, wash the dog, run to the store, watch a movie, and come back to their browser to find an empty image icon where a bloated animation is trying to load in.

Last but not least, let's look at some types of animations that are used on Web pages, and a method we can use to keep them lean and clean, so they'll load fast.