If you’re a web developer or designer who has lately working on projects for mobile devices, it won’t take too long before you realize that a pixel no longer equals a pixel.

You noticed this because you looked up the screen resolution of the new Galaxy S6 and were puzzled as to how it could have a larger resolution than your 1080p widescreen desktop monitor, and yet websites are still perfectly readable and seem to render at the same size as they always have. Something is literally not adding up.

For a web developer, this means that with the advent of high-density displays, you can’t count on a device’s screen resolution anymore to tell you how wide a page should be. When Apple pioneered this with their Retina display, they split the concept of pixels into hardware pixels and software pixels. A hardware pixel is an individual dot of light in the display. A software pixel, also called a CSS pixel in the web world, is a unit of measurement.

The device manufacturer determines how many hardware pixels equals one software pixel, a concept known as the device pixel ratio. With Apple’s Retina display, a single CSS pixel contained four hardware pixels (2 pixels wide and 2 pixels tall), meaning that the device pixel ratio is 2. The Samsung Galaxy S4 pushed it a step further by introducing a device pixel ratio of 3, meaning each CSS pixel contains 9 hardware pixels. The LG G3 was the first with a ratio of four, and now the Galaxy S6 is following suit. (Phone manufacturers: Before long we’re going to stop caring. Don’t be Gillette.)

A CSS pixel, on the other hand, is designed to be roughly equivalent across devices. If you load the same website on side-by-side devices with a similar physical dimensions, but different pixel ratios, the website will appear to be roughly the same visual size.

So what’s the deal? If CSS pixels haven’t really changed at all, what’s the benefit of higher pixel densities? Here are a few.

Sharper text

You’ll notice that text appears much sharper on a high-density display. The font size is the same relative to the rest of the page, but the text is drawn at the hardware pixel level. So, a font size of 14px will take up 14 CSS pixels but render at 28 hardware pixels. (The enhanced text rendering is handled automatically by the browser—you don’t need to do anything at all to take advantage of this feature.)

Sharper icons

Technically this could fall under “text”, but lately there’s been a movement to use icon fontssuch as FontAwesome to render icons instead of traditional images. The advantages include the ability to specify the color, size and hover effects via CSS so you don’t need separate images for each color variant. Essentially this is a creative and easy way to use vectors in web design that are sharp at any size, and the same high-DPI benefits apply here too. An icon-font icon will be sized with CSS pixels but rendered with hardware pixels.

High-resolution images

These are also called Retina images because the techniques were first pioneered by Apple. It involves delivering a different set of images to higher-density displays so that they render using hardware pixels instead of software pixels. This results in a much sharper image while still being fully backwards-compatible with 1:1 density screens.

How to use this feature: For standard HTML images, just use an image twice the width and height that it needs to display on the page. Then use either CSS or inline HTML to resize the image to the proper dimensions. (Also check out Retina.js as a potential solution.)

More commonly, though, you’ll be using this technique on elements with CSS background images and utilizing media queries to deliver different images based on pixel density. The following sample CSS will replace a background image with a high-resolution version suited to the device.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* This is the original logo. */
.logo {
    width: 197px; 
    height: 182px;
    /* Source image is 197px by 182px. */
    background: url('img/logo.png') no-repeat center center;
}
 
/* This will replace the logo with a 2x version on devices with a 2:1 ratio, such as Apple devices. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .logo { 
        /* Source image is 394px by 364px. */
        background-image: url('img/[email protected]');
        background-size: 197px 182px;
    }
}
 
/* This will replace the logo with a 3x version on devices with a 3:1 ratio, such as the Samsung Galaxy S5. */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
    .logo { 
        /* Source image is 591px by 546px. */
        background-image: url('img/[email protected]');
        background-size: 197px 182px;
    }
}

These media are designed to target only high-density displays and will be ignored by other devices. The @2x and @3x designations are arbitrary—the image can have any filename you want, unless you’re using Retina.js—but this is a convention established by Apple which has become the standard. Note the usage of the background-size property, which is how we resize the image back down to the CSS pixel dimensions we want.

So, as a web designer, can you get away with doing things the way you always have and ignore hardware pixels entirely? Yep. All of this new display technology is fully backwards-compatible, and your stuff will still work fine on Retina displays. But that’s not the right question. Your work shouldn’t be about what you can “get away with”, but how you can take advantage of new technology to create a better product for yourself and for clients.

Right now, most sites are not taking advantage of the available high-density features. If you have an iPad, you definitely notice the difference when you come across one that does! (Check out the homepage for Dubuque Community Schools on an iPad.) Eventually, high-density optimization will be the norm as more and more devices support it, and the playing field will be leveled—but in the mean time, it’s an easy and rewarding way to distance yourself from your competitors.

Resources

If you want to learn more about optimizing for high-density displays, the following sites have some really good information.

List of displays by pixel density (mydevice.io)
This is the best resource for looking up what display densities certain devices have. It’s continually updated when new devices are released.

The Insanely OCD Mobile Media Queries CSS File
This is self-admittedly a little overkill, but it’s a great resource if you want to pull the media queries for a few of the more popular devices.