71

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?

rowwingman
  • 5,589
  • 7
  • 33
  • 50
  • @2x is a suffix, not a prefix and of course the retina iPad uses it because it has exactly the doubled display dimensions – Felix Mar 08 '12 at 00:09
  • 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 Mar 08 '12 at 00:11
  • see this answer http://stackoverflow.com/a/3184200/550177 you have to use UIInterfaceIdiom() – Felix Mar 08 '12 at 00:16
  • 3
    mmm it's very upset to check every time UIInterfaceIdiom()((( – rowwingman Mar 08 '12 at 00:19
  • 1
    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 Mar 08 '12 at 00:22
  • but nothing has changed today. Your universal application had to distinguish between iPad and iPhone graphics already. – Matthias Bauch Mar 08 '12 at 00:23
  • the iOS Human interface guide has been updated for the new iPad – Felix Mar 08 '12 at 00:29
  • I've looked into the updated FindMyiPhone App. Apple uses 4 images to support all kinds of displays. suffixes: (none), @2x, -ipad, -ipad@2x – Felix Mar 08 '12 at 00:39
  • by the way 1024 x 1024 pixels (high resolution) is this artwork file? is it possible now to load high resolution icon in itunesconnect? – rowwingman Mar 08 '12 at 00:46
  • [you could check my answer here for iphone retina,Scaling and app icon ][1] [1]: http://stackoverflow.com/questions/10246147/images-for-retina-display/10246629#10246629 happy to help:) – maddy Apr 21 '12 at 19:52

2 Answers2

138

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:
ImageName@2x.png - 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.

Kerem Baydoğan
  • 10,475
  • 1
  • 43
  • 50
rowwingman
  • 5,589
  • 7
  • 33
  • 50
  • 25
    Be careful with the case of the letter P, I had problems because of writing ~iPad or ~iPhone, strangely it works with the simulator but not with the real device. Furthermore, I have discovered that if you don't have a @2x~ipad version then the new iPad will use the @2x version, which in this case is the iPhone retina file. Take also this into account... – LightMan May 08 '12 at 12:23
  • 5
    The simulator isn't case sensitive (a common cause of problems when first distributing to device) thats why it works on simulator regardless of casing – Matt May 14 '12 at 08:59
  • 4
    The doc for this: http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreens/SupportingHiResScreens.html#//apple_ref/doc/uid/TP40010156-CH15-SW8 – Ben Flynn Jun 21 '12 at 18:17
  • 3
    New link for the docs: http://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html#//apple_ref/doc/uid/TP40010156-CH15-SW1 – Zev Eisenberg Feb 13 '13 at 22:58
  • I have a question about the iPhone 5 display. The suffix `-568h` I use to name the launch image for the iPhone 5, do I have to add the same suffix for all the images that are used in the app also? – Isuru Jul 15 '13 at 10:49
  • 1
    suffix -568h works only for launch image, but doesn't work for other images. You need to check device size. – rowwingman Jul 15 '13 at 11:05
  • I see. Thank you. One last question, If I **only** provide images created for retina displays in an app, will it scale them down properly when the app runs on a non-retina display? – Isuru Jul 15 '13 at 11:34
  • Yes, iOS will scale it, but I think that Apple could reject you app, because you need provide images for retina displays and non-retina. But I know some developers that post without non-retina images and Apple accept their apps. – rowwingman Jul 15 '13 at 14:37
  • If you put the .png on the end of the file name, this doesn't work. – Abizern Oct 16 '13 at 11:38
7

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.

MyImage@2x.png - 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

Community
  • 1
  • 1
bdalziel
  • 2,005
  • 3
  • 17
  • 32