### 14 The Web

14.1 Transparent GIFs
14.2 Animated GIFs
14.3 Beveled Images

#### 14.1 Transparent GIFs

There are many equally valid ways of generating a GIF with a transparent background index. For instance using ImageMagick, first display your GIF image using the display program. Choose Matte from the Image Edit command menu and identify a pixel with the cursor that has the colour you wish to make transpart. From the new menu select Method and choose the most appropriate method:

• point
The point method changes the matte value of the selected pixel
• replace
The replace method changes the matte value of any pixel that matches the color of the pixel you selected
• floodfill
The most useful, floodfill changes the matte value of any pixel that matches the color of the pixel you selected and is a neighbour.

Select your transparent pixel with the pointer and press a button. The image is redisplayed with any transparent pixels recolored to the background color. You can select other pixels or areas to force to transparent. When you are satisfied, press Return.

Alternatively you can do this from the command line using the giftrans program available via anonymous FTP from ftp://ftp.rz.uni-karlsruhe.de/pub/net/www/tools/. The giftrans program is distributed as part of the STAR2HTML Starlink package and should therefore be available on Starlink supported systems.

To get a list of the current colourmap for the image use:

% giftrans -l file.gif
Global Color Table:
Color 0: Red 0, Green 0, Blue 0, #000000 (black, gray0, grey0)
Color 1: Red 90, Green 90, Blue 0, #5a5a00
Color 2: Red 123, Green 123, Blue 0, #7b7b00
Color 3: Red 156, Green 156, Blue 0, #9c9c00
Color 4: Red 189, Green 189, Blue 0, #bdbd00
Color 5: Red 255, Green 255, Blue 0, #ffff00 (yellow, yellow1)
Color 6: Red 222, Green 231, Blue 222, #dee7de
Color 7: Red 255, Green 255, Blue 255, #ffffff (white, gray100, grey100)

this shows the colour index, the RGB colour value in decimal/hexidecimal and (for some colours) an X Window colour name.

To set colour index zero a the transparent colour you would then use:

% giftrans -t 0 file.gif > out.gif

You can also specify the color as an RGB triple or an X Windows color name; invoke giftrans with the -? option to see a complete usage description.

If you intend to use GIF images on your web pages, you should make yourself aware of the legal position before proceeding.

#### 14.2 Animated GIFs

Again there are may perfectly valid ways of going about this, see for instance the WhirlGIF program, discussed in Section 7.8.

Alternatively we can, make use of the ImageMagick convert application with the -delay and -page options. The -delay option is used to specify the delay in $1/100th$ of a second between the display of each frame of the animation. For example:

% convert -delay 20 frame*.gif animation.gif

You can also declare specific delays for each frame of the image sequence. For example, if the delay was 20, 10, and 5, use:

% convert -delay 20 frame1.gif -delay 10 frame2.gif -delay 5 \
frame3.gif animation.gif

Use -page to specify the left and top locations of the image frame:

% convert frame1.png -page +50"+1"00 frame2.png -page +0"+1"00 \
frame3.png animation.png

If you want the image to loop within Netscape, use -loop option, for instance:

% convert -loop 50 frame*.png animation.png

You can also use the convert application in the opposite sense to split a GIF animation into individual image files, e.g.

% convert animation.gif frame%02d.gif

The resulting image files are titled frame01.gif, frame02.gif, frame03.gif, etc.

If you intend to use GIF images on your web pages, you should make yourself aware of the legal position before proceeding.

#### 14.3 Beveled Images

Again, most packages including the GIMP and ImageMagick will allow you to add borders to your image to make buttons.

The simplest method is using the GIMP. Make sure you are working on an RGB image (using Image$\to$RGB) and then select Script-Fu$\to$Decor$\to$Add Bevel. You’ll be queried as to the width of the bevel in pixels, and it will then be automagically generated for you.

#### 14.4 “Web Safe” Colour Maps

Netscape predefines 216 colours for colour mapped (pseudo colour) workstations. When dithering an image into Indexed mode, the GIMP asks whether you want to use a WWW optimised palette. If you do so the image will be dithered to use the netscape colour map. ImageMagick has similar functionality implemented using the convert command, e.g.

% convert -map netscape: alpha.gif beta.gif

#### 14.5 Browser support of PNG images

Due to the legal problems surrounding GIF images the PNG image standard has been put forward as its replacement. Unfortunately support for PNG images is still pretty patchy in the main stream browsers such as netscape. Details of the extent of PNG support implemented into the different browsers are listed at http://www.libpng.org/pub/png/pngapbr.html.