Making an app Retina Display friendly

Question

I have an app and would like to make it retina display friendly.

How exactly does the process work? What images need to be added apart from what I have?

I know the sizes should be different, but am not sure on the details?

What else needs to be done to handle retina display?

Should the device be detected and use other images if the device supports retina display?

What if there are a lot of images? And how will this effect the app size?

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 32x32 you would have one that is twice the resolution called image@2x.png at size 64x64. 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.

Answer 2

good articles if you're using sprites

http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/

Answer 3

The main thing about working with retina image is that image name convention. And the size of image should be 2times greater than regular1. Example- if your icon name for regular is icon.png then it should be icon@2x.png for retina.And second thing is size for regular is 72*72 then it should be 144*144 for Retina. It might be helpful for you.

Thnks