How do you future-proof your imagery so it looks great now and takes advantage of emerging technologies like high-dpi (Hi-DPI) screens and new improvements in HTML to actually present imagery for Hi-DPI? The answer is simple; we’ll take care of the display part of the equation if you make sure your imagery is up to the task. We’ll take a look at the underlying concept of how imagery is presented on Hi-DPI devices and how you can prepare your imagery to take advantage of it.

Pixel Density

Pixel density is a measure of how close together the pixels are packed on your laptop, tablet or smartphone’s display. The most popular way to measure pixel density is “pixels per inch”. This is often abbreviated as PPI. It is defined as the horizontal or vertical density (for square pixels), as those are the same but the density along the diagonal is lower. Square pixels are the norm (otherwise those densities would be different). An increased pixel density allows for more detail to be shown. Displays with a higher pixel density will give clearer and sharper images.

A key thing to note is that when pixel density is doubled, the amount of information shown is quadrupled. As we go from 1ppi to 2ppi the pixel density doubles. At the same time, the pixel count quadruples. From 2ppi to 4ppi, we see the same pattern. A doubling of pixel density leads to a quadrupling of pixel count. As we move towards screens with a higher pixel density, the amount of information shown increases even faster.

Most current desktop monitors display around 96 to 110 PPI, with laptops coming in slightly higher. Hi-DPI is generally acknowledged to be any device with a display density of 200 pixels per inch or greater.

Current Smartphones, tablets (and more recently laptops) use smaller displays with larger PPI rating. Devices using Samsung’s Super AMOLED technology, HTC’s S-LCD, Microsoft’s Surface Pro, Apple’s Retina displays and Nokia’s PureMotion are all examples of screens with more than 200 PPI.

A Quick History Lesson

The first iPhones had a resolution of 320×480, with a physical screen size of 3.5″. The iPhone 4 has the same physical screen size, but was the first to have a Hi-DPI screen, with a resolution of 640×960. This was accomplished by doubling the physical pixel density; for each pixel in the screen of the iPhone 3G, both horizontally and vertically, the iPhone 4 had four.

In order to keep compatibility with existing mobile web apps a new concept was introduced: the device-independent pixel (DIP). What this means is that the screen keeps a virtual resolution of 320×480, the same as previous screens, but for each DIP, there are four physical pixels in the same space.

This is the reason the screen looks sharper; the device is capable of displaying literally double the visual information (in both directions) in the same space. Retina devices have a pixel density of two, while some smartphone screens have a pixel density in excess of three, meaning there are nine physical pixels for each DIP.

What this means in practice is that when we create imagery of our work that will be displayed on mobile devices (and Hi-DPI screens on larger devices like Apple’s MacBook Pro Retina), we need to consider whether to save larger imagery to allow sharper viewing on these sorts of screens.

Preparing your imagery

You might expect Hi-DPI graphics to be saved with a higher DPI resolution, but that’s not the case - you’ll need to ignore anything you’ve learnt about preparing imagery for print! All you need to do is save Hi-DPI versions of your images at twice the size they’ll display, so a 200x200px thumbnail image would actually need to be saved at 400x400px. This supersized image is then displayed in the original image size dimensions (200x200px), which helps create that smooth and crisp appearance on high pixel density screens.

However, an intelligent platform like Fabrik is designed to display your imagery at lots of different sizes based on the theme and layout choices you make, and the screen size that your viewers are using. So how do you deal with that?

When you upload imagery to the Fabrik Media Library our image processing technology saves a series of different sized versions of that image for display at key sizes and pixel densities. From mobile screens to tv and billboard display screens, it’s our job to make sure that the most relevant sized version of your original image then gets served to whichever sort of device and screen asks for it. As long as your original image meets the size requirements, we can save off as many versions underneath that original size as we need to.

The best solution then, is to be mindful of where your imagery will be used and to make sure that both the pixel dimensions of the image are suitable, and that the file format you’re using is suitable. At the time of writing there is no real need to create imagery larger than 3000px on its shortest side - you’d be really hard pushed to find a screen or a pixel density that would be able to display it, short of a 4K display screen at an expo somewhere.

For more information on file formats take a look at our tutorial on when to use JPG and PNG image formats, which is especially important when considering Hi-DPI devices.

Sources:
Ken Lo
Peter Gasston