GIF Transparency, Anti-Aliasing and Borders

Handling transparency in GIF graphics is quite tricky. In fact, this format supports only 1-bit masking, meaning that your mask can be created with one colour value only. In the GIF-transparency world, stacking images with blurred borders, glow or drop shadow effects are unimaginable tasks. If you are not careful, your transparency effects could easily show flaws, such as unwanted halos or borders.



Figure 4: Examine the borders closely: the light halo was not foreseen!

This halo comes from the use of anti-aliasing, a technique which hides the fact that bitmap graphics are made up of pixels. However, Web graphics are less demanding than their printed counterparts. And working with transparent GIFs is one of the exceptional situations where hard edges no longer pose a problem.



Figure 5: If borders are not anti-aliased, the GIF will not show an unwanted halo

The anti-aliasing function can be a source of problems and result in disastrous effects if it is applied to GIF images containing glow, blurred borders or drop shadow effects. A common solution to this problem is to create the image over a background of the same colour as that over which the image will be displayed in the browser. It will look awful at design time but will display correctly over the final background.