WebDevelopersNotes logo

home-icon Home / Graphics / Anti-aliasing

Anti-aliasing

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 without anti-aliasing - pixellated text Text with sharp or pixilated edges.
2 color Gif – 518 bytes.
Anti-aliased text Text with the edges smoothed out –
anti-alias text.
8 color Gif – 880 bytes.

Sponsored Links

Here is one more example:

Non anti-aliased circle Non anti-aliased circle. Note the serrated or pixillated edge.
2 color gif – 175 bytes
Anti-aliased circle 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.

Anti-aliased image magnifiedCheck 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.

Anti-aliased text Text is rendered smooth when anti-aliased.
Non anti-aliased text Note the pixelated edges of non anti-aliased text.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The Australian female voice on Siri is of Karen Jacobsen, an Australian-born, NY based artist. [more...]