Resolution vs. Density vs. Pixel Ratios
September 27th, 2012
It’s easy to confuse these, so here’s the gist:
The display resolution of a screen describes the total amount of pixels available in each dimension—for example, the original iPhone has a resolution of 320×480 and a 2012 27-inch iMac clocks in at 2560×1440. Some people use terms like “VGA” resolution for some of the more popular resolutions (VGA is 640×480). Don’t bother trying to memorize all of them, as there are too many screen sizes these days.
Pixel density, on the other hand, is how many pixels fit into a fixed amount a space, and is most often given as pixels per inch (ppi) or dots per inch (dpi). These units are the same and can be used interchangeably. For example, the original iPhone sports 163 ppi, while the 27-inch iMac has a density of 109 ppi. It follows that the iMac compared to the old iPhone has a much higher resolution but a much lower pixel density.
An other term used is “pixel ratio”, especially when dealing with high-density displays in JavaScript and CSS. The pixel ratio specifies how a physical display pixel compares to a pixel on a “normal” density screen. A “normal” display is anything between about 100 ppi (desktop, laptops) and 175 ppi (mobile), give or take. “Retina” displays are roughly 200 ppi and up, give or take.
So what is “Retina” exactly?
Glad that you ask. First off, “Retina” is a marketing term Apple uses to say something is “high-density”, but for the sake of simplicity I’m liberally applying this term to anything that’s not a “normal” density, or more specifically any display where, by default, one CSS pixel is larger than one physical screen pixel.
A screen that is, in Apple-speak, called a “Retina” screen has twice the pixel density of a “normal” screen with the same physical size. That’s four times as many pixels. There’s also some in-between densities on some Android phones, for example the Google Nexus One phone has a 1.5× higher pixel density than a “normal” phone. This is equal to slightly more than 2× as many pixels. In Android-lingo, that’s called a “high DPI” phone.
Read on in my ebook! 🙂
