Michael's Animated GIFs   


spacing pixel spacing pixel

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.

return to TOC 

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!

return to TOC 

How do animated GIFs work?

animated GIF showing my undying love for Netscape Frames 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.

gifcon display

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.

return to TOC 

spacing pixel spacing pixel spacing pixel

GIF element images


letter 'f' f.gif
letters 'fr' fr.gif
letters 'fra' fra.gif
letters 'fram' fram.gif
letters 'frame' frame.gif
letters 'frames' frames.gif
no frames image nframes.gif

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.

return to TOC 

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.


scrrengrab of falco gif animator user interface

return to TOC 

spacing pixel spacing pixel

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.

return to TOC 

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.

 
(you may need to press your browser RELOAD button to restart the animation)

Math

animated mathmouse gif

mathmouse.gif:

  • 20,528 total bytes
  • 19 total images
  • loop cycle set to 7

 

 

 

Science

animated GIF showing blood flow through human body

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!

 

return to TOC 

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!

return to TOC 

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. 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
  2. Optimizing Animated GIFs - Also contains a list of GIF optimation software.
  3. .GIF Images FAQ - also contains info on Microsoft GIF Animator.
  4. Creating Animated GIFs Tutorial Tools and Strategies for Animating GIFs - contains basic info, software suggestions, and links to additional information.

return to TOC 


About the author

Michael botos Michael Botos has written a number of 'tutorial' pages on Web related topics. Michael works as a project manager for e-commerce during the day. 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/.


Administrivia: doc ID: http://www.botos.com/train/anigif.html 
Copyright © 1996-2012 Michael Botos.   revised: 09/22/2012      -- Privacy statement 
Your comments on presentation style, technical content, and anything else relating to the Web are always welcome. Send them to me at  mbotos@botos.com.