Retina Displays And Resolution Independence

There is a misconception that in order to get the effect of the retina display on the iPhone you need a display that is 326 dpi (dots per inch), regardless of the device. Now retina display is a marketing term of Apple's, but for the purposes of this blog post I'm going to define a "retina display" as so:

A display where a person with 20/20 vision is unable to tell apart individual pixels at a normal viewing distance

Now these are important for calculating what defines a retina display for various devices. All a retina display is doing is taking advantage of the limited resolution of the human eye, much in the same way that a film takes advantage of the limited frame rate of the human eye. But whereas with motion, the human eye can only see roughly 24 frames a second no matter what, with motion its limit is a function of the distance to the object and the quality of the eye. As such, if you put an iPhone 4 right up to your eye, you can still make out individual pixels.

For a good explanation of all of this, and for where I got the basis of my calculations, I highly recommend reading this blog post.

Calculating the DPI

From that blog post we can gain the scale factor of 3438, which is based off 20/20 vision (note this isn't perfect vision, but few people have eyesight that good). We also learn that we can calculate the dpi needed for individual pixels to be indistinguishable at a certain distance. I am going to calculate this for 4 devices: an iMac (desktop monitor), a MacBook pro (laptop monitor) and iPad (tablet) and an iPhone (smart phone).

The calculation is pretty simple. To get the retina display effect dpi "x" for a screen "n" inches away we just do:

x = 3438/n

So using this calculation and what I consider are comfortable and reasonable distances I've calculated the minimum resolution at which pixels are indistinguishable. Remember, this is for someone who has 20/20 vision, so for a lot of people this figure may be lower.

As you can see, it isn't that much in many cases. The iMac is only about 30-40dpi away. And the iPhone is actually about 40dpi past what is needed.

Resolution Independence

Of course just having a higher density screen won't make a difference. Doubling the density of the iPhone would have just made it unusable, Apple had to add resolution independence, allowing for twice the pixels to render the same item on the screen.

Some things are already resolution independent by being vectors, text for example. If you were to put some text on an average desktop monitor (~95-100dpi) and put the same text on a high res laptop monitor (eg a 17" MBP at 1920x1200, or 133dpi) and set their font sizes so that the characters are physically the same height on both monitors, you will notice that the text looks far nicer on the high res display, because it is able to use more pixels to render the same thing.

So what does this mean for an app in general. Well at the moment the resolution independence in OS X is quite buggy, and has actually regressed in 10.6. But we can still get a general feel as to what resolution independence would do for quality. Lets assume the next screenshot is taken at 94 dpi, the density of my previous 24" iMac.

Now if we scale this to a scale factor of 1.25, this gives roughly 117.5dpi. Assuming my current iMac was 117.5dpi rather than the 110dpi it is, they would have the same physical size. But as you can see from the screenshot below, various elements would be higher quality, such as the text, the menus and the close/open buttons.

Of course some things don't look better at the moment, such as the menu bar, but these are bugs. Ultimately these would have to be fixed in order to reach the pixel densities needed for a retina display effect, as increasing the resolution that far, without increasing the scale factor, would lead to eye strain as we try to concentrate on smaller and smaller items.

You don't need high pixel density to get a similar quality display to the iPhone 4, if you aren't building a smart phone. We are very close to the pixel densities needed for the retina display effect, especially on the desktop. As prices of higher density displays come down, they will make their way into consumer goods. When mixed with resolution independence we will start to see displays in all devices that appear as good as the iPhone 4, without the need to wait for them to treble the resolution.

This isn't to say that if you had 2 displays side by side and one is much higher resolution than the other, that it wouldn't look better, but to match an iPhone 4 at 12" away on a desktop, you don't need anywhere near as high a resolution.