Transparent GIF Images Compared to Transparent PNG Images

For many years GIF file formated images were one of the two most common types on the Web. It is possible to build GIF images with transparent backgrounds. This allowed the page background to show through portions of the image.

Unfortunately, transparent GIF images have proven to be unacceptable under some circumstances. In particular, the transparency effect fails when it is necessary to have gradients, such as drop shadows, within the image.

The most viable alternative to GIF images that solves the gradient-over-transparency problem is the PNG file format. PNG have become extremely popular on the Web as they combine the best features of GIF and JPG formats. It is possible to build PNG images with gradients, including drop shadows, that have transparent backgrounds.

What you are seeing here: A portion of this page below has a colored background to better illustrate the differences between the GIF and PNG images. The images are the same except for their format. Notes accompany each example.

 - transparent GIFThe image on the right is a standard GIF with a transparent background. Notice that the drop shadow creates several problems, the most noticeable of which is the white background behind the drop shadow. The white also shows aliasing, the "jaggies" around the edges, especially around the curves.

tester - transparent PNGThe image on the right is a PNG with a transparent background. Note that the drop shadows looks very good with clean fades. The shadows are also nicely anti-aliases, which means that they do not have the jaggies