Transparency
From JumbaWiki
Raster images, such as GIF and PNG files, can be made with transparency, so that the background behind such images is visible.
This is useful when an image is resting on top of a background that might be another image, or a colour which is not constant (e.g. themes).
There are two types of transparency - by setting a transparent colour, or a transparent alpha channel. The first type is often referred to as pixel transparency and second type is often called alpha transparency.
Contents |
Pixel Transparency
One color entry in a single GIF or PNG image's palette can be defined as "transparent" rather than an actual color. This means that when the decoder encounters a pixel with this value, it is rendered in the background color of the part of the screen where the image is placed, also if this varies pixel-by-pixel as in the case of a background image.
- The top image is a simple pixel transparency, with the text either fully black or fully transparent. Note the blocky shape of the text.
- The middle image is the result of a standard pixel transparency with white chosen as the matt colour. Thus pixels which were partly transparent in the original image are mixed with white.
- The final image is using alpha transparency, anti-aliased. As you can see the text is smooth, and readable.
Advantages
The main advantage of this type of transparency is that, being very simple, it is very easy to implement, thus making for small file sizes.
Disadvantages
The major drawback of this type of transparency is the edges of the image. As pixel transparency only allows for pixels to be fully on, or fully off, one finds that most images fade the edges of objects to make the edges look more natural (often known as anti-aliasing). Thus an edge is usually blended into the background colour gradually (even if it's only over a few pixels).
As pixel transparency does not allow this, a matt colour is often chosen, which is used to blend the edges of the transparency. This can work if the background behind the transparent image is the same/similar to the matt colour, however if there is a background image/different background colour, you can often find very blocky and unnatural looking results.
Note that this form of transparency also uses up one of the available colours, reducing the available pallate by one.
Alpha Transparency
Alpha transparency is where rather than a single colour being treated as transparent, a channel (in addition to Red, Green, Blue in RGB images, or Cyan, Magenta, Yellow and Black for CMYK). This allows for a mixing of colour and transparency, meaning there can be a gradual shift to fully transparent. Thus a pixel which is 50% transparent will appear an equal mix ofthe colour of the image, and the background colour.
Advantages
The advantages of this form of transparency are clear (no pun intende)- flawless integration of images into a webpage.
Disadvantages
Alpha transparency is basically only available (suitable for the web) in 24-bit PNGs, which have quite large file sizes (as they are lossless images). The main drawback of this is that IE6 does not support PNG alpha transparency, thus 90% of viewers will not be able to see it. IE7 purportedly corrects this oversight, but will not be common enough for use for many years to come.
