iOS app non-retina and retina images concept
I am asking this question just for information and to clear my concepts about images in iOS application (Retina and non-retina devices).
What I currently do is
When I develop an iPhone application and I have to show an image lets say on UIButton using Interface builder I take two images lets suppose submit.png button image of following sizes
- 100x100 px (submit.png)
- 200x200 px ([email protected]) for retina display
And in Interface builder I will set the size of UIButton 100x100 px and its just works perfectly.
Question:
Why don't we place only single image lets say submit.png
- 200x200 px (submit.png)
And set UIButton size 100x100 px in interface builder and same image will be used in both retina and non-retina devices.
What is the actual reason of using two images rather than one single image of retina size?
Another similar question,
iPhone 5 is only available in retina display but we have to place its Default images as [email protected]. Why at 2x?
Answer
In ios Concept of image its also clear if you read this doc Custom Icon and Image Creation Guidelines
For Example if you want to create image
100 x 100 px so it must with 163 Resolution ppi submit.png NON-retina device
200 x 200 px so it must with 326 Resolution ppi [email protected] Retina device
FOR iPad:-
400 x 300 px so it must with 264 Resolution ppi submit@2x~ipad.png Retina iPad device
200 x 150 px so it must with 132 Resolution ppi submit~ipad.png Non-retina iPad device
Take a Look this Image:-
Image source from This
We inculcated @2x when we want to specify different versions of an image for iPad and iPhone. The inclusion of the @2x modifier for the high-resolution image is new and lets the system know that the image is the high-resolution variant of the standard image.
That is the key change required for the OS to size the window to fill the iPhone 5 display.has posted a writeup on this and other size-related tweaks you might need to make.
Hope this is useful info for image resolution and it's size.