Wednesday, September 14, 2011

What Is Anti-Aliasing, and How Does It Affect My Photos and Images?

anti aliasing
Anti-aliasing is a word that’s often thrown around by photographers and gamers when dealing with graphics and images. Take a look at what anti-aliasing is, why we use it, and, most importantly, when it’s best to not use it.
It’s an important part of imagemaking and photography—anti-aliasing is certainly something that should be understood as thoroughly as possible to create high quality images. We hope you’re prepared for a very geeky article, as you have lots of discussion of math and science mixed in with today’s explainer article. Keep reading!

Vectors and Pixels, and Why Cameras Take Pictures With Pixels


You may remember an article from a year ago where we talked about the difference in Vectors and Pixels. There are a number of fundamental differences between the two: pixels are ordered arrays of light, pigment, or color; vectors are mathematical representations of lines, shapes, gradients, etc. Vectors are precise; they exist at absolute coordinates on an algebraic grid. Because they are so absolute, there’s no blurring the line between where they are and where they are not. Even if a monitor cannot render a line segment’s infinite thinness (it always has to show it in pixels), it still is as thin as a line existing only in a theoretical mathematical world.
That’s the problem with photography—light isn’t as precise as it would need to be to be captured in a perfectly mathematical way. It’s likely that even if we developed cameras capable of reading the locations of individual photons with quantum precision as they hit the sensor, because of the weird nature of physics at the quantum level, the individual particles may actually appear in multiple places on the sensor at the same time. This means it may be absolutely impossible to get the absolute location of that single particle of light at the time it hit the sensor—photography is only an approximation of how that light is captured. The stopping action (ability of the camera to create sharp images from moving objects) can never be perfect—at least it seems very, very unlikely.
Pixels are handy because high-resolution images can approximate colors and shapes, accurately recreating an image in a way that is similar to film-based photography. While this property of pixels and its use in photography is not anti-aliasing exactly, understanding this property of digital photography is one of the best places to start a solid understanding of what anti-aliasing is.

Interpolation: Creating Something From (Almost) Nothing?

Digital photography is an approximation of the colors and values present when light hits a sensor—in this same way, anti-aliasing is an approximation of image data using a technique called “Interpolation.” Interpolation is a fancy-pants math term meaning data created based on the trends of existing data, i.e. an educated guess on what might actually be in that spot if more data points were available. While it is more complicated that simple guessing—there are formulas and proper methods for Interpolation—it can’t be expected to be a perfectly accurate representation of the image data that is actually there. Even the smartest math can’t create something from nothing.
Aliased Antialiased-lanczos Antialiased
When we look at these computer rendered checkerboards, we can begin to understand what anti-aliasing is doing to improve and approximate images. On the leftmost image, there’s no interpolation of data—the checkerboard is rendered in black and white pixels as it recedes back in perspective, and quickly becomes a mess. The visual errors and artifacts created are what we call “aliasing.”  The second and third images above use different forms of “anti-aliasing” to better approximate how human eyes (and cameras) perceive light.
sshot-459 sshot-460
Those images, however, were a translation of absolute mathematical images into pixel based images. How does anti-aliasing apply to your photography? When images are resized, either enlarged or reduced, the image is interpolated based on the data that exist in the image document. The left image is shrunk using the “nearest neighbor” resampling in Photoshop—in other words, it isn’t anti-aliased (you can literally call this aliased). The image on the right is reduced and anti-aliased, creating a much truer image at that small size.
Enlarged images also benefit from anti-aliasing—graphics programs make their best guess based on the data in your image. Keep in mind when you are upsampling (enlarging) images in a graphics program, that you will never actually get more resolution out of a digital enlargement—the kind of interpolation being done can make a good guess as to what should be there, but it’ll never know for sure. Your edges will be soft, and get softer as the photo gets enlarged more and more.
A good rule of thumb is that you can always downsample (shrink) your images without loss of quality from anti-aliasing. Upsampling (enlarging) makes the anti-aliasing very obvious, adds no new resolution, and should only be done if it can’t be avoided.

Anti-Aliasing and Vectors: Why Anti-Aliasing Makes Videogames Look Better

If you’ve played a PC game in the past 15 or so years, you might have seen video options that included settings for anti-aliasing. If you remember when we discussed vector shapes existing in an absolute position, you should begin to understand why anti-aliasing is important to video games.
3 Dimensional forms are created in vector polygons, and these polygons exist in a math only realm. Anti-aliasing in video games has at least two goals: firstly it wants to be able to render the absolute, hard-edged lines of the polygons in a form that looks decent on a pixel-based monitor; secondly, anti-aliasing better replicates the imprecise way that photography and human eyes perceive light.

Anti-Aliasing and Typography

On a final note, there are plenty of occasions where anti-aliasing is not ideal. If you’ve ever worked around graphic designers, you’re likely to have heard them complain about typography in Photoshop, and how inferior it is to Illustrator—and they’re right.
Both of the letters above are pixel based typography, with the left one being aliased, the right one anti-aliased. Neither are good representations of typography, or at least that typeface. It is acceptable to render a font on screen with anti-aliasing, but for print, it can have some disastrous consequences.
When you think about what letters are, they don’t really follow the same rules that digital photography requires. Letters are abstract ideas and absolute shapes—they fall better into the “pure math” category of vector artwork. And depending on the type of printing process used to create them, those pure math vector shapes become absolutely important.
This image above was created with anti-aliased type, and then most likely offset printed. When we look closely we can see why that’s bad.
It becomes clear very quickly that these anti-aliased forms did not hold up well when printed this way. This is an example of how anti-aliasing (as well as pixel-based imaging) can be inferior when rendering typography.
Of course, had this been an image (like a photograph) and not the abstract forms of type, it would have held up quite well.
Type, being an abstract medium, requires the precision of vectors to hold up under the kinds of printing processes that don’t use inkjet dots to create an image. Even at very close distances, we don’t see any dots or evidence that anti-aliasing that went into the files used to print this Coke can.
Of course, most HTG readers won’t be offset printing most of their photos, so pixel-based typography printed from dot-based printers will work out just fine. Simply be aware of your anti-aliasing when you’re working with typography and when you’re working with photography—you’ll find you’re better prepared to make the right choices that will give you the best possible images.

If you have any questions regarding anti-aliasing and your photographs you feel we haven’t answered, or maybe you think we’ve left something important out, feel free to let us know about it in the comments below.
Image credits: Varena #1 by hasensaft, available under Creative Commons. Blurred umbrella portrait by Shannon, available under Creative Commons. Dragon Age 2 Demo Ogre VH by Deborah Timmins, available under Creative Commons. Anti-Aliasing Images by Loisel, available under GNU Free License.