Sub-pixel anti-aliasing

Anti-aliasing has been around since the early days of computer graphics. Because raster graphics are defined by pixels, and vector graphics have to present themselves via pixels on the screen as well, electronic images are inherently blocky.

Traditionally, computer graphic artists use the built-in anti-aliasing schemes in their graphics software. For text on the web, the user’s settings will determine if and how the text is anti-aliased. In some cases, a designer will go as far as to manually anti-alias elements of images and graphical text in order to ensure maximum sharpness with minimal rough edges.

Normally, anti-aliasing uses a formula that determines how much of an edge passes through the area of the pixel that must represent it on screen. For vector graphics, this is a constant consideration when displaying on the screen. For raster graphics, the operation must take place when converting vector to raster, for setting text, and when re-sampling an image.

When determining how much of a vector or higher-resolution edge passes through a particular pixel, it defines the blending of that pixel’s color accordingly. Depending on the algorithm, this produces either a sharp, smooth, or blurry edge (the latter should usually be avoided in most cases).

With the increased prevalence of LCD flat-panel monitors, another method of anti-aliasing has become available. Since all color monitors use individual red, green, and blue pixels to produce whole pixels (although in most CRT’s, the monitor pixels do not directly correspond to the video signal’s pixels), there is an advantage when the red, green, and blue sub-pixels are in line with each other.

Rather than modifying the shade of a whole pixel to create an anti-aliasing effect for that pixel, the hue can be modified as well in the case of LCD monitors. The effect causes the edge to be represented through the individual sub-pixels instead of the whole pixel. This is an effective increase in resolution of threefold.

To clarify how this effect works, the red sub-pixel is always the first or the furthest to the left in a whole pixel. The green sub-pixel is in the center, and the blue lies on the right side of the whole pixel. If a diagonal line or a curve passes through the whole pixel, the shade of the red, green, and blue sub-pixels are changed individually so as to represent a change in brightness that is represented with a difference of brightness in the individual sub-pixels.

Technically, anti-aliasing in this fashion will be visible as a red and yellow shift on the left side of a dark area on a white background. Similarly, the right side will show a cyan and blue shift in whole pixel color. When displayed at a 1:1 ratio on a LCD flat-panel monitor, this color shift will cause the brightness of the sub-pixels to be distributed so that the curve or diagonal line actually spans the sub-pixels independently of the whole pixel value.

The following examples illustrate how sub-pixel anti-aliasing manifests itself:

In this example, the circle and text on the far left have been anti-aliased using a sub-pixel method. The color shift of the left edges is red-yellow, and the color shift of the right edges is cyan-blue. The varying hues and shades within these ranges also apply further anti-aliasing in addition to the increase resolution given by using sub-pixels to define shapes and curves.

The circle and text on the right were scaled down using whole-pixel anti-aliasing. While this provides a far smoother effect than rendering the image without any anti-aliasing at all, it does not provide the level of smoothing that the left image has.

If you are using a CRT, you probably will not see this effect. This technique is only truly effective on an LCD flat-panel display.

Here, a 4X close-up of the circles in the previous example is shown. Notice how the color shifts in the pixels on the left curve, while there is not a shift in the color on the right curve.

Here, a close-up of the actual sub-pixels on the screen, and how they distribute the brightness when the hue of the whole-pixels on the anti-aliased edges is adjusted. Notice how the detail is distributed differently. On the left, an edge is using sub-pixel resolution. On the right, the edge is defined only by whole pixels.

While this effect only works on LCD monitors because of the 1:1 pixel ratio, it is still an important technique to use if the user is known to use LCD and not CRT monitors. This is rare for web design now, but in ten years, it will be widely useable as CRT's age and wear out.

Microsoft and Adobe currently use font-rendering technology that utilizes this sort of method. Since LCD flat-panels are not widespread enough, images published on the web cannot benefit from using sub-pixel anti-aliasing. Since this will change as LCD’s become the norm, it may be a good idea to know a quick-and-dirty method of using this technique.

In Adobe Photoshop, the image to be down-sampled should be at least twice the resolution of the final image. If the final image will be 100px wide, then the working image should be at least 200px wide.

Flatten the image, text and all. In the Channels tab, select the red channel and nudge it to the left by one pixel. Nudge the blue channel to the right by one pixel, and leave the green channel as it is.

Now, re-sample the image to 50% of the current size, or the size of the final image. Use a sharpen filter on the image before doing this if the image looks blurry. The red and blue edges should be merged into the image so that at 1:1 zoom on an LCD monitor, the color change of the edges should not be noticeable.

Microsoft and Adobe use far more complex algorithms to determine the blending of the edges according to sub-pixel color values, but this method will achieve a similar effect.