Xcode iOS Universal application Image sizes

Question

I am trying to create universal application for all iOS devices (iPhone and iPad). Now i am confused by Image size processing. give me a @1x , 2x, 3x Image size process and details.

Answer 1

As you know, there are multiple iOS devices available in the marketplace, such as iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6+, iPad, iPad Retina and so forth.

These devices have different resolutions where the newer devices (such as iPhone 6 and iPad Retina) have higher resolutions and older devices (such as iPhone 4) have lower resolutions.

For an image, the @1x , @2x and @3x placeholders in an image asset allows you to provide:

1. a low resolution image which maps to @1x ,
2. a mid resolution image which maps to @2x , and
3. a high resolution image which maps to @3x .

Therefore, in a universal app, the @1x / low resolution image for your icon, for example, will be used automatically for the iPhone 4 devices while your @3x / high resolution image will be used for the iPhone 6 devices.

For my universal apps, I take my various PNG images and scale them according to Icon and Image Sizes in Apple's iOS Human Interface Guidelines documentation.

For example, if I have an App Icon image then I will create three different copies of that image in three different size:

1. The low resolution @1x version at 76 x 76.
2. The mid resolution @2x version at 120 x 120.
3. The high resolution @3x version at 180 x 180.

If you are using a storyboard then you can drag and drop the relevant image into the corresponding 1x/2x/3x image assets position for the image.

Again, refer to Apple's Human and User Interface guidelines to get a feel for an approximate image size that you want to target for the various assets (ie, App icon, Launch image, Settings icon, Tab bar icon, etc).

Answer 2

There is an image naming convention for the devices. Please check below apple doc for more refrences- http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/LoadingResources/ImageSoundResources/ImageSoundResources.html#//apple_ref/doc/uid/10000051i-CH7-SW17

use '~iphone' for iPhone images and no suffix for iPad. You may use '~iPad' for iPad images.

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.