Quick Links

 Introduction
 One piece of advice
 How do animated GIFs work?
 GIF element images
 Falco GIF Animator
 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.

I've had this page available on my site for a long time. Recently, I came across another site that does an excellent job of summarizing the current [2016] techniques and tools available for making and working with animated GIFs. I recommend that you look at The Easiest Ways to Create Animated GIFs on Any Platform. My original information below is still accurate and will provide you with a background understanding of 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, is from an free, older version of the GIF Construction Set utility [there is no longer a free version of this product available]. I like it because it easily shows on one screen the full structure of the GIF 89a file. Other GIF animation software have similar capabilities, but the actual user interface display will vary.

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

• header
• loop control
• (multiple) time delay controls [one per image]
• (multiple) image element controls [one per image]
• 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 and then stops.

GIF element images

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. This sample uses the simple replacement technique.

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.

Falco GIF Animator -- software

There are multiple animated GIF software packages, many of them free. If you are new to animated GIFs, you might want to start with one of the free packages. Falco GIF Animator has a full set of capabilities that will help you become familiar with the options available with 89A image specification.

Animation support

GIF animation is a web browser supported feature. Web browsers also give users an option to stop animations or turn them off completely, since some users find them annoying. Most mobile web device browsers also support GIF animations.

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 many of the uses of 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 two samples below demonstrate simple educational uses. The 'blood cycle' image may take a couple seconds to load, but is worth the wait.

Notice the change in blood color from red to blue and back again as it changes from oxygen rich blood [red] to oxygen depleted blood [blue].

The GIFs below is courtesy of archive.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.

Playtime!

So does all this seem kind of neat? Want to play a little? You have two choices:

1. simply view the elements of your favorite animated GIF file
2. download software to your computer -- modify existing images or make your own

Option #1: If you would just like the see the multiple GIF element images that make up your favorite GIF image, go to the GIF Explode site and enter the URL or name of your GIF file in the appropriate box. And it is all FREE.

Option #2: 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 Falco GIF Animator
2. To capture an animated GIF to play with...
   • position your mouse over the animated GIF
   • right click
   • select Save image as.. [Firefox & Chrome] or Save picture as.. [IE] 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 supported it.

Here are the links:

1. The Easiest Ways to Create Animated GIFs on Any Platform -- great explanation of current tools and techniques.
2. How Web Animation Works - Covers several animation techniques including animated GIFs, dynamic HTML, Java, and Shockwave & Flash. See page 3 for the specific discussion on Animated GIFs
3. Optimizing Animated GIFs - Also contains a list of GIF optimation software.
4. .GIF Images FAQ - also contains info on Microsoft GIF Animator.
5. Creating Animated GIFs Tutorial Tools and Strategies for Animating GIFs - contains basic info, software suggestions, and links to additional information.
6. 20 Animated Gifs that Explain How Things Work Neat examples of a practical application of animated GIFs.

Michael Botos has written a number of 'tutorial' pages on Web related topics. Michael is a former e-commerce project manager. Most evenings and weekends he cruises the Web pursuing various interests. 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/.