An understandable explanation of anti-aliasing

Anti-aliasing is used in many modern day programs, and this article is about how it works and why it is used.

In the image below the small text at the upper left has not been anti-aliassed, whereas the one at the top right has been. The difference in quality is easy to see. How this quality is achieved is shown by the magnified versions of the same text at the bottom of the image.

The trick works because, when anti-aliasing, the program shades each pixel according to how much of the underlying image is contained within the square area of the pixel.

Imagine that we have to draw a part of a letter, but we only have one pixel to draw that small part in. What should the color of the pixel be? The diagram below shows how the color is arrived at:

Each pixel in your image can take only a single color. When anti-aliasing the program shades that pixel according to colors in the area covered by that pixel.

The above examples use black and white text, but exactly the same thing is done when anti-aliasing with colored graphics.

In general anti-aliasing in digital photographs (of natural scenes) occurs "naturally". What I mean is that each pixel recieves an amount of colored light which the pixel covers in the scene.

To give yourself an idea that pixels have area imagine millions of thin pyraminds exiting from your camera's lens into the scene. The "base" of each pyramid coveres a scene. A pixel could cover several people in a crowd for example, or half a leaf on a tree.

If a pixel of your digital photograph covers the edge of a green leaf and the red of a Ferrari, the pixel with have a color which is a mixture of those two colors. Look at the single pixels in the tilted edge below, they are a mixture of red and green. On the left you are seeing the edge of the leaf, on the right you are seeing the edge of the Ferrari.

Some people confuse anti-aliasing with blurring. Blurring loses detail, anti-aliasing retains detail. In the image below the text on the left is not anti-aliased, the three in the middle have been blurred to different extents and methods, and the one on the extreme right has been anti-aliased:

Anti-aliasing gives the eye (or rather the part of the brain which processes the eye's data) a better way of "guessing" or "estimating" the position and angle of the real edge of the object.

More graphics articles.