CODEWITHSUNDEEP
iosobjective-cxcode
Apple_Ajay
Apple_Ajay

Reputation: 227

Xcode iOS Universal application Image sizes

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.

Upvotes: 5

Views: 5460

Answers (2)

whyceewhite
whyceewhite

Reputation: 6425

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 (i.e., App icon, Launch image, Settings icon, Tab bar icon, etc).

Upvotes: 9

nilam_mande
nilam_mande

Reputation: 931

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.

[email protected] - 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.

Upvotes: 2

Related Questions