Use Your Loaf

The retinal display on the new iPhone 4 doubles the pixel resolution of the display. However when it comes to laying out the UI elements you can still think about a full screen display with dimensions of 320 x 480 in portrait mode. The big difference is that these dimensions are now expressed in points NOT pixels. What has changed is the scaling factor of the screen which determines how a point relates to a pixel. For the iPhone 4 the display has a scale of 2 so that 1 point = 2 pixels.

The number of pixels on the display has doubled to 640 x 960 but if you are using UIKit this added complexity is mostly hidden from the application. The UI layout is configured using the point dimensions so thankfully you do not have to worry about redoing the layout just for iPhone 4 devices. Also things like text and standard Apple UI components such as navigation bars, system buttons, etc are automatically displayed at the higher pixel resolution. Note that if you are using core graphics or core animation you will have some additional work to do as those frameworks only work with pixels not points.

There are some additional steps that are worth doing if you want your app to look its best on the iPhone 4.

2x Image Files

Apple has introduced a simple naming convention to allow image files at double the resolution to be loaded when the display will support it. To make use of this feature you need to go back to your original image files and create versions at twice the existing size. So if you have an image that is currently 100x100 pixels named myImage.png you need to create a new version which is 200x200 pixels named myImage@2x.png.

You should probably avoid just taking the existing image file and scaling it up to double the size. Ideally you want to create your images at the higher resolution and then scale down to the standard resolution so that both sizes look their best.

Once you have the high-resolution image files you just need to add them to your project and they will be selected automatically anytime you use UIImage class methods such as +imageNamed: or +imageWithContentsOfFile: So for example:

UIImage *myImage = [UIImage imageNamed:@”myImage.png”];

will load myImage.png on iPhone 3 and iPad devices but will load myImage@2x.png on the iPhone 4. It is possible to omit the filename extension from the name of the image file with iOS 4 but you will need to include it if you want to maintain compatibility with 3.x releases.

Applications Icons

As well as updating image files you should also update the application icon files to include high-resolution versions of each file. So since the original iPhone application icon file is 57x57 pixels the 2x version needs to be 114x114 pixels. In addition the settings/search icon which is normally 29x29 pixels needs a high-resolution version that is 58x58 pixels.

With iPhone OS 3.2 for the IPad a new key (CFBundleIconFiles) was introduced to Info.plist to specify the ever growing list of icon files. If you are producing an App that will only run only on iOS 4.0 and 3.2 you can use CFBundleIconFiles (you can delete the old CFBundleIconFile key if you want since it will no longer be used).

If you do not specify the filename extensions you can avoid listing all of the 2x variations of the file. So if we have an iPhone icon, an IPad icon and the corresponding settings/search icons the entry in Info.plist would be as follows:

If we want to maintain compatibility with pre-3.2 devices we cannot rely on the CFBundleIconFiles key. Instead we need to specify the icon files using the Apple determined naming convention. The files we would need to support all devices would be as follows:

• Icon.png - 57x57 pixels application icon for standard resolution iPhone
• Icon@2x.png - 114x114 pixels application icon for high resolution iPhone 4
• Icon-72.png - 72x72 pixels application icon for iPad
• Icon-Small.png - 29x29 pixels settings icon for standard resolution iPhone
• Icon-Small@2x.png - 58x58 pixels settings icon for high resolution iPhone
• Icon-Small-50.png - 50x50 pixels settings icon for iPad

Then in the Info.plist file we need to use the original CFBundleIconFile key to specify just the basename of the icon file (“Icon.png”) as follows:

Launch Images

As with the application icons you can also specify high-resolution versions of your launch images. So a standard resolution portrait launch image named Launch.png is 320x480 pixels. The high resolution version would be 640x960 pixels and named Launch@2x.png.

Likewise a landscape version of the file named Default-Landscape.png would be 480x320 in standard resolution (assuming a status bar) and named Default-Landscape@2x.png with 960x640 pixels in high resolution.

Update on Tuesday, August 3, 2010 by Keith

To avoid validation errors when uploading to the App Store I find that the old CFBundleIconFile needs to also specify the extension (Icon.png). I have created an example app to illustrate the different configurations that I will try to post in the next few days to clear up the confusion.

See this post for more details on the problem with the version of Application Loader shipped with Xcode 3.2.3: Application Icon Troubles.

Thanks for the info, it helped me get my HiRes app icons to load properly. I believe the HiRes size is 114x114 instead of 144x144 which you have specified.

well spotted it should be 114x114 not 144x144. I have corrected the post. Many thanks for the feedback.

Do you have any tips generating the high-resolution launch image? I used the xcode organizer screen shot functionality to generate the Default.png image and am now wondering how to generate the high-resoltuion version.

@Rich - did you try using the Simulator with the device type (Hardware -> Device) set to iPhone 4? That should give you a high resolution image that you can capture using Grab and clean up.

you should correct also this "2x version needs to be 114x144 pixels" to "2x version needs to be 114x114 pixels"

thanks poor typing on my part....

Question : How could I make an App for 3.0+ but with an highresolution icon for iPhone4 ? Your described solution is not really working.. I have some problems getting the retina icon (114x114) working. To be sure I made a red block (114x114) and called it Icon@2x.png but the app still uses the default iPhone Icon.

I tried to set the Icon File just to "Icon" instead of "Icon.png" - but then I just get a warning that the extention is missing and the same result - no red image on iPhone 4. Whats missing? I didnt find this "@2x" Stuff inside Apples reference manual where does this come from? Is it really working?

After setting _all_ images to their correct sizes it works ! Thank you very much !

re Launch Images, did you mean default.png and default@x2.png?

@Alex: actually I was thinking about the situation where you use the UILaunchImageFile key in Info.plist to specify a name for the launch image. However that key is only supported from iPhone OS 3.2 so for an App that needs to maintain backward compatibility with OS 3.1 apps it would probably be better to stick to Default.png.

I have used Icon.png (57X57) and also Icon@2x.png (114X114), but both 3.0 and iPhone4 shows the default icon (Icon.png) Do i need to make any change at info.plist or in any code, so that Icon2x.png can work properly? now my info.plist setting is
Icon file: Icon

Thanks

With Application loader, it lauch an error saying that "Icon must have an extension"...
Looks this tips is not allowed anymore :-(