demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Understanding Pixel Density, Resolution and Retina Displays

technology

Estimated reading time: 2 minutes, 17 seconds

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.

Pixel density values for modern devices
Display typeDPIExample device
Desktop computer100 ~ 110iMac
Standard laptop100 ~ 135Standard Macbook
Standard Tablet130iPad 1
Standard smartphone160HTC Wildfire
HDPI Android tablet216Nexus 7
Retina laptop220Retina Macbook
Retina iPad264iPad 3
Retina iPhone326iPhone 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 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.