May 9, 2012

Note: This article contains non-retina images, which are not pixel-fitted. The irony is not lost on me.

In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually quite important. This is something everyone should know, even people who are not designers.

Most icons and logos are stored in vector image files that specify perfect mathematical representations of their shapes. Unlike JPG and PNG images, vector graphic files don’t tell the computer how to display their contents in pixels that can be displayed on a screen; for a vector graphic to be displayed, the computer has to perform a translation from the mathematical vectors into something that can be displayed with pixels on the screen.

This translation process is relatively simple: the computer takes the mathematically-defined lines, lays them on top of a pixel canvas, and then fills in each pixel that the lines enclose. The result looks like this:

The S vector path is perfectly smooth because it is defined using math that is not constrained by display technology. The rasterized S has jagged edges because there are simply not enough pixels to faithfully show what the vector lines represent. Display technology is the limiting factor here, and it has been for many decades. To get around the problem, computers use a signal processing technique called antialiasing, which hacks your brain into perceiving more definition than can be displayed on the screen.

A gift from signal processing #

Antialiasing repurposes pixels into building blocks that approximate what should be displayed on the screen instead of what is displayed on the screen. Instead of filling in boxes (pixels) with “on” or “off” states based on how they are enclosed by vector lines, antialiasing uses some visual and perceptual tricks to get closer to the real mathematical image. The most common trick uses things called half-pixels, which are pixels at the edges of paths displayed at different intensities around shape edges, to mimic the effect of having higher resolution. Here’s what antialiasing with half-pixels does to our S glyph:

As you can see, some of the pixels that were not quite enclosed by the vector path are now displayed as shades of gray. When you zoom out, those different intensities simulate the look of a sharp edge. These half-pixels can fill in gaps that solid “on” pixels cannot. But don’t let this trick fool you; the antialiased S is still not actually sharp. Antialiasing is a hack. It tricks the brain into perceiving a sharp shape when in fact it is looking at a gooey form. This is why reading on Retina displays feels so much better; you’re not looking at blurry shapes.

Until we have Retina displays everywhere, we’re going to have to live with antialiasing techniques. The problem is that computers are terrible at doing it automatically. Because the computer doesn’t know what is in the resized image, it doesn’t know where to optimize using half-pixels. This is why I included manually antialiased images with the Markdown Mark. Look at the demonstration below. The right side of the image shows icons that were automatically antialiased by Photoshop and the left side shows the manually fitted ones I included with the Markdown Mark:

The difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that’s two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.

Let’s get a closer look so you can see exactly how the problem is presented in pixels on the screen. The top image in the figure below, which was fitted by a human, shows the correct border size of 3 pixels, while the computer-resized image shows 3.3 pixels. Zoomed out, the 30% half-pixel makes the edge look blurry (this is the 66x40 version of the Markdown Mark from above).

Also notice that similar issues occur when computers antialias typography. I pixel-fitted the M glyph to solid edges in my version, while the computer made poor choices in its attempt to maintain ratio at the expense of clarity.

Now that you’ve seen the importance of pixel-fitting, you probably want to know how to do it yourself. If you’re not a designer, it’s not entirely straightforward and it requires a bit of patience and knowledge of the vector tools in image editing software like Photoshop. But the process is easy to describe: after you resize a vector image onto a raster plane (like a Photoshop canvas), you should zoom in to the pixel grid and manually refit the paths to pixel edges where it makes sense. In Photoshop, you should use the Direct Selection Tool to select the vector edges and then nudge them slowly until they fit perfectly to the edges of physical pixels. This only really works to sharpen straight lines and to define the furthest edges of rounded paths. To display a curve, you have to use antialiasing because there are simply not enough pixels to show a soft curve on the screen (see the very first, jagged S image above).

Sometimes, the difference is incredible. For example, here is Hulu.com’s logo, taken directly from the website. It is a badly antialiased graphic that is seen by millions of people every day:

The top image is the logo currently live at Hulu.com. The bottom version is a pixel-fitted mockup that I made (I probably overcompensated, which resulted in some lost some detail in the P and S). The difference is obvious. A closer look makes the human changes even more apparent:

The Hulu logo is a gooey, blurry mess that is seen by millions of people every day. Because it is at the top of every page on the entire site, it sets the tone for the quality of the experience. It should have been pixel-fitted.

What this means #

Using automatic antialiasing when resizing vector graphics leaves a lot of important decisions up to computer graphics software. While the results are generally decent, they’re not perfect. So, for important icons and logos– really, for all rasterized vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.

We’re slowly starting to see displays with higher pixel densities that can more faithfully reproduce vector paths on the screen, like Apple’s retina displays. But they’re not widespread, and most software doesn’t optimize for those kinds of screens. Until they are commonplace, pixel-fitting is an essential task.

You should follow me on Twitter here.

Special thanks to Morgan Allan Knutson and Mac Tyler, who helped me get the details right.

5,402 Kudos