weballey logo
 
left Web design - anti-aliasing backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

LAYOUT

GRAPHICS

palettes
examples
web palette
< anti-aliasing >
dithering
downsizing
backgrounds

  aliasing     Aliasing is a phenomenon often associated with jagged edges on characters. Or 'staircased' running lines, that only ought to be slightly skewed. These undesired effects are caused by the limitations of display technology. Tricks used to counteract this, are commonly known as anti-aliasing.
    Aliasing applies however to a much larger number of phenomenons, generated by digitally rendering analog information. High ticking or hissing noises of a synthesizer or moiré patterns when somebody is showing a chequered suit on TV. Color shifts at fine lined patterns. Wheels rotating backwards, on a car that is moving forward.
    On web pages you will most likely encounter just the graphical component of aliasing. Jaggies on characters, round shapes or slightly slanted lines. On paper this is commonly solved by using a higher resolution. Current laser printers will print 575 dots per inch or more. Professional print work will be at least 2400 dpi.
    On monitors this is not an option. Here the resolution is much lower. 72 dpi is standard on a Macintosh screen, 96 dpi for PC's. Worse than even our old 9 pin dot matrix printer. We will have to come up with a different solution. The most widely used technique is mixing colors of the shapes and backgrounds being displayed.
    Skewed lines will normally appear stepped on a computer screen. Computer language exist in zero's and one's, counting binary. Zero is off, one is on. The skewed line is translated into a chessboard pattern. If the center of the line is inside a square, the square will have the color of that line. If it is outside the square, it will take the background color. The smaller the slope of the line, the worse it gets. The line will be divided in two or more horizontal segments.
    Using anti-aliasing, the colors of the line and the background are mixed. The proportions are determined by the part of the line that covers each square. If the line just touches the square, the background color will dominate. If half the square is covered, the ratio will be one on one. When most of the square is covered by the line, the line color will dominate.

lijn alias lijn anti-alias

    It may be a crude approach, but it works surprisingly well. Your eye will be tricked in seeing round circles and skewed lines. Jaggies on characters disappear, take a look at the image at the top of this page. The small lower 'a' is no sharper than the upper, but nevertheless it seems very smooth. The large lower 'a' clearly shows the anti-aliasing technique. An illusion of a smooth line is thus created. No wonder this technique is very popular in a lot of graphics software. Adobe Illustrator(!) is a surprising exception.
    Anti-aliasing seems to work best at relatively large areas with the same color. Small areas or thin lines will dissolve into the background. Especially small fonts (smaller than 9 points) will suffer, get blurred, and possibly unreadable. Compare the two texts below, the right one is much clearer than the left. So you should consider not to use anti-aliasing on small print.

small text

    Anti-aliasing adds (intermediate) colors to your image. Your graphics will get larger (in bytes). There is simply more information to be stored. As always it is a trade-off between image quality and file size. You'll just have to experiment a bit, to determine the amount of colors you need to get an acceptable image.
    In graphics with only horizontal, vertical or diagonal lines, anti-aliasing is superfluous, it will not enhance hour image. It may even harm it, the file size will get unnecessarily larger. Undesired sawtooth edges may appear when dithering to an intermediate color. In such cases you should turn of anti-aliasing in your graphics editor.

bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right