Michael's Animated GIFs

Quick Links

Click for the hungry or the rainforest!!

Introduction
One piece of advice
How do animated GIFs work?
Animation support
Creative uses
Playtime!
Technical details and other references

Introduction

An animated GIF is a series of images. The sequence and duration of each image in the series of images is specified by control statements within the GIF file. Animated GIFs follow the GIF 89A standard. Below is a sample animated GIF file and a breakdown of the GIF file as seen by specialized software used to build animated GIF files.

One piece of advice

Okay, even before you think about creating your own an animated GIF, remember, endless animation is right up there with the <blink> tag -- annoying!. Make your animations stop after 5-10 cycles!

How do animated GIFs work?

The screen grab below, uses the GIF Construction Set utility to display the internal structure of the animated GIF playing at the left.

The internal structure shows the elements of an animated GIF. They include

• header
• loop control
• (multiple) time delay controls
• (multiple) image element controls
• comments

All of these elements are combined into a single file with the .GIF suffix.

The HEADER control identifies the GIF type and base size of the image. The most common type follows the GIF "89a" (that's 'a' as in animated) specification.

The LOOP control specifies how many times the series of images will be presented. While many animated GIFs are on infinite loop, this can be distracting to the user. This 'noframes' GIF cycles 5 times.

The CONTROL element between the various intermediate GIF images is set at 1 second (100 1/100ths). The last interval is set for 5 seconds (actually 100/100ths + 417/100ths). In addition to timing information, this element can also contain transition information about how the next image is to be display. In these examples, simple replacement is being used.

The IMAGE control defines the next image in the series to be presented. This 'noframes' GIF is made up of the 7 images at the left.

The COMMENT control provides the creator a place to sign their work as well as add any additional notes about the use and construction of the GIF.

The BLOCK NAMES control is a structure unique to the GIF Construction Set utility.

Animation support

GIF animation is a browser supported feature, which most browsers support. Most browsers also give users an option to stop animations or turn them off completely

1. What do users see if their browser does not support GIF animation? They see only the FIRST image. This is important to keep in mind when creating animated GIF files.
2. What do users see when the animation cycle stops? The LAST GIF image in the series stays on the screen when the number of animation cycles is completed.

Creative uses

Unfortunately most of the uses we see currently for animated GIF files are in annoying banner ads or distracting 'widgets' that add little value to the page. However with a little imagination, the animated GIF file becomes an inexpensive teaching tool. The second one takes a while to load, but is worth the wait.

The GIFs below is courtesy of arhive.edu which features shareable resources for educators.

Another excellent site that showcases creative uses of animated GIF files is the HowStuffWorks site. In fact, they have a separate How Web Animation Works article which contains several of their animated GIFs from their various other articles.

(you may need to press your browser RELOAD button to restart the animation) Math mathmouse.gif: 20,528 total bytes 19 total images loop cycle set to 7       bloodcyc.gif: 416,301 total bytes 30 total images loop cycle set to 7 Notice the change in blood color from red to blue and back again!

Science

If you have samples of other creative uses of animated GIFs, please drop me a line and tell me about them.

Playtime!

So does all this seem kind of neat? Want to play a little? You can save any animated GIF that you see on the Web to your local hard disk, open it in an animated GIF editor, and modify it.

Here are the steps:

1. Download & install GIF editing software, like the GIF Construction Set utility
2. To capture an animated GIF to play with...
   • position your mouse over the animated GIF
   • right click
   • select SAVE IMAGE AS from the pop-up menu
   • enter directory and file name for your local copy
3. Edit your local copy using the editor. Change a couple of the time intervals or set the loop factor to 2.
4. Save your changes
5. Point your browser to your local copy. In the URL input line, enter: c:\temp\anigif.gif (obviously, use the directory and file name you saved it as)

Now you're ready to make your own animated GIF from scratch!

Technical details and other references

Several readers have asked for more technical details about the 'gif89a' file structure. The first link is definitely not for the 'faint of technology'. It may surprise you to know that the 'gif89a' specification was written way back in July of 1989, long before World Wide Web even existed, much less suported it.

The third link contains 150 popular animated gifs.

Here are the links:

1. Animated GIFs - http://www.cybrrcat.com/agifs.html
2. Dutchman's top 150 animated gifs - http://www.cybernettix.vuurwerk.nl/animated.html
3. Optimizing Animated GIFs - http://webreference.com/dev/gifanim/
4. How Web Animation Works - http://www.howstuffworks.com/web-animation.htm

If you'd like to recommend other good site, I'd be happy to include them here.

Michael Botos, EDP, has written a number of 'tutorial' pages on Web related topics. Links to his other presentations are available on the learning page. Michael works as a project manager for electronic statement presentment & payment during the day. Most evenings and weekends he cruises the Web pursuing various interests. Michael is an active member of XPLOR, a worldwide association of electronic document & printing professionals. Michael is an accomplished speaker and offers a number of training, mentoring, consulting, and web site development services. You can reach Michael at mbotos@botos.com. His general home page is at http://www.botos.com/.