Question

I have a few questions about screen resolution, that I’m not clear on. These questions assume they my app will be running on iOS 4.0 and up, and on either iPhone 3GS or iPhone 4.

1. Should the size of the splash image (default.png) be (960×640) or (480×320)?

2. Should the size of the app icon (Icon.png) be (57×57) or (114×114)?

3. What about other graphics that I may use in my app, such a graphic that represents a button? Should I always create these images for the higher resolution, and have the app scale them down? In other words, if I want a button image to be displayed on the 3GS that is 200×40 – should I create the image at 400×80, so that iPhone 4 can take advantage of it?

Thanks!

Answer 1

A good guide to this can be found here: http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/

In general you just create 2 sets of images. Your original and then a new one twice as big with @2x in the name. So for image.png at size 32×32 you would have one that is twice the resolution called [e-mail] at size 64×64. In your app just always use the image.png in Interface Builder and when loading in code.

There is no need to detect the device. These images will automatically be picked up by the OS and subbed in as necessary.

1. Provide both sizes (960×640 & 480×320) for the splash image using the @2x method described above
2. Provide both icons (57×57 & 114×114) using the @2x method
3. For our apps we use a combination of the @2x images and just Scaling the large images. (More information on this can be found in the above article) We use the @2x images for bar buttons, icons, etc. But for UIImageViews we often just use the Scaling. There can be a performance hit for doing this, but for most apps I’d say this is negligible. The savings in file size sometimes make scaling the only option.

Related Questions:

• Retina/non-retina images in UIImageView
• Making an app Retina Display friendly