[Download Whirlgif 3.00] [Manual] [Examples] [LZW explained] [GIF 87a Spec] [GIF 89a Spec]

Examples, Tips, and References.

On this page I have collected some information which may be valuable, but which is not found in the documents distributed with Whirlgif 3.00.

Examples.

In my examples, I will give Unix style scripts. Personally, I prefer to use scripts. It makes it easier to debug the results.

Example 1.

On the internet a mail-to-me animated GIF has been floating around. It takes up 23.019 bytes, and shows a frog which eagerly eats letters as they are presented to it. I have used reanimations of it to hunt bugs in Whirlgif (my excuse is that most frogs in nature hunt bugs for a living).

The animation consists of 28 images. In the beginning, the frog just sits there and looks at a letter:

frog01.gif
It is followed by a a series of images where the frog sticks out its tongue further and further. Finally it catches the letter:
frog11.gif
Then the frog withdraws the letter and does what frogs usually do with what they catch, it eats it:
frog22.gif

In the animation the gray color is chosen as a transparent background color. If I choose that each frame will be disposed by the background, each frame stands for it self. The background functions as an eraser.

The animation script looks as follows:

#! /bin/sh
whirlgif -background 5 -loop 0 -trans 5 -disp back -o animfrog.gif \
-time 80 frog01.gif \
-time 20 frog02.gif frog03.gif frog04.gif frog05.gif frog06.gif frog07.gif \
   frog08.gif frog09.gif frog10.gif frog11.gif frog12.gif frog13.gif frog14.gif \
   frog15.gif frog16.gif frog17.gif frog18.gif frog19.gif frog20.gif frog21.gif \
   frog22.gif frog23.gif frog24.gif \
-time 15 frog25.gif frog26.gif frog27.gif \
-time 300 frog28.gif
exit

If you are interrested, all the GIFs mentioned by name in the scripts on this page can be fetched with the HTTP-protocol - but I'm not telling you how ...

Example 2.

When I analyzed the frog-files, I found out that they actually used 12 different colors, but that the Color Map defined 256 colors.

In my favorite paint-program, I reduced the Color Map - the paint program calls it the Palette - to 16 colors. I only bothered with editing the first frog and saved it as frog00.gif. Then I re-animated the whole thing using the -globmap option, which takes the Color Map from the first GIF and uses it in all the subsequent frames, i.e. Images.

The animation script now looks as follows:

#! /bin/sh
whirlgif -globmap -background 5 -loop 0 -trans 5 -disp back -o froganim.gif \
-time 80 frog00.gif \
-time 20 frog02.gif frog03.gif frog04.gif frog05.gif frog06.gif frog07.gif \
   frog08.gif frog09.gif frog10.gif frog11.gif frog12.gif frog13.gif frog14.gif \
   frog15.gif frog16.gif frog17.gif frog18.gif frog19.gif frog20.gif frog21.gif \
   frog22.gif frog23.gif frog24.gif \
-time 15 frog25.gif frog26.gif frog27.gif \
-time 300 frog28.gif
exit

The new file is now 19.236 bytes. The reduction in size - as well as time for upload - is some 20%. You will not see any difference between the two animations unless your browser treats 16-color maps different from 256-color maps.

Example 3.

To create an even smaller animation, I can use the -minimize option. I give up the transparent option, and repaint the gray background white in all the 28 frames. The disposal method will be set to the default of Whirlgif. If I show the animated frog on a white background and without a frame, few people will note the difference, even if it actually uses only 8 different colors.

#! /bin/sh
whirlgif -globmap -minimize -loop 0 -o minifrog.gif \
-time 80 a00.gif \
-time 20 a01.gif a02.gif a03.gif a04.gif a05.gif a06.gif a07.gif \
   a08.gif a09.gif a10.gif a11.gif a12.gif a13.gif a14.gif a15.gif \
   a16.gif a17.gif a18.gif a19.gif a20.gif a21.gif a22.gif a23.gif \
-time 15 a24.gif a25.gif a26.gif \
-time 300 a27.gif
exit

The resulting size is only 5.236 bytes, compared to the original 23.019 bytes. I could have squeezed it a bit more, had I had the tools to make 8-color GIFs.

The output from the examples 1-3 is shown on a separate page for comparison.

Example 4.

The smokeless image

The pipe smoker icon on my home page was made by copying the same image without smoke 30 times and then let the smoke develop from image to image.

I am a pipe smoker
#! /bin/sh
whirlgif -minimize -time 25 -o ../images/pibe.gif -loop 0 /tmp/pibe???.gif 
exit

Example 5.

You do not need a lot of different images to make an animation. Once upon a time, I started up the intranet of one company, and nobody had decided, how the welcoming page should look. Your Company Logo I got inspired by looking at the screens in the company, where the standard screen saver had the logo running around like a billiards ball.

Let the red spot with its yellow border represent the company logo. The ugly greenish color around it will be the transparent color and thus invisible.

I wanted to animate the preliminary page with the company logo running as a billiards ball within a frame, and name the image While We Wait For a Good Home Page.

My idea about the first frame was that it should look like the image here:An image of the first frame
I cooked up a dirty little program which calculated the positions of the logo and generated the following script:

#! /bin/sh
whirlgif -trans 0 -background 3 -o pausebillede.gif -loop 0 \
-disp back -time 300 Ball1.gif \
-disp back -time 30 -off 64:48 Ball.gif \
-disp back -time 30 -off 128:96 Ball.gif \
-disp back -time 30 -off 192:144 Ball.gif \
-disp back -time 30 -off 256:192 Ball.gif \
-disp back -time 60 -off 320:240 Ball.gif \
-disp back -time 30 -off 373:200 Ball.gif \
-disp back -time 30 -off 426:160 Ball.gif \
-disp back -time 60 -off 480:120 Ball.gif \
-disp back -time 30 -off 427:80 Ball.gif \
-disp back -time 30 -off 374:40 Ball.gif \
-disp back -time 60 -off 320:0 Ball.gif \
-disp back -time 30 -off 256:48 Ball.gif \
-disp back -time 30 -off 192:96 Ball.gif \
-disp back -time 30 -off 128:144 Ball.gif \
-disp back -time 30 -off 64:192 Ball.gif \
-disp back -time 60 -off 0:240 Ball.gif \
-disp back -time 30 -off 40:180 Ball.gif \
-disp back -time 30 -off 80:120 Ball.gif \
-disp back -time 30 -off 120:60 Ball.gif \
-disp back -time 60 -off 160:0 Ball.gif \
-disp back -time 30 -off 200:60 Ball.gif \
-disp back -time 30 -off 240:120 Ball.gif \
-disp back -time 30 -off 280:180 Ball.gif \
-disp back -time 60 -off 320:240 Ball.gif \
-disp back -time 30 -off 360:180 Ball.gif \
-disp back -time 30 -off 400:120 Ball.gif \
-disp back -time 30 -off 440:60 Ball.gif \
-disp back -time 60 -off 480:0 Ball.gif \
-disp back -time 30 -off 416:48 Ball.gif \
-disp back -time 30 -off 352:96 Ball.gif \
-disp back -time 30 -off 288:144 Ball.gif \
-disp back -time 30 -off 224:192 Ball.gif \
-disp back -time 60 -off 160:240 Ball.gif \
-disp back -time 30 -off 107:160 Ball.gif \
-disp back -time 30 -off 54:80 Ball.gif 
exit

I ran into a problem. All browsers let the document background override the background of the GIF. As I had decided that the image should run within a table frame, my solution was to order the browser to set the background color of the table to what I had intended should be the background color of my image. The HTML code reads:

<TABLE BORDER=9 BGCOLOR="#0000FF" CELLPADDING=0><TR><TD>
<IMG SRC="pausebillede.gif" WIDTH="591" HEIGHT="351" ALT="">
</TD></TR></TABLE>

Tips.

Whirlgif in all releases talks GIF! The input files are GIFs and the output file is a GIF. The program may be called crude in the sense that if the input files are garbage, the output will be garbage.

The Structure of An Animated GIF.

If you have a fair idea of the structure of a GIF-file, skip this section, as it will not go into details.

Two GIF formats exist, called GIF87a and GIF89a.

Overview of the GIF87a Format.
Mandatory
GIF SignatureContains the text GIF87A
Mandatory
Screen DescriptorThe size of the GIF screen i.e. the total size to be set off to all images below. Whether or not a Global Color Map follows - and if so - the number of colors used in the Global Color Map and the color used as background color.
Optional
Global Color MapThe default colors to be used in the images.
Repeated as many times as you need
The Local Color Map is optional
Image DescriptorThe size and the position of the following image. Whether or not a local color map should be used, and the size of it.
Local Color MapThe colors to be used in the following image.
Image DataEach pixel of the image is described by its color. Data are compressed (LZW).
Mandatory
GIF TerminatorEnds the GIF file

The Color Maps are optional. The GIF87a specifications state that a Default Color Map should be used, if all Color Maps are absent. It says nothing, however, about what a Default Color Map is. Whirlgif needs at least one of them.

As you may understand, it is possible in a GIF87a file to define some sort of a bulletin board, with several pictures (images) on it. Very few GIF viewers can handle more than one image, and only a few of those will show the total screen with its background color. Browsers like e.g. Netscape, Opera, and the Internet Explorer can to some extend, but note my remarks about my problem with example 5 above.

