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


Answers

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

Question

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?




There is no image naming convention for iPad, it's only for retina displays so that your images will appear crisp. If you want to support iPad then you need to create a separate layout for it (separate xib), even separate set of images in most cases because you were given a bigger layout.

You can, however, create a naming convention for yourself and pass the string name to a static function that will convert the name to an iPad / iphone depending on the device.

E.g.

[UIImage imageNamed: [MyAppUtils getImageName:@"a.png"]];

and inside the getImageName function, you can do your conversion (use the same name if iphone, else rename to something else)




Universal application iPad/iPhone image naming convention?

I know it is old post, but I think Screenshot gives more clear idea about naming convention.

With latest devices: button@3x~iphone.png and button@3x~ipad.png




If you're loading an image named "image" the search paths are likely to be the same as they've always been:

iPhone:

  • 1) image@2x~iphone.png (retina only)
  • 2) image@2x.png (retina only)
  • 3) image~iphone.png
  • 4) image.png

iPad:

  • 1) image@2x~ipad.png (retina only)
  • 2) image@2x.png (retina only)
  • 3) image~ipad.png
  • 4) image.png



I beleive that it goes something like this:

Normal iPhone:

image.png

Retina iPhone:

image.png-hd

Normal iPad:

image.png-ipad

Retina iPad:

image.png-hd-ipad

Do not use @2x instead of -hd because you will find that you will get some errors.