

Once you understand pixel density, the issue is how to optimize your images for the new displays. It should also be noted that there is a similarly revolutionary leap in color range that is waiting in the wings. 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.

Due to this interpolation – a fancy name for guesswork – the image quality suffers. 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. Traditional development practices have optimized web-ready graphics at the common denominator of 72 DPI. Standard laptop 100 ~ 135 Standard Macbook Pixel density values for modern devices Display type DPI Example device “High DPI” is generally acknowledged to be any device with a display density of 200 pixels per inch or greater. Most current desktop monitors display around 96 to 110 DPI, with laptops coming in slightly higher. 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). 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. 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. This is different from “resolution”, which is a simple count of the number of pixels across the entire width and height of a device.įor example, the resolution of an iPhone 4 is 640 x 960 pixels. “Pixel density” is the number of pixels a display can fit into a fixed distance. Very simply, “high DPI” and “Retina” mean the same thing: a device with a high pixel density. 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? 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.
