How to support both iPad and iPhone retina graphics in universal apps

71
votes

Apple presented new iPad that support retina graphics.

I saw this link retina graphic in apple apps. As you can see apple just use "@2x" suffix for retina iPad display.

I have an universal app. So how to support retina in new iPad and iPhone? Will iPad retina use suffix "@2x" similar to iPad?

2
iphoneiosipadretina-display
@2x is a suffix, not a prefix and of course the retina iPad uses it because it has exactly the doubled display dimensions – Felix
But what to do if I have both iPhone and iPad. Check if this iPhone then use for example image-iphone else image-ipad? – rowwingman
see this answer stackoverflow.com/a/3184200/550177 you have to use UIInterfaceIdiom() – Felix
mmm it's very upset to check every time UIInterfaceIdiom()((( – rowwingman
you can write a UIImage category, add a method named +(UIImage*) deviceIndependentImageNamed:(NSString*)file; or similar, you can also scale the image in code instead of using multiple files – Felix

2 Answers

138
votes

I just created a test app and tested.

So for devices without retina:
ImageName.png - For iPhone/iPod
ImageName~ipad.png -- For iPad

For devices with retina display:
[email protected] - For iPhone/iPod
ImageName@2x~ipad.png -- For iPad

And you can still use @2x if your iPhone high resolution image and iPad high resolution image have the same size.
To load the image just use [UIImage imageNamed:@"ImageName.png"];
I just tested it on iOS simulator for iOS 5.1, 5.0 and 4.3.
By the way why you should use @2x and nothing more.

The main thing because you shouldn't use the same graphics on iPhone and iPad, because iPhone and iPad has different size. And if you will use the same size the graphics will already done for you iPad retina display (if you previously use iPhone retina display). If you will images with different size, so you will use different image names for iPhone and iPad. So in this side you need just add @2x suffix. That's why you should use just @2x suffix. - these are my thoughts.

7
votes

I found that the iPad mini/non retina iPad hardware, not simulator, would fall back on ImageName.png, not ImageName~ipad.png as you would expect from rowwingman's answer.

Looking at the docs, referenced in another StackOverflow question by Nate, it seems as though appending the device to iphone images is the correct way to do it.

MyImage.png - Default version of an image resource.

[email protected] - High-resolution version of an image resource for devices with Retina displays.

MyImage~iphone.png - Version of an image for iPhone and iPod touch.

MyImage@2x~iphone.png - High-resolution version of an image for iPhone and iPod touch devices with Retina displays.

Image, Sound, and Video Resources