With the launch of the new iPhone 4 I have noticed that the images on many apps are appearing blurred or fuzzy. This is as a result of the iPhone 4′s display containing double the amount of pixels over prievious iPhone models. iOS4 will automatically scale your images up for you but this will cause images to appear blurred. The following example shows the icon taken from our iPhone VAT Calculator, VAT Pro. The small image is the standard 57×57 icon which is shown on the iPhones home page. If you double the size of this you will see how blurred it gets.
So what do we do to fix this?
Luckily Apple has introduced an easy way for developers to get the best of both worlds and supply two versions of each image (one for standard resolution iPhones and one for the retinal display on iPhone 4). All you need do is create a new version of your images at twice the size and save it with the same name appending ‘@2x’ to the end.
So for example, say we have an image that is 100 x 50 pixels called animage.png. We would redraw this image at 200 x 100 pixels and save it as animage@2x.png and add it to our app’s resources. When your app runs the SDK will automatiucally use the higher resolution images if the device supports it.

It is best that you re-draw the image at twice the size and not up-scale it using your graphics package as this will not add any real benefit – in effect this is what the SDK does for you anyway. You will get much sharper images by redrawing them and from now on, when ever you need new images for your app, draw them at double the resolution required and then scale down for older iPhones.
This image shows the same icon re-drawn at 114×114 which would appear sharp on the retina display.
A word about app icons
If your app is to support both iOS4 and older iPhone OS versions then again you will need two app icon images. Keep the original icon.png file at 57×57 pixels and add a new file called icon@2x.png at 114×114 to the resources folder. Now, to get this to work you will need to edit your apps info.plist file in xcode. Find the key named ‘Icon File’. You will probably have this set to ‘icon.png’, remove the ‘.png’ so the value simply reads ‘icon’. There, job done. If your app is installed on an iPhone 4, the hi-res icon will be used and if installed on an older iPhone, the normal 57×57 icon will be used.





