Retina Display and CSS Background Images

m.nd.edu

Anyone who owns an iPhone 4 has experienced the beautiful new Retina Display. Text is amazing, colors are vibrant, but apps and sites that are not updated to handle this display usually look less than stellar. This is because the Retina Display, which has a display that is twice the resolution of most devices, scales images up so they appear to be the “correct size”. The solution to this is to target these devices using a media query and replace the graphics with a higher-quality version.

Use case: m.nd.edu

My first opportunity to work with and fix this issue was for m.nd.edu. The first step may also be the most difficult. Through trial and error I worked with our designer Jim Gosz to re-create the entire interface in both standard and double resolution. For this article, I’ll focus on the home-screen icons, displayed here at double the size to accommodate the Retina Display. Below is a screen-shot from the iPhone 4 simulator which shows how the images appear pixelated due to scaling.

iPhone 4 before
iPhone 4 with scaled-up icons.

Bring in the Big Guns

The original icon size on the home-screen is 57×57 pixels. For the Retina Display, Jim created additional icons at 114×114. I chose to follow the naming convention Apple uses in its SDK to target the high-res images by adding the suffix “@2x” to the file-name. So for low-res devices, if the standard icon is “icon-news.png”, the RD devices would be “icon-news@2x.png”. To get these into the mix, I added a media query into the css file that targets the Retina Display:

@media all and (-webkit-min-device-pixel-ratio: 2) {
    #home-news a {background-image:url(images/icon-news@2x.png);}
}

Updated 2012-3-2 to include -o, -moz and w3c standards:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        #home-news a {background-image:url(images/icon-news@2x.png);}
}

However, after refreshing the screen, the images look like this:

iPhone 4 unscaled
iPhone 4 hi-res un-scaled

Obviously not ideal. This is where the background-sizeproperty comes in. By adding

#homenav li a {background-size:57px 57px;}

to the Retina Display portion of the style-sheet, the 114px images will display at 57px and thereby make everything appear at the proper scale. The background-size property will also accept “auto” as a value. So I could have used “background-size:57px auto;”. With this in place, the icons appear as below:

iPhone 4 scaled
iPhone 4 hi-res

I think we can all agree that looks much better. Is this something I’ll use on every site I build? Probably not. Creating multiple versions of each graphic is labor intensive. But for mobile specific sites, it’s definitely worth it. Especially since we’ll be seeing more devices arriving soon with similar screens.

UPDATE (2012-04-27): I added an additional article to show how to use this technique with css image sprites

Further reading:

Comments

comments powered by Disqus