iphoneretina-display

Supporting graphics for both Retina and non-Retina display


I wanted to know how I should 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 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? How can I deal with supporting both screen dimensions/resolution?

Note: I am using Xcode 4.3.3 and using storyboards.


Solution

  • You must make two versions of each image. For example, if you had a 544x151 image for retina, say its called 'background@2x.png', 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 "background@2x.png"

    This also is the correct way to make icons compatible with retina devices. Just make a 114x114 (iphone) or 144x144 (ipad) and name it "icon@2x.png".