14 The Web

 14.1 Transparent GIFs
 14.2 Animated GIFs
 14.3 Beveled Images
 14.4 “Web Safe” Colour Maps
 14.5 Browser support of PNG 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:

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 RGB) and then select Script-Fu Decor 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.