Overview of the GIF89a Format as It Is Used in Whirlgif.
Always
GIF SignatureContains the text GIF89A
Always
Screen DescriptorThe size of the GIF screen i.e. the total size to be set off to all images below. Whether or not a Global Color Map follows - and if so - the number of colors used in the Global Color Map and the color used as background color.
Always
Global Color MapIt is taken from the first image whether it contains a Global or a Local Color Map
Possibly
Application ExtensionContains the Netscape Loop Marker
Repeated as many times as there are images
The Local Color Map is only written, if it differs from the global.
Control BlockTells whether or not a transparent color is defined, and if so, the color. The delay time before this (coming) image is to be presented. The Disposal method, i.e. what should happen after this image has been shown
Image DescriptorThe size and the position of the following image. Whether or not a local color map should be used, and the size of it.
Local Color MapThe colors to be used in the following image, if they differ from the global.
Image DataEach pixel of the image is described by its color. Data are compressed (LZW).
Always
Comment ExtensionAn ASCII text. Either a user defined comment e.g. about who created the animation, or the standard comment that says that the file was compiled with Whirlgif, the release, and the number of images.
Always
GIF TerminatorEnds the GIF file

The above does not give all variants of the GIF89a formats. If you want to know more, refer to the specifications of the terms used in the second column.

Colors.

Each Color Map takes up 3 times as many bytes as the number of colors. Color Maps in GIF files can have 256, 128, 64, 32, 16, 8, 4, or 2 colors. Most image processing programs can only treat the boldface numbers. Whirlgif can treat them all but depends on the abilities of your paint program(s), which often call the Color Map your palette.

If your aim is to make relatively small GIFs, it is a good rule to use as few colors as possible. In animated GIFs use the same Color Map throughout your images.

The -globmap option minimizes the amount of Color Maps by repacking each image to the nearest color in the Global Color Map. In this program it is a pure geometrical approximation. Sometimes it is a good approximation. If you use the -globmap option, view your animation carefully. The beauty is in the eye of the beholder.

If you are unhappy with the result, try first to edit the colors of the first image. Ultimately, you may have to reduce the number of colors in each frame by means of your favorite image processing program. For certain GIFs this may not drastically reduce the size of file. The reason is that the program may dither the colors to look almost unchanged. The LZW compression algorithm gives the best results with relatively large areas of either the same color or with a systematic pattern. Dithering, however, usually consists in making a random pattern of colors which to the eye blends to something acceptable.

The Smallest Difference.

The -minimize option makes Whirlgif find the smallest difference between two successive images, and only deliver the smallest rectangle covering the differences together with the position of the rectangle. It can give some really small animations.

If you try to minimize an animated GIF consisting of dithered images, the reduction in size may not be very astounding. A random dithering will usually yield a very large area with different random patterns.

Things to be Careful With.

Whirlgif contains options for setting the background color, as well as a transparent color. Neither Netscape nor the Internet Explorer distinguish - Opera tries it best to be bug to bug compatible. All treat both colors as transparent. Set them to the same index to avoid unexpected results in future browsers which may distinguish.

My advice is not to use the disposal method -disp prev. The result looks differerent in Netscape and the Internet Explorer.



References to Other Information

The information is collected while I worked with Whirlgif 3.00. I lost my earlier bookmarks, and I badly miss a reference to an Italian(?) site which contains comments about how GIF animations can be made - also with Whirlgif.
The newsgroup alt.binaries.pictures.animated.gifs brings a steadily floating stream of animated GIFs.
The group attracts a lot of friendly people. Many of them will help you, if you need a banner, an animation of a love letter, or whatever. Lurk a while, get ideas, and enjoy their friendliness.
The official FAQ pages of the newsgroup comes with references to various sources for animated GIFs. Of course it contains lots of multi media and animated illustrations.
It is an impressive experience which can give you a lot of ideas. The FAQ is also published as a plain text and in a pure HTML version which is the form I prefer. Perhaps because I have to pay for the load time of the big one over my telephone bill.
Barry's Clip Art Server is an example of a source where animations are offered to the public.
The pages are beautifully ordered, and it should be easy to find your way to the type of animation that you need. Barry generates his pages on a MAC.
IrfanView created by Skiljan Irfan is my favorite viewer for animated GIFs. It is Freeware for non commercial use.
Irfan knows a lot about image formats, and the program is maintained on a regular basis. The program is for Windows95/98 only.

[Download Whirlgif 3.00] [Manual] [Examples] [LZW explained] [GIF 87a Spec] [GIF 89a Spec]
My Home Hans Dinsen-Hansen's home page
www.danbbs.dk/~dino/whirlgif/examples.html
Last updated: Sat Sep 26 1998