Posted on by & filed under Content - Highlights and Reviews, Mobile 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.

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:

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

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.

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 a last step you need to link the CSS file into the HTML code using the following code:

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.

Safari Books Online has the content you need

Here are some books with more details about iOS image optimizations found in Safari Books Online:

Pro iOS Web Design and Development: HTML5, CSS3, and JavaScript with Safari by Andrea Picchi, the author of this post, will help you deliver rich mobile user experiences without compromise by optimizing your sites for WebKit and Safari, the de facto standard for the iPhone, iPad, and iPod touch.
Beginning iOS 5 Development: Exploring the iOS SDK offers a complete soup-to-nuts course in iPhone, iPad, and iPod touch programming. The book starts with the basics, walking through the process of downloading and installing Xcode and the iOS 5 SDK, and then guides you though the creation of your first simple application.
In Creating iOS 5 Apps: Develop and Design, iOS programming expert Richard Warren shows you how to use these powerful tools to begin writing the next generation of iOS apps. Richard provides a complete introduction to iPhone and iPad development, emphasizing the newest technologies and best practices for iOS 5.

About the Author

  Andrea Picchi is the author Author of “Pro Web Design and Development” from Apress. He has a background in Psychology (University of Padova) and Computer Science (University of Pisa). He started designing WebApps for the new Apple device in 2007 when the first iPhone was lunched on the market. After the first release of the Apple SDK in 2008, he started developing Native Apps using Objective-C. In recent years Andrea Picchi has been speaking at many important conferences around Europe like IASummit, UXConference and many others. Recently he also started to teach “iOS Web Design and Development” in a course organized by the Computer Science Department of the University of Pisa. Today, as designer his priority is to implement a cognitive approach to touch-screen interface design in iOS enviroment and as developer continue to develop using both the Web model (using html5, css3, javascript) and SDK model (using Cocoa-Touch in Objective-C). Learn more at http://www.andreapicchi.it and follow at him http://twitter.com/andreapicchi.

Tags: 326ppi, iOS, Retina Display, webApp,

3 Responses to “Optimizing Images for the iOS Retina Display”

  1. Tom St George

    I couldn’t get your example to work until I changed the css to

    .logo {
    width: 50px;
    height: 50px;
    content: url(“/images/logo@2x.png”);

    }

Trackbacks/Pingbacks

  1.  PageLab » eBook HD: o display retina e os impactos na produção
  2.  (Nicht nur) in eigener Sache: WordPress.com unterstützt Retina-Displays | Retina Mac