Transparency in images

There are many situations where the visual impact of a page would benefit by making parts of an image transparent. These include, for example:

  • images of irregular shaped objects for display on an arbitrary coloured or patterned background
  • realistic drop shadow effects

Transparency in images is only available with GIF and PNG images. Each treats transparency in a different way, and so we will deal with them separately.

Transparent GIF files

As we already learned, GIF files contain a colour palette of 256 entries. The actual image bytes contain lookup values into the palette table.

Transparency is achieved in GIF file using an extra parameter in the file which identifies one of the palette entries as being transparent. Any palette entry can be set as the transparent 'colour', however most image editors will default to using the current background colour as the transparent entry. The examples below show how an image will appear with and without transparency when overlaid on a patterned background (in CSS). The original image has a white background.

Demo GIF image with no transparency
Demo GIF image with transparency

Transparency in PNG files

The examples above for a GIF file demonstrate how primitive the facility for transparency is. PNG files, however, have a much more sophisticated approach to transparency.

We already know that PNG files support true colour images, with no palette. So we can have 16M colours (256 levels each of Red, Green and Blue). PNG provides transparency by allowing and extra byte of data for each pixel called an alpha channel (making 4 bytes per pixel).

The alpha channel value (ranging between 0 and 255) determines how transparent the pixel is when overlaid on a background. A value of zero (0) means that the pixel will be completely transparent, a value of 255 means that the pixel will be completely opaque (i.e. the background won't show up) and a value of 128 means that the pixel will be approximately 50% transparent, so the pixel will be an equal combination of the pixel colour and the background colour.

The overall effect of this technique is that complicated overlaying of images can be performed by varying levels of transparency on individual pixels, blocks of pixels or complex shapes.

Demo PNG image with transparent gradient in white
Demo PNG image with transparent gradient in black


  1. Latest versions of browsers support transparency in PNG files, however, earlier versions are not so good. Particularly, Internet Explorer 6 and earlier, have no native support, but there are techniques which will make transparency work in these browsers. These techniques are beyond the scope of this tutorial.
  2. Some browsers interpret the colour within a PNG file differently, based on a parameter stored within the PNG file format. This Gamma Correction parameter can cause slight colour differences between browsers. A quick fix for this is to make make sure that your image editor does not save the Gamma value in the file. If your image editor program cannot do this there are several utility programs which can do this for you. For example, TweakPNG is a free utility available from:


The WWW Consortium host a test page to check whether a browser supports PNG transparency.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera