Transparency in GIF images


A number of people have asked at the IT Help Desk how to specify a transparency colour in GIF images. Such images sometimes can be used to good effect on WWW pages. Four different approaches to specifying transparency are described in this document. References to the IT AIX system are out of date, as we have moved to a new Linux-based cluster for central services. ImageMagick is available on this Linux system.

Suppose you have a GIF file named opaque.gif

and want to produce an output GIF file, transparent.gif

or

in which pixels of a specified colour index will appear as if transparent when displayed by a suitable WWW browser.

Using a Web-based point-and-click tool

One convenient method is to use a file conversion tool provided at http://stuff.mit.edu/tweb/map.html. Upload your image to your public_html directory on the IT AIX system and make sure that read permission has been set on the file (chmod go+r opaque.gif). Then, using a Web browser, connect to http://stuff.mit.edu/tweb/map.html and follow the directions there.

Using giftrans on the IT AIX system

A more local, hands-on, solution to this problem is to use /usr/local/bin/giftrans on the IT AIX system. Type "giftrans -h" to get a quick list of arguments.

Determining the transparent colour index or RGB value

The main difficulty in creating a GIF file with a transparency colour is determining which colours are actually present in the file and then specifying this on the giftrans command line. You may find it convenient to use the -l (the letter ell) option in giftrans to obtain a listing of the colours present in your file:
  giftrans -l opaque.gif 2> colour_listing
  more colour_listing
A typical line in the colour_listing file might be:
  Color 172: Red 255, Green 215, Blue 0, #ffd700 (gold, gold1)
This indicates that colour index 172 (out of a possible range from 0 to 255) is a colour combination with relative intensities 255, 215 and 0 for the red, green and blue (RGB) components, respectively (again with a possible range of values from 0 to 255). An alternative representation of these RGB values is the hexadecimal number #ffd700. Furthermore, this particular colour corresponds to one listed in an X Window RGB database file (see /usr/lib/X11/rgb.txt), where it appears with the names gold and gold1. Any of these representations of the colour can be used to specify the one to use as the transparency colour.

If you have access to an X Window System display, you can use xv to determine the colours. On the IT AIX system, type

  . use imagetools
  xv opaque.gif
Then, click in the image with the centre mouse button (in xv version 3.10a) to find out the colour of the pixel under the cursor.

Once you have chosen which of the colours appearing in opaque.gif that would like to use for the transparent colour (typically this might be the colour white, black, or one of the grays), call up giftrans again, specifying this colour in one of the fashions shown in the colour_listing file above.

For example:

  giftrans -t "#ffd700" opaque.gif > transparent.gif
Note, when using the hexadecimal notation for the colours, put the colour specification in double quotes.

Using PBMPLUS/NETPBM utilities

I think giftrans provides the most straightforward solution, but, a second approach, using the PBMPLUS/NETPBM utilities on AIX, has some advantages if you want to transform your image in other ways (combining it with other images, cropping, global brightness adjustments, etc.). To use the PBMPLUS utilities, at the AIX Korn shell prompt type:
  . use imagetools
See "man ppm" and "man pnm" for information on the PBMPLUS utilities.

Start by converting your GIF image to PPM format:

  giftoppm opaque.gif > opaque.ppm
Then, after any other image editing operations you might like to perform, convert back to GIF format, specifying a transparency colour index in the process. See "man ppmmake" for details on the allowed methods for specifying the transparency colour index argument on the ppmtogif command line. For example, you can use the same hexadecimal notation that was used for giftrans:
  ppmtogif -interlace -transparent "#ffd700" opaque.ppm > transparent.gif
Note that the "-interlace" flag has been set. This is unrelated to the transparency colour specification, but, is a standard thing to do when making GIF files for the Web. It allows browsers to show a low-resolution version of the image before the full image file is received, allowing users the option of aborting the transfer.

Finally, clean up any temporary files that are no longer needed:

  rm opaque.ppm
For more information about the PBMPLUS utilities, contact Doug Phillips .

Using ImageMagick

Another image manipulation tool, ImageMagick, provides an alternative in which a portion of the image can be selected to be transparent with point-and-click operations. However, this program works well only on 24-bit X Window displays, such as workstations wsy and wsz in the IT Visualization Centre in Math. Sciences 723 (although the resulting image will be viewable on systems with 8-bit colour). For more information about ImageMagick utilities, contact Doug Phillips . The location of the software on the IT AIX system has not been finalized.

ImageMagick is a suite of image amanipulation programs with capabilities that overlap and in some ways extend those found in xv and the PBMPLUS utilities. The relevant portion of ImageMagick to be used here is the program called "display".

Using the Image Edit/Matte... menu item in display, and following directions in the matte editing section of the ImageMagick documentation, one defines a matte. This becomes the region of the image that is to be transparent.

After the matte has been defined, use the File/Save As... menu to save the file in GIF format. Image pixels corresponding to the matte region will be saved with the transparency colour index.


Reference to tools on various platforms

A number of links to information on producing transparent GIFs with tools on DOS/Windows, Mac and UNIX platforms are available here.

Page maintained by Doug Phillips , phillips@ucalgary.ca
Latest modifications: