Optimizing Images for the iOS Retina Display

Originally published by SafariBookOnline Magazine on 27th of February, 2012.
Excerpt from my book: Pro iOS Web Design and Development.

The Retina Display, launched by Apple in 2010, is basically a LED backlight LCD display with a 640×960 pixel resolution at 326ppi (pixel per inch). This amazing display doubles the number of pixels available on the iPhone, bringing a drastic improvement of sharpness in every user interface element. As you can see in the image below, every pixel in the regular display is equal to two pixels in the retina display.

If you have been developing WebApps for iOS you may have noticed a problem where “regular” images designed for iPhone 3 are not very crisp on the Retina Display devices compared to other iOS native retina display elements.

If you develop NativeApps for iOS you just need to add the postfix @2x to the image name in your app, which allows the iOS runtime system to handle the problem. On the other hand, if you develop a WebApp, a good approach to this problem is to use the proprietary prefixed CSS3 rule (-webkit-min-device-pixel-ratio) in conjunction with a CSS3 Media Query. Using this approach you can serve “regular images” and “retina images” according to the display technology available on the targeted device using its pixel density.

Optimize Retina Images - Pro iOS Web Design & Development
If you want to display a 50×50 pixel logo via an <img> tag, you need to design two versions, one at 50×50 (164ppi) pixels and one at 100×100 pixels (326ppi). I prefer to use the same @2x naming convention adopted by NativeApps:

logo.png // regular image
logo@2x.png // retina image

Once you have the assets, you can write the HTML code inserting the logo in the layout using the following code:

<img src="/images/logo.png" alt="myLogo" width="50" height="50">

Once the HTML is ready, it’s time to write the two CSS files, as long as you can see the code from the ios-retina.css file.

// this overrides ios.css .logo definition
.logo {
width: 50px;
height: 50px;
url: "/images/logo@2x.png"; // This is actually a 100x100 image
}

Here we have resized the 100×100 pixel logo via CSS in order to fit it within the layout, keeping the user interface proportions untouched inside the visible area. As the last step you need to link the CSS file into the HTML code using the following code:

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

The path is clear, in the near future the market will see only Retina Display devices (at least from Apple), but until this day it is important to continue to provide support for regular 320×480 display and their users.

Pro iOS Web Design and Development - Andrea Picchi
Buy the Book

BOOK DETAILS
Author: Andrea Picchi
Paperback: 375 pages
Publisher: Apress; 1 edition
Language: English

ISBN-10: 1430232463
ISBN-13: 978-1430232469

Webpage: www.apress.com/pro-ios-webapp