Antialiasing, Transparency, and the
World Wide Web an online tutorial by Brad West

So you've got yourself a web page, and you want to have some kick-ass graphics -- maybe some cool icon to link to your page design business, or perhaps a neat button to get you to that funny picture of your dog.

Well, if you want to make some stunning graphics, you're going to have to learn a few things about the web, Netscape, and Photoshop -- importantly you'll want to know about the concepts of antialiasing and transparency.



Here's two versions of the same logo. Notice how the one on the right looks smoother than the one on the left? That's because of antialiasing.

How does it work? Well, if we zoom in a little bit, it should be apparent. On the left, the aliasing* (aka "staircasing" or "jaggies") is much more noticable. Antialiasing smooths out the discretization* of an image by padding pixels with intermediate colors. In this example, we have black lines on a white background, so to antialias, we pad with surrounding pixels of shades of gray.

Why gray? Well, because gray is between white and black. If we used red lines on a white background, we'd want to antialias with shades of pink.

So how does one antialias? It doesn't take much effort at all. If you use Photoshop to make your art, then chances are you've been antialiasing all along. If you've ever rasterized* some of your illustration work into an image (like that company logo you did in Illustrator), then you've probably noticed how much better your work looks when you check the "Antialias" box. In fact, some of this may be old hat to you -- but all of this information will come in handy as we move to the next topic: transparency.


Check out these images. Notice how the right seamlessly integrates into the page? It looks much more like a graphic and less like a piece of clip art. This is because of the use of transparency.

When you use GIF's on your web page, you can specify regions of transparency. In these regions, the browser does not display image information, but instead displays the background color of the web page.

The process is not as robust as you might initially think. This is not as powerful as an alpha* channel, where a whole range of opacity can be specified. The GIF 89a specification simply allows one table entry* to be designated as transparent; i.e. a pixel either has color information, or is transparent.

Format note: JPEG, though becoming an alternative standard on the web does not support transparency. See image format notes for more information.

So how do you add transparency to a GIF file? Most image-editing programs only write the GIF 87 format -- this doesn't support transparency. To convert a GIF 87 file to a GIF 89a, you'll need a special program. giftrans is a public domain program that will do this for you. Some instructions on using giftrans, along with the source are here. If you are using a Macintosh, you should check out Transparency.

Note: it seems more and more programs are incorporating this technology into their products. You might want to check out the guide to imaging software, and what products are currently supporting.

These programs basically work the same. The image is upgraded to the 89a file format, and one of the colors in the image is marked as transparent. You can see this in the sample images above. The left is a GIF 87. The right is a GIF 89a, where red has been tagged as transparent. Notice that when you place this image on a different background, the background comes through. Pretty cool, huh?

Antialiasing and transparency

Now we get to the hard part: using transparency and antialiasing. We didn't use transparency in the antialiasing example: the image is just surrounded in white which blends into the color of the page. Likewise, we didn't use antialiasing in the transparency example, because horizontal and vertical edges don't require antialiasing. (if you look at this same page with a different background you'll see which images have transparency and which just have a white background.)

Recall that antialiasing works by interpolating* between the foreground and the background (like the grays between black and white). Also remember that transparency works by designating one color as transparent.

What happens if we designate the white in the left image as transparent? It works. On this page, in fact, it doesn't differ from the image on the right. But if you look at these same images on a different background, you see where transparency is designated. You'll also see a subtle problem: the antialiasing doesn't seem quite as effective.

The problem here is that we created this image assuming a white background. The antialiasing worked by adding grays between black and white. Now, though the black is on a blue background. For effective antialiasing, we'd want the surrounding pixels to be of shades betweeen black and blue. When we tagged the white as transparent, this only effected pure white (the background). This in no way effects the grays. If you want your image to look good on top of blue you need to re-antialias and go through the whole process again. Pretty annoying, huh? It's a strong argument for a web image format with an alpha channel.

So why use transparency at all? Why not match the background of your images to the backgound of your page? This is actually a common tactic. One site that employs such devices is HotWired. In fact, because the background color of HotWired's intro page is randomized, different versions of every image on the page (one for each background color), are required. It's a lot of effort, but it works.

There are times when this tactic isn't the best solution. One case is if you don't want to use background colors, and would rather the browser just use its default background. All graphical browsers use a shade of light gray, but the exact gray differs between browsers (and even differs between platforms). In this case, the best tactic is to antialias to a background of some light gray (like 25%), and then mark the background field of the image as transparent.

Another example is if your background color isn't a simple color. Check out the example on the left of this. If you are using a 24-bit* display this might look fine, but if you are using an 8-bit display (or a graphics workstation that has run out of color table entries), you'll notice that the image is dithered*. It's a problem with browsers working in a limited color environment. Many will dither a color in an image even if the color is the same as the background. If you mark the background as transparent, though, as in the example on the right of the same page, all will look fine.


Now that you know how antialiasing and transparency work, you can be on your way to making slick graphics for your hip web page. If you are still a bit confused (or even if you aren't), you might want to check out these advanced examples. And, after you try a few graphics, you may need to check out the troubleshooting section (it's good to learn from other peoples' mistakes).
Comments? Last modified: Thu Jun 20 12:16:59 1996