Animated GIF
We doubt we have to describe what animated GIF image looks like, as you can find them all over the web. These range from animated icons, to commercial advertisements ("ad banners"), to web site "credits", first pages of web sites that look like the opening screens to a movie. GIF animations are useful because you can count on them being able to be viewed on almost every web browser and they do not require any special add-ons to work.
| media type:
| animated GIF
|
| what it does well:
| time-based information, sequences, processes, cartoon style/flip card style animation
|
| issue to consider |
rating |
comments |
| "hurdle" or barrier for creating media |
low  high
 |
Most newer graphics programs as well as freeware/shareware can create GIF images. Many sites offer free collections of animations you can use |
| "breadth" of audience that can view media |
narrow wide
|
GIF animations can be viewed in nearly every graphical web browser in use today; no plug-ins needed |
| bandwidth consumption |
low high
|
can be quite small file sizes and the data can "pseudo stream" as they play. |
An animated GIF image is just an extension of the same file format used for inline GIF images. But rather than just showing one image, an animated GIF has layers of different images, and information in the file can control how long it waits before displaying the next image, and how many times to loop through the entire sequence.
Several current graphics programs should have options to create animated GIF files. Plus, you can find free or low cost shareware programs (e.g. http://shareware.com/) that can turn a series of images into a GIF animation. And since the web is fully of dancing, blinking, and moving GIFs, there are plenty of free clip-art sites where you can download animations to use for your own pages. We provide a list of links to these sites at the end of this lesson.
Another advantage of this media type is that the entire graphics file does not have to be downloaded before it starts to play; an animated GIF will commence as soon as enough information is downloaded to display the first "frame" of the animation. Therefore, it appears to "stream" the animation and you can create animation files that are several hundred k in size that may start playing when perhaps 20% of the file has been received be the viewer.
What are some down sides of animated GIFs? The primary one is that because the movement attracts your eye, they can be distracting to someone trying to comprehend the other information on the same page. The other disadvantage so that they generally tend to be used as a novelty, and after the first few times you see the same animated teddy bear. it can start to look cliché or juvenile.
Animations can be very useful to show time-ordered information, i.e. to show changes in a feature over time (e.g. erosion of a beach, growth of a plant, changes in stock market prices) or to demonstrate a process (e.g. how to change a tire, how blood moves through the heart). Like GIF images, the files are much smaller for graphics that have large continuous regions of solid color and sharp edges, as compared to images with more spatial variation such as photographs.
HTML for Inserting an Animated GIF
This should be an easy lesson since the HTML code for inserting an animated GIF is exactly the same as we learned for inserting a "regular" ("un-animated"?) GIF:
<img src="filename.gif" alt="alternative text" width=X height=Y>
where X is the width of the image and Y is the height of the
image in pixels. You can also include the left and right alignment options.
Add an animated GIF image to your own web pages. Try some of these resources to find images you can use: