The Retina Dilemma

If you have designed a mobile site in the past year, you’ve probably run into the issue of optimizing images for Apple’s Retina displays and other high definition screens. With the iPhone 4s, iPhone 5, and iPad 3 all utilizing Retina displays, this is not something that a designer can ignore. You can’t produce a site with images that will look fuzzy on some of the most popular mobile devices.

For the sake of brevity, all refer to all high definition screens as ‘Retina’ in this post. This includes Apple’s Retina devices, a bunch of HD Android devices, HD Kindles, and more.

The Basics

In a nutshell, images on Retina displays have to be twice as big as those on regular displays. So if you have a great looking image that’s 400px by 400px, you’re going to need to serve up an image that’s actually 800px by 800px to looks crisp on Retina displays. This is because Apple shoves twice as many pixels into a given area of a Retina display to achieve that nice crisp resolution that we all pay more money to see.

To see an example of a Retina-optimized image vs a non-Retina-optimized image, grab a Retina device and head here:

www.dylanwooters.com/dev/retina/

So how do serve up an image that’s 800px by 800px but needs to appear as 400×400 in your design? It’s really as simple as referencing the larger image in your html, but setting the image width and height to one half, like this:



(why can't I ever get straight html to work in WordPress using the pre and code tags?!!)

In this example, the dimensions of my_retina_size_image.jpg are 800px by 800px, but it appears as 400px by 400px on the page. And it appears crisp on Retina displays.

Bandwith Considerations

However, that’s not the end. Using this method, you’re quickly going to run into load time issues with your Retina-optimized mobile site, since you’ll be serving up images that are really large. You’ll then want to selectively load the larger images based on whether or not the device viewing the site has a Retina display. There are a couple of different ways to do this.

(It’s my opinion, though, that these methods are only necessary if your site is image-heavy. You can probably get away with serving up Retina-size images for all devices if you have like 10 or less small-to-medium-sized images. Most devices have 3G or 4G connections these days, or are using wifi, so loading time is probably not going to be an issue.)

1. Using media queries

This is probably the best method, since it uses web standards. Basically, you’ll use a css media query to look for the resolution of the device viewing the site, and serve up the appropriate images. Here is the latest method, from CSS-Tricks:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min–moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

/* Retina-specific stuff here */

}

The catch here is that you’ll need to use background images, and not inline images placed directory in the html. Also, you’ll need a ‘regular’ size image and a Retina image. For example:

.picture {
background-image: url(images/my_regular_size_image.jpg);
background-size: 400px 400px;
height: 400px;
width: 400px;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min–moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

.picture {
background-image: url(images/my_retina_size_image.jpg);
}
}

This will serve up the regular image for normal screens and the larger image for Retina screens, but will still ‘squeeze’ the Retina image into the same 400×400 size using background-size.

2. Using JQuery/JavaScript

JavaScript also comes with a handy method to query for pixel density: window.devicePixelRatio. You can use this to see if the device has a Retina screen and then change the src attribute of every image to the larger versions. You would do this in either standard JavaScript or Jquery using an if statement.

There are also some plugins that there that can do this for you. One example is retina.js, which seems pretty mature. I also heard of a very simple WordPress plugin in the works, although I haven’t searched for it yet.

Conclusion

It seems that, in terms of web design, Retina and HD is still the Wild West. The tricks above are a bit hacky for dealing with something as essential as images in your design–even the web-standard way with media queries requires background images. Hopefully there will be some definitive answers in the near future.

One way to avoid this mess entirely is to use vector graphics, which look crisp on any device–normal or Retina–at really any scale. This would be something like SVG.

Resources

Advertisements
  1. Good news, everyone! You only need to serve up the hi-res images! Yeah, it turns out that images—when transmitted to mobile—are compressed on the ISP’s side. +1 Apache server.

    • Way to go Apache! This is going to make my life easier next week. I was about to duplicate everything in Photoshop and use media queries. Do you have any links to other articles covering the mobile compression.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: