January 7, 2015

iOS – Image Assets to Support Multiple Devices

Post by: Shaun Hankermeyer

As Apple continues to rollout new iOS devices, how do we create image assets that will fit and scale to these multiple form factors?  Apple has great documentation to help you design your assets as well as conform to sizes and other standards.  You can use this as your complete reference going forward – Icon and Image Sizes.  In the meantime, here is some basic information on image sizing and usage that will be a great starting point.  I will be targeting iOS 8 and the iPhone devices it supports.

There are quite a few devices that can run iOS 8, so you will need plan accordingly.  iOS 8 will run on the iPhone 4s, 5, 5c, 5s, 6, and 6 Plus.

For app icons and launch images, you can put them in an asset catalog inside your Xcode project.   To add images to an asset catalog, select the asset catalog in your project, right-click in the empty pane on the left and choose ‘New App Icon’ or ‘New Launch Image’.

Drag your app icons to the iOS 7, 8 section using images sized 120 x 120 for 2x, and sized 180 x 180 for 3x.  When using an asset catalog, image names are irrelevant.

For launch images, drag your images to the ‘iPhone Portrait iOS 8’ section for Retina HD 5.5 (1242 x 2208) and 4.7 (750 x 1334) as well as ‘iPhone Portrait iOS 7,8’ for 2x (640 x 960) and Retina 4 (640 x 1136).  Again, since we are using the asset catalog for these, the image names are irrelevant.

For background images you will need 4 sizes to support the above devices in portrait orientation.  They can be stored in whatever folder in your project that you are keeping standard images in.  The sizes needed are as follows…
•    640 x 960 (iPhone 4s)
•    640 x 1136 (iPhone 5s)
•    750 x 1334 (iPhone 6)
•    1242 x 2208 (iPhone 6 Plus)

Following a standard naming convention, we can then use the code below in your app delegates’ didFinishLaunchingWithOptions method to see which device is running the app and choose the appropriate image.  The conditional statements below check for the screen height in points, not pixels as the images are defined in.

For all other standard images in your app you will need two sizes.  For example if you have a tab bar icon that is 50 x 50.  You would name that image1@2x (image1 is an arbitrary name, but the @2x is required).  You would then need the same image sized 1/3 larger at 75 x 75.  You would then need to name that image image1@3x.  The @2x are for all retina devices (all supported iOS 8 devices are retina displays) except the iPhone 6 Plus.  The @3x version is for the iPhone 6 Plus.  These images can be stored in your standard image folder in your project.  You access the images in code without the @2x or @3x.  Based on the detected device, the correct image will be chosen.

This should be a great starting point for working with assets in iOS.  Remember, following these conventions and all the other conventions in the iOS image documentation will make working with all these images much easier and allow for a much better user experience.

See our App Modernization capabilities

Relevant Insights

New Site Showcases Our Growth Into a Full-Service IT Consultancy

Over the past year, Core BTS has evolved. Simply put, we’ve amassed greater scale and expertise that, in combination with...

5 Steps to Reduce Your Ransomware Risk

As the recent ransomware attack on the U.S.’s second-largest meat producer, JBS, made clear, cyberattacks on critical infrastructure can cause...

How to Unlock the Organizational Value of Digital Transformation

As organizations look to stay competitive in today's dynamic and unpredictable marketplace, a trend has re-emerged that is ushering us...
X