Anti-aliasing

Anti-aliasing is a technique which causes the edges of objects to be rendered smooth. Before I detail anti-aliasing and how it is achieved, let us first look at some text in both smooth (anti-aliased) and non-smooth (pixellated) formats.

	Text with sharp or pixilated edges. 2 color Gif - 518 bytes.
	Text with the edges smoothed out - anti-alias text. 8 color Gif - 880 bytes.

Here is one more example:

Non anti-aliased circle. Note the serrated or pixillated edge.
2 color gif - 175 bytes

Anti-aliased circle. Note the smooth edge.
26 color gif - 1110 bytes

In addition to the visual differences, what else did you notice in the examples?
The non anti-aliased images are 2 color gifs while the anti-aliased ones have several colors and this is the secret of anti-aliasing. Anti-aliased images will have many more colors than their non anti-aliased counter parts because the extra colors are needed to create smooth edges. The additional colored pixels are placed at the edges and carry varying hues of the same color as the object so that they tend to merge with the background giving a smooth look to the edges. If an object is not anti-aliased, its edges would appear pixellated or jagged.

To view the pixels at the edges of the anti-aliased circle, let us enlarge the above circle image.

Check the several pixels of varying red color. These pixels gradually decrease in intensity, merging with the background color. This gives a smooth appearance to the circle.

When to use the anti-aliasing feature

Anti-aliasing should be used for objects that have curves such as ovals, circles or text in large font sizes. Since anti-aliased images will contain more colors than their non anti-aliased counterparts, it follows that the anti-aliased images will be larger in file size. Keeping that in mind, you need to optimize the images so that they have the minimum file sizes with anti-aliased turned on. For details refer to the Optimizing Gifs and Decreasing the file size of Gif images.

Anti-aliased text

All image editing tools provide anti-aliasing feature for text. Like the circle above, anti-aliased text appears smooth.


Text is rendered smooth when anti-aliased.

Note the pixelated edges of non anti-aliased text.