Optimizing apps for Apple’s Retina Display

by Jannis on Aug.04, 2010, under iPhone development

The iPhone 4 features a high resolution display called ‘Retina Display’ with a resolution of 640 by 960 pixels, resulting in a really high level of detail in comparison to the iPhone 3GS or older models.

Because of the higher resolution, the iPhone 4 requires some efforts from developers to optimize their apps for the iPhone 4. Standard UI controls are displayed perfectly by default, but graphics created by the developer have to be optimized by them, basically making them twice as big.

Unfortunately as of yet, lots of developers still need to do so. Many of the apps I have installed on my iPhone still have low-res graphics. This is too bad, because even now the iPhone 4 has this amazing display, these apps actually look (a lot) worse than on the 3GS.

Optimizing your apps

As I said above, optimizing the graphics basically means making them bigger. When designing your interface, do so on a 640 by 960 pixel canvas. When running your application in the iPhone Simulator, you can set the device on iPhone 4. This will give you a full-sized display on your Mac. If your application looks great this way, you’ve done a good job.

Some applications feature more graphical content than others, for example apps with lots of photos or videos. In some scenarios it might be desirable to provide different sized content depending on the iPhone model being used, because older models are less powerful and have less memory available for your application. If you experience performance issues with high-res iPhone 4 optimized content you might want to present low-res content to older models.

Displaying graphics depending on the device model can be done by duplicating image files and adding an ‘@2x’ suffix. So, when the normal image file is named ‘button.png’, the hi-res version should be ‘button@2x.png’. You don’t need any additional code for this. In Interface Builder or your code, assign the normal version (without the suffix) to an object. The same goes for the application icon. The resolution of the 2x icon should be 114 by 114 pixels. You will need to add a separate ‘Icon’ property in the Info.plist file for this icon.

If for some reason you do want to perform a check in your code, you can do so by checking the scale factor of the display. Older models will return a scale factor of 1.0, while the iPhone 4 will return 2.0. You can check this with:

float factor = [UIScreen mainScreen].scale;

Depending on the type of application you’re developing further optimizations can be made to utilize the new retina display the best you can. If you are a registered iPhone developer, I recommend watching the WWDC session 134 (‘Optimize your iPhone App for the Retina Display’) video, available on iTunes.

Video: WWDC Session 134 – Optimize your iPhone App for the Retina Display (requires iPhone developer program membership)

1 Comment for this entry

Leave a Reply

Spam protection by WP Captcha-Free

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!


A few highly recommended websites...


    All entries, chronologically...