#WEB IMAGE RESOLUTION FOR RETINA DISPLAY HOW TO#

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.

#WEB IMAGE RESOLUTION FOR RETINA DISPLAY HOW TO#

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.

Web image resolution for retina display