As you know, several iOS devices are available on the market, such as iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6+, iPad, iPad Retina, etc.
These devices have different resolutions when newer devices (such as the iPhone 6 and iPad Retina) have a higher resolution and older devices (such as the iPhone 4) have lower resolutions.
For an @ 1x , @ 2x, and @ 3x image, placeholders in the image resource allow you to provide:
- low resolution image displayed at @ 1x ,
- a medium definition image displayed at @ 2x , and
- high resolution image displayed on @ 3x .
Therefore, in the universal application, the @ 1x / low resolution image for your icon, for example, will be automatically used for iPhone 4 devices, and your @ 3x / high resolution image will be used for iPhone 6 devices.
For my universal applications, I use various PNG images and scale them according to the icons and image sizes in the Apple iOS Human Interface Documentation .
For example, if I have an application icon , I will create three different copies of this image in three different sizes:
- Low resolution version @ 1x at 76 x 76.
- Medium resolution @ 2x for 120 x 120.
- High resolution version @ 3x at 180 x 180.
If you are using a storyboard, you can drag the corresponding image to the corresponding image position of the 1x / 2x / 3x image for the image.
Refer to the Apple Human and User Interface guidelines again for the approximate size of the image you want to target for various assets (e.g. application icon, launch image, settings icon, tab bar icon, etc.).