Digital content creators are abuzz about “high DPI” and “Retina” displays: how they are changing the nature of the web and complicating the design process. Before telling you how to develop images for these new devices, it makes sense to understand the basics of the technology: what is high DPI, and why is it significant?
Very simply, “high DPI” and “Retina” mean the same thing: a device with a high pixel density. “Pixel density” is the number of pixels a display can fit into a fixed distance. This is different from “resolution”, which is a simple count of the number of pixels across the entire width and height of a device.
For example, the resolution of an iPhone 4 is 640 x 960 pixels. All of these pixels – a pixel being the smallest dot of color that is possible to show on a screen – are crammed into a display that is two inches across.
If we compare that to an old VGA desktop monitor, the monitor will have a similar resolution, but a much larger physical size, and thus a significantly lower pixel density.
If we divide the physical width of the display by the number of pixels displayed horizontally, the result is the number of pixels per inch (ppi, also commonly referred to as dpi).
Most current desktop monitors display around 96 to 110 DPI, with laptops coming in slightly higher. “High DPI” is generally acknowledged to be any device with a display density of 200 pixels per inch or greater.
| Display type | DPI | Example device |
|---|---|---|
| Desktop computer | 100 ~ 110 | iMac |
| Standard laptop | 100 ~ 135 | Standard Macbook |
| Standard Tablet | 130 | iPad 1 |
| Standard smartphone | 160 | HTC Wildfire |
| HDPI Android tablet | 216 | Nexus 7 |
| Retina laptop | 220 | Retina Macbook |
| Retina iPad | 264 | iPad 3 |
| Retina iPhone | 326 | iPhone 4S |
Traditional development practices have optimized web-ready graphics at the common denominator of 72 DPI. A “high DPI” device displaying such an image must double or even quadruple the number of pixels in the graphic to provide the impression that it is roughly the same size on a Retina display. Due to this interpolation – a fancy name for guesswork – the image quality suffers.
In reality, “Retina” displays are not as far as the technology can be taken: to paraphrase physicist Richard Feynman, there’s still room at the top for further improvement, although it is likely that subsequent advances will be more incremental in nature. It should also be noted that there is a similarly revolutionary leap in color range that is waiting in the wings.
Once you understand pixel density, the issue is how to optimize your images for the new displays. For bitmap images, the most important point in this new web development process is one that I’ve continually emphasized here – always retain the very highest resolution version of your images.
Photograph by Macroscopic Solutions., used under a Creative Commons Attribution-NonCommercial 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
