Supports a PNG transparency

Partial and full transparency for GIF and PNG

There are significant differences between the GIF and PNG formats in terms of transparency support. While the GIF format only supports completely transparent pixels, the PNG format can also display partial transparencies using an additional alpha channel.

The following illustrations are intended to demonstrate the difference between full and partial transparency. Figure 1 shows a raster graphic in PNG format, the raster pixels of which are partially made transparent via the alpha channel. A black and blue striped image is integrated into the style sheet behind the PNG image. The background partly shines through, depending on how strong the transparency is in the image. If you move the mouse over the picture, the background is hidden and the picture shows its transparency on the white background of the page. If you have not activated JavaScript, just click with the right mouse button on the picture and display the picture in a new window.

The associated PNG file is quite large at over 22 kilobytes. However, this is due to the fact that a wealth of transparency data is stored here and ultimately there are no large areas of the same color. This is only about the demonstration of the possibilities given by the partial transparency - in practice, of course, the PNG format is not suitable for such images.


Fig. 1: Partial transparency using PNG-coded raster graphics

Unlike the first picture, Figure 2 shows the same picture in GIF format. As already mentioned, there is only binary transparency here - either the background shines through or it doesn't. The result is that the background in the middle, where the degree of transparency has reached a certain threshold value, shines through completely, while in the edge areas there is no longer any transparency.


Fig. 2: Transparency in GIF images

For comparison, Figure 3 shows the loss of quality that occurs when the two images are superimposed and then saved as a GIF file. Due to the reduction of the color values, the flowing transitions are left by the wayside.


Fig. 3: Reduction of the color palette and the effects on the image quality

Figure 4 shows the combined image again in the form of a JPG image. If the website is rendered by Internet Explorer 6 or another browser that does not support the PNG format, this image also shows how the overlaid images from the first illustration should look. Since the image material complies with the properties of the JPG format, the smallest file size is achieved here with very good quality.


Fig. 4: Foreground and background as JPG file

Even if the file size of the PNG image from the first example does not suggest this: For the right image material, the use of the PNG format can be extremely effective both in terms of quality and in terms of the size of the image files. Since partially transparent PNG images can be positioned as desired while maintaining the desired effect, there is a pleasant side effect when maintaining a website: You do not have to resort to image editing as often when changing the layout.

Page 2 of 4 | «[1] • [2] • [3] • [4]»