Hi DPI Explained - What Are The Web Design Implications?

HiDPI - What is it?

In the simplest terms possible, an HiDPI display is one that packs in more pixels per square inch than a regular display, to the extent that individual pixels are indistinguishable to the human eye at a typical viewing distance. Doubling the resolution (quadrupling the pixel count) seems to have emerged as the 'standard' implementation of this, lead by Apple's Retina display.

How to Calculate Pixel Density

This video by the good folk at MKBHD, although a little dated with reference to upcoming HiDPI products, gives a decent overview of pixel density, how to calculate it and how it relates to HiDPI displays.

Formula to Calculate Pixel Density - PPI

To calculate the PPI (or pixel density), take the number of pixels on the display and divide it by the area of the display. Here we use a standard desktop display.

(horizontal resolution x vertical resolution) / (display width x display height)

(1920 x 1080) / (20.5" x 12.5")

2,073,600 / 256.25 in. sq

= approx 90ppi

Keep in mind that this is a somewhat imprecise calculation as the viewable area of the display may be slightly different to the published display size.

Brief History of HiDPI

The iPhone 4 lead the charge and Apple coined the term 'Retina' display to describe the HiDPI display. The iPhone simply doubled the resolution of the display from 480x320 to 960x640. Since then Hi DPI displays have been included on mobile phones from a range of manufacturers, tablets and now even desktop computers, with the latest MacBook Pro computers sporting Retina displays.

So what's the go with these displays, why bother? Well they look great, and provide an awesome user experience. They also provide brands with a unique selling point - a point of difference between product lines and brands. The better we can make things appear, the more likely we are to engage our audience.

The reality is that HiDPI is set to become the new standard just as 'HD' did with TV's a few years back. What seemed a massive advance in technology (HD - 1020x1080) pretty soon became, the 'norm'. The same will apply for HiDPI displays - as consumers get a taste for it, their expectations will be raised along with the benchmark.

What are the Considerations for Web Designers

Native apps were the first to benefit from the high density graphics and images as developers scrambled to update their applications to be compliant. This process was made as easy as it could have been thanks to Apple's SDK. But what about web developers and designers?

There are various implications for web designers to cater properly for HiDPI displays. In general terms:

Code - Media queries to ascertain device screen resolution and work out the Device Vs CSS pixel ratio.

Graphic assets - Create image graphics - anything that isn't displayed as html/css, at the double resolution size during the graphic design stage.

This article by Smashing Magazine provides an in depth look at some code and presents a range of ideas and the pro and cons of various implementation methods.

One of the downsides of Retina graphics is the additional bandwidth and potentially load time increases as sites serve up larger graphics files. As such, web designers will need to be more scrupulous about the use of graphics and would be well advised to reduce the size of logos and banner images in general, as well as utilising CSS/html as much as possible. These are web design best practice tips regardless of the new challenges that HiDPI will raise. The other obvious downside of building HiDPI sites is the additional time and cost that will add to the project.

Go Forth and Make the Web Beautiful

HiDPI enabled devices present web designers with a fantastic opportunity to make the web a stunning place and provide the end user with an captivating experience. With good planning and a focus on future proofing, you can reap the benefits of HiDPI while navigating through the challenges.