Saturday, September 1, 2012

To Be Resolved

I've talked a little bit before about how digital images are composed of pixels, and the limitations of various file types. Today I want to expand more upon another quality of digital images, that of resolution. Resolution defines the size of an image, but not quite in a physical sense. I especially want to talk about the scale of an image in regards to its resolution, as we are living in an interesting time technologically with regards to how we view images.

There are two reasons as to why resolution is on my mind. First, I recently completed some freelance banner ad work for a theater company. The  file requirements for the newsletter they were advertising in were miniscule - a resolution of 728x96, but a file size of under 40 kilobytes! It later turned out that the newsletter's representatives weren't sticklers for the file size rule, so we ended up going with a GIF of about 125 kb in size - very modest.

The other reason I'm thinking about resolution is in preparation for a Speed Show I'm participating in later this month. I've only seen one Speed Show in person before, and it is a difficult format to develop for. Most net art is meant to be viewed while surfing on your personal computer, so when you are faced with a room full of computers, the work needs some serious allure that reads from far away to draw you in. BYOBs solve this problem by blowing up images with projection - the images take up the same viewing area in your vision as if you were sitting at a screen. More on that later.


Most digital images are made of a file that stores pixel values in some way. All computer files have a file size, which means how much data it takes to represent that image on the computer. When I wrote about the formal qualities of file types, I mentioned how one way to reduce file size (and make a file faster to access) is to reduce the number of colors used in the image. Another method used mostly for photographs is what's called compression. A third way to alter file size is by limiting the resolution of an image. Think of it this way: if a digital image is essentially a grid of colors, the grid has a certain length and width before the picture ends. This however does not imply a physical size, it just says how many values we are storing. The capacity for values is what resolution is: the size of the grid.

This image has a resolution of 600x575 pixels. That's pretty large for a GIF.

Computer displays have resolution, too. According to a recent poll, the most common resolutions of monitors online are 1366x768 pixels (HD), followed by 1024x768 (XGA). Screen resolution has increased significantly since the 1980s, when your average screen had a resolution of 320x240. Most old (read: tube) TVs had approximately this resolution as well, but since they used analog signals instead of digital signals, the pixel edges weren't apparent.

One important distinction to make between the displays of the 1980s and today is that physical screen size has not increased by 4x across the board. Today, we use screens of many more sizes, however the resolutions are typically much higher. We can think of resolution as a measure of detail in a display: that is, the more pixels that one can display in an area of fixed size, the higher the resolution. There's a unit of measurement for this: pixels per inch, or ppi.

You might have seen a similar term before: dots per inch, or dpi. Dots refer to the CMYK printing process, where tiny cyan, yellow, magenta, and black dots overlap to blend into other colors and make a picture. The dots are artifacts of modern printing techniques, including ink-jet printing (a computerized head squirts tiny dots in a pattern to make a picture) and screen printing (more complicated). Dots per inch and pixels per inch are similar measurements, but they are not quite analogous.

example of the cmyk printing process - note the bleed of colors on sharp edges

Printed images are typically produced at a standard resolution of 300 dpi. At 300 dpi, a photograph held at about a foot away from your eye appears to have no artifacts of the printing process - "real enough." Computer resolutions are all over the place, however. 72 - 96 ppi used to be the standard in the 1990s for computer screens. Since then, we've seen ppi drop in order to produce big, cheap LCD TVs with "good enough" resolution, and we've seen ppi grow in handheld devices, most notably due to pressure from the iPhone, which boasts a 300 ppi screen. The human eye can perceive up to 400 ppi at one foot in ideal conditions, however we interact with computers at less than half that resolution regularly.

This variation in level of detail has an interesting effect on digital image files, since they have no native physical size: they appear larger or smaller, depending on the screen. There is no way that I could develop an image of a postage stamp that would appear postage-stamp-sized on every display it met. This means that people who make images have to constantly consider problems of scale and legibility. For instance, photographers tend to prefer working with very high resolution images, so that regardless of screen size a sufficient level of detail can be observed.


Not everyone has the luxury at working in high resolutions, because the larger the resolution, the larger the file size. This is why most early computer graphics and many websites still use low resolution images. Many people enjoy the mosaic look of low resolution images, such as the pixel art community. In order to better highlight this, pixel art is often displayed at larger than its native resolution, in order to heighten the sensation of interplay between the colors' edges.

dithering in the "dog hood" image

It's not entirely clear how much say people other than software developers have when it comes to how images are displayed online. In the late 90s, Apple introduced a method of displaying fonts that used anti-aliasing, which just means smoothing edges at the sub-pixel level. The way it works is the computer blows up an image, treats each pixel as a number of "sub-pixels," and then applies a smoothing algorithm. This pixel is then scaled back down by treating each pixel as the average color of its sub-pixels.

Software developers were hugely supportive of the legibility that font smoothing brought to screen and print applications, since fonts have to be legible at many, many sizes. Later on, similar methods began to be adopted by browsers for displaying images on the web - the assumption being that most images online are photographs, which look good when smoothed. I've included an example of a low-resolution image that's being stretched up to a high resolution. As you can see, the smoothing effect can useful, but is not always ideal, especially for low resolution drawings or pixel art.

original size - 34x38
smoothed scaling - 357x400

"nearest-neighbor" (pixel-based) scaling

Your average web user does not tend to consider how a browser treats the images they see, but so far web designers and artists online have had to adapt to a pretty arbitrary group of scaling rules. The pro in this situation are that there are multiple methods to displaying digital images that we would not be able to use otherwise. The con is that there is no long-term reliability with display like there is with a physical object. Add to that the changing monitor ppi over the past 30 years, and you can see how hard it is for digital images to remain accessible and predictable.

Leaving the screen

Generally speaking, people are attracted to physical objects. A good number of people experiment with methods of transferring "volatile" digital images to more stable physical configurations. This often involves printing. Remember though that standard dpi for print is around 300, where most modern computer screens are a little over 100 ppi. This has the effect of making images look smaller than on screen when they print.

300 dpi print vs. 100 ppi image on screen

Computers can also display animations and vector images (images that can scale to any resolution), neither of which can be sufficiently recreated as physical objects other than on screens, though I would not be the first to admit to making the attempt. Another method of displaying digital images in physical space is to use a projector. Projectors have resolutions, just like screens, but they also have focal lengths - limits on how big or small one can make an image before it becomes blurry. With a decent sized room and a good projector, it would not be hard to display an image with a resolution (on the wall) of less than 1 ppi.

17 ppi projection. Since focus becomes an issue, pixels are not as visible.


I'm concluding this with a bit of speculation, and anyone that has an idea to chip in should do so. One method of measurement that we have not discussed is the apparent width of an image in your vision. The average human has a 180 degree field of view horizontally, and 135 degrees vertically. (Jeremy Bailey, if you will make a video with a giant CG lime wedge extending from your field of vision, you will be my hero.) The closer you are to an object, the more of your field of view it inhabits. Your pinky, held at arm's length, is about 1 degree wide. I sit about 3 feet from my computer screen, so the display takes up about 30 degrees of my vision. Most people hold their 6" wide smartphones 10-12" away from their faces - that's comparable, 24 degrees. I would be interested to know the average size of paintings and other images by time period, and also learn more about how viewing habits change. Everyone knows that big paintings have more "presence," where small paintings tend to be more personal and intricate - this relates to viewing distance. I want to know where the computer viewing experience fits in, since it is not quite the same thing as looking at small or big static objects.