Improving Image Quality on the Retina Display

The new iPad was released last month, and, amongst other things, it sports an incredible Retina Display with a 2048 by 1536 pixel resolution. Pretty much as soon as it was announced, focus turned to native app developers and their work to scale apps up to the higher resolution.

That was arguably the wrong focus. Relatively little was thought about in terms of the web, and how that would look on the new Retina Display in the run up to the announcement. It’s left us with an internet of amazingly crisp text, but laughably terrible, low quality images. It’s time to optimize, so in this tutorial we’re going to strategize how you can design with the Retina Display in mind.

Use Fewer Images

This is arguably pretty obvious, but it may still be overlooked by some. With significant advancements in CSS, the use of images in a site’s structure can be fairly minimal, or even non-existent at all. This gives these sites a huge advantage when it comes down to Retina Display compatibility because text and CSS-generated graphics will scale up without reducing in quality. For the same reason, text looks measurably better on a Retina Display.

Apple has made a big deal of text quality on the new iPad’s Retina Display

A site I was working on needed not a single update to its theme to look great on the Retina Display; the lack of images meant there wasn’t anything to update. Of course, not every site will be totally sans images, but minimizing their use will reduce the effort required to optimize for the Retina Display.

See what Paul Boag has to say on images and rounded corners

Generally, there’s one step to this tactic: minimize image use where it’s not really needed.

How Apple Does It

Naturally, Apple’s website is optimized to look incredibly sharp and crisp on the Retina Display. In the days prior to the iPad’s announcement, Apple started updating their own website to offer up responsive images; items that changed depending on whether you were browsing on a new iPad or not.

Apple’s method is simple in principle. The website loads up as normal, but then they use JavaScript to replace relevant images if you’re browsing on a new iPad. If you visit on a new iPad, you’ll get the optimized images, whereas any other browser will pull up the defaults.

One such example of this is Apple’s hero text on the iPad’s product page, using the following code in the file itself.

<hgroup class="headline">
	<h1><img src="http://images.apple.com/ipad/home/images/overview_title.png" width="471" height="94" alt="Resolutionary" /></h1>
	<h2 class="first"><img src="http://images.apple.com/ipad/home/images/overview_intro_build.png" width="280" height="53" alt="The New iPad" /></h2>
	<h2 class="second"><img src="http://images.apple.com/ipad/home/images/overview_intro.png" width="490" height="53" alt="Introducing the new iPad. With the stunning Retina display. 5MP iSight camera. And ultrafast 4G LTE." /></h2>
	<h3><img src="http://images.apple.com/ipad/home/images/overview_price.png" width="135" height="24" alt="Starting at $499." /></h3>
</hgroup>

For simplicity’s sake, I won’t share their actual scripting, but essentially it first checks whether the browser is on a device with a Retina Display, then checks for the existence of a 2x image (we’ll get onto that in a minute) and, if both the previous conditions are true, displays the 2x image.

The 2x suffix convention means the “Retina” counterpart for the file image.png would be image_2x.png. This comes from iOS, which automatically displays an @2x image in a native app when it exists. Unfortunately, we web designers don’t get the luxury of automatic search-and-display, so we need to come up with methods of emulating that with our own scripts and queries.

This does come at a price however. Using this method, the end user loads both the non-Retina and Retina image, meaning the page ends up with an increased file size. Not only that, Apple’s scripting means more requests are sent to and from the browser, resulting in further page load time. Of course, if you continue to minimize image use, this problem will also be reduced.

The Tutorial: Using CSS Media Queries

While Apple uses JavaScript, a somewhat effective method, there is an alternative; using CSS media queries to serve up styling condition to the device’s pixel density.

Before we get onto that, it’s important to note that, ultimately, the iPad’s display is still 1024×768 px in “CSS pixels”. I’ll allow Dave Hyatt to explain.

Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen. For example if I set a zoom magnification of 2x, then 1 CSS pixel would actually be represented by a 2×2 square of device pixels.

Therefore, the method we’re using won’t target the iPad based on its resolution because it simply wouldn’t work. For all intents and purposes, the iPad’s resolution is still 1024×768 px according to the browser, and targeting this resolution would also target all previous iPad generations. Likewise, targeting the new 2048×1536 px resolution with media queries wouldn’t have any effect on the new iPad.

Instead, we can target using the min-device-pixel-ratio query. That query tells the browser to load up a specific style based on the ratio of device pixels to the aforementioned “CSS pixels”. In the Retina Display-equipped iPad’s case, this is two (1024:2048 and 768:1536 simplified down to 1:2).

Therefore, we can load in a “retina” stylesheet based on the device’s pixel ratio.

<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

Obviously, we use the WebKit prefix since the iPad’s browser is Safari, a WebKit browser, but also because the media query seems to be only available through WebKit for now. Since styles cascade (as the name “CSS” will tell you), by simply ordering the above tag correctly, rules in that stylesheet will overwrite the ones for regular devices specified previously.

If you don’t happen to want to put everything in a whole separate stylesheet, you can use inline media queries to specify portions of your stylesheet for Retina Display-equipped devices only, like so:

@media(-webkit-min-device-pixel-ratio: 2) {
	#element {
		background-image('image-2x.png');
	}
}

Note: While using the “2x” naming scheme is a useful way of organizing your images, don’t feel obliged to do so. You can name your images whatever you want and, unlike with native apps, they don’t need to be even remotely similar.

Of course, using this media query isn’t in any way specific to the iPad. In fact, the same logic will be triggered when browsing your site on any device with a similar pixel density that employs the same CSS to device pixel ratio, including the iPhone 4 and iPhone 4S. If you do want to target only the iPad, you can simply combine the pixel ratio query with a width one, to specify only Retina Display-equipped devices of the iPad’s reporting resolution.

Conclusion

It’s not a case of your site looking good without optimizing, but looking better with. You only need to visit an image-rich, but non-optimized, site to understand how terrible non-Retina imagery looks on the new iPad. And, ultimately, you need to actually witness the results. If you don’t have access to a new iPad, I highly recommend taking a trip to an Apple Store to take a look.

While Apple has sold millions of units, in the grand scheme of browsers, it’s still a small concern. However, with potential Retina Display-equipped MacBook on the horizon for as early as this summer, putting in the work now could really pay off later.