Supporting graphics for both Retina and Non Retina display

Question

I wanted to know that how should i proceed to support graphics properly on both retina and non-retina display ? I have a background image of dimension 640 * 920, i think it is for retina display. But i how would i go for supporting non retina display having dimension 320*480 ? How do you structure your graphics resources ? I have group called "Art" having all graphics (right now all for retina display dimension). Will ios automatically scale down my graphics to non - retina display ? I had one more query, like i am dragging one button to a view on some absolute position for retina display, will it automatically adjust to appropriate position on devices having dimension 320 * 480 ? can i have some good online tips on how to deal with supporting both screen dimensions/resolution ? I havent found proper info on google yet.

Note: I am using Xcode 4.3.3 and using storyboards.

Gracias.

Answer 1

You must make two versions of each image. For example, if you had a 544x151 image for retina, say its called '[email protected]', make a 272x75 version for non retina display, which would be 'background.png'

Name all retina images with the suffix "@2x.png". The OS will automatically present the @2x images on retina devices. So to conclude:

272x75 would be "background.png" 544x151 would be "[email protected]"

This also is the correct way to make icons compatible with retina devices. Just make a 114x114 (iphone) or 144x144 (ipad) and name it "[email protected]".

Answer 2

You need to name your retina images with a "@2x.png" suffix.

So if you have an image "pic.png" this should be for non-retina, and "[email protected]" should be at retina scale. You should select the "pic.png" image and not the @2x one when placing it in the storyboard/xib/UIImage.

The storyboard based image will automatically pick the retina image if needed.