Displaying Retina-Quality Images

Displaying Retina-Quality Images

Displaying Retina-Quality Images

Apple has retina image display wrong -- and I think I can do better.

With the fresh release of the iPad, iPhone, and other high-resolution displays into the market, there is renewed discussion in the web development community about how best to create responsive websites with retina-quality images. The way Apple.com has decided to tackle this problem has been well-documented by Jason Grigsby and others. Unfortunately, I think they're doing it in a way that is not only inefficient, but also sets a horrible example for the web development community.

The Problem

Higher quality displays are coming; Apple's iPad and iPhone retina displays are only the beginning. So, the web development community has to start thinking about the best way to serve up images that are designed for these devices.

The big problem here is the lack of a standard detection method at the server level. Currently, there's no easy way to know the display resolution of a device until it can execute some client-side code. That's why Apple.com has chosen to serve up "standard" images (HTTP request #1), then use Javascript to replace those images with higher-quality images (HTTP request #2). But, not before also making sure the high-quality image exists on the server (HTTP request #3). That's 3 HTTP calls for every image! It's also serving up 2 full images for each image displayed. That's insanity.

So, how can it be better? How can we serve up the correct image the first time, if the browser doesn't know what to request from the server? How can we make sure we're not wasting bandwidth on throwaway images? All in a way that allows for backwards compatibility and is reusable as a standard practice for any website?

Solution Overview

Before I get into the details of how my technique works, I want to offer an executive summary right off the bat. This solution requires both a client-side component (Javascript) and a server-side component (My example is in ColdFusion. You can use any language you prefer). It will make only 1 HTTP call. It will work for new & old browsers alike. Most importantly, it will serve up retina-quality images to devices which can handle them and standard quality images to whose which can't. No wasted bandwidth.

Sound good? Still interested? Read on.

Pages: 1 2

About the Author

Rob has been in web development for over 10 years, 9 of which have been focused on being a ColdFusion Application Developer. Project Management, eCommerce Consulting, and Marketing Consulting are also in the quiver. If you like what I have to say, consider following me on Twitter or reading more about me here: About Rob O'Brien