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.
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.
Issues
- 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.
- 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:
http://pobox.com/~jason1/tweakpng/.
Examples
The WWW Consortium host a
test page
to check whether a browser supports PNG transparency.