Updating for iPad retina display

Well today was the day that people started to get their hands on the third generation iPad with a double resolution retina display. Below are my notes on the minimal updates that you should consider making to best support all of those extra pixels.

Custom Application Images

Apple takes care of the UIKit images for standard iOS controls but if you have any custom images specific to the iPad you will as with the iPhone 4 need to supply @2x versions. I know many developers were sensibly preparing for this ahead of time by updating their iOS 5.0 built apps with double resolution images in the hope that they would just work on the new iPad. However there is one important caveat that can nicely summarised by this tweet from Michael Jurewitz (@Jury):

PSA - If you want your retina graphics to show up on the new iPad, you NEED to build with Xcode 4.3.1 and link against the 5.1 SDK

Application Icons

The next most obvious update you need to do is provide a double resolution version of the main App icon. Apps that still only have a single resolution icon will stick out like a sore thumb on a retina display iPad.

There seems to be an a never-ending and growing list of dimensions that you need to supply for the application icon and the iPad retina display adds to that list. You should consult the iOS App Programming Guide and iOS Human Interface Guidelines for the comprehensive list but as a minimum you should at least include a new App icon and search results icon for the iPad retina display as follows:

iPad App icon (144x144 pixels)

The standard resolution main App icon for the iPad is 72x72 pixels. The retina display requires a @2x variant that is therefore 144x144 pixels.

iPad Search results icon (100x100 pixels)

The search results icon is used on the search results page and at standard resolutions is 50x50 pixels on the iPad. The @2x variant for the retina display version of the iPad is therefore 100x100 pixels.

Filenames and Info.plist

Depending on the level of backward compatibility that you need to maintain you may need to use specific naming conventions or add the new icon files to the application Info.plist file.

The most complicated situation is when you are dealing with a universal app that needs to maintain compatibility all the way back to iOS 3.1.x or earlier. In this case you will need to use very specific Icon filenames as the Info.plist keys were not used prior to iOS 3.2. The full list would now be something like this:

  • Icon.png - 57x57 iPhone App Icon
  • Icon@2x.png - 114x114 iPhone retina display App Icon
  • Icon-72.png - 72x72 iPad App Icon
  • Icon-72@2x.png - 144x144 iPad retina display App Icon
  • Icon-Small.png - 29x29 iPhone settings and search results icon
  • Icon-Small@2x.png - 58x58 iPhone retina display settings and search results icon
  • Icon-Small-50.png - 50x50 iPad search results icon
  • Icon-Small-50@2x.png - 100x100 iPad retina display search results icon

Of course there is nothing to stop you using this naming convention for all of your apps but if you are targeting iOS 3.2 or later you can specify different filenames using the Info.plist file. The CFBundleIconFiles key was introduced with iOS 3.2 and allows you to directly list the names of the icon files. if you omit the filename extension (.png) you should be able to omit listing the @2x variants as the system should automatically detect the double resolution versions.

To further complicate things Apple introduced a new CFBundleIcons key in iOS 5.0 to support the Newsstand. This key contains a CFBundleIconFiles subkey which is an array of filenames which take precedence over the older CFBundleIconFiles key. If you are targeting iOS 5.0 and later you can switch to this key but if you need to support iOS 4.x or 3.2 you should also include the CFBundleIconFiles key.

All in all this is a bit of a mess and I would suggest that you test all of the various combinations you need to support carefully as it is easy to slip up.

App Store Screenshots

Apple recently changed the App Store submission rules for iPhone and iPod touch apps so that you have to submit screenshots for the retina display. The actual dimensions of the screenshot vary depending on whether you include space for the status bar or not but dimensions should be as follows (first value includes the status bar):

  • Landscape: 960x640 or 960x600 pixels
  • Portrait: 640x960 to 640x920

Apple has not, so far, placed a similar restriction on iPad screenshots but since you will want your screenshots to look good on the latest iPad it seems like a good time to switch to only retina sized screenshots for all devices.

The dimensions for a retina iPad screenshot are as follows (as before the first dimension includes the status bar):

  • Landscape: 2048x1536 or 2048x1496 pixels
  • Portrait: 1536x2048 or 1536x2008 pixels