Aliasing


The term aliasing can be used either to refer to the distortion or error of a signal frequency when discussing physics and telecommunications, or it can be used when talking about computer graphics to describe the jagged or saw-toothed appearance of curved or diagonal lines in computer-generated images. This phenomena usually occurs in images that have a low resolution.

All computer displays show images in bitmap mode. What this means is that every image is really a bunch of tiny little squares, called pixels, that make up the image. So really, computers can't display curves that are smooth; pixels around a line can only be part of the line or not part of it: so the computer draws the line as a jagged set of pixels roughly estimating the course of the original smooth line.

When you're creating graphics for use on the internet, using images with a high resolution isn't a good option as they will take forever to download, especially for people without a high speed connection. Saving images at a lower resolution, 72 dpi is standard for web graphics, solves this problem, however then you have to deal with the problem of aliasing.

When dealing with graphics in programs such as Photoshop you can use an anti-aliasing function for text and line tools. When the computer anti-aliases a line it works out how much of each in-between pixel would be covered by the diagonal line and draws that pixel as an intermediate shade between background and foreground. This function will give your web graphics the illusion of smoothness.

In the first example below, the text was saved for the web at a resolution of 72 dpi without selecting the "Anti-Aliasing" option in Photoshop and, as a result, is jagged or aliased.

aliased_example.jpg aliased.gif

In the second example, the text was also saved for the web at a resolution of 72 dpi but this time the "Anti-Aliasing" (or "Smooth" in Photoshop CS3) option was selected and the text now appears to be smoother.

anti-aliased_example.jpg antialiased.gif
So essentially all that anti-aliasing does is trick your eye by filling in more pixels with tones that are in between the foreground and background colours to give the appearance of smooth curves.

References:
1 Kyrnin, Jennifer. "Anti-alias Information." About.com. 7 Oct. 2007 http://webdesign.about.com/cs/antialiasing/a/aa051898.htm
2 widearea.co.uk. Creating Graphics for the Web: Anti-aliasing. 7 Oct. 2007 http://www.widearea.co.uk/designer/anti.html
3 "Aliasing." Wikipedia. 7 Oct . 2007 en.wikipedia.org/wiki/Aliasing