January 7, 2015

iOS – Image Assets to Support Multiple Devices

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

Subscribe to our Newsletter

Stay informed on the latest technology news and trends

Relevant Insights

Cybersecurity Myth Busted: Tools Are the Solution

When thinking about security, people often gravitate towards implementing various security tools, solutions, or products. If you bring up a...

Time to Reconsider MP-BGP EVPN for Your Datacenter Network?

VxLAN was defined in 2014 by RFC 7348 and has been used as a component in several SDN (software defined...

Part-Time Staff Cannot Monitor and Manage Your Security

Security is a full-time responsibility. It’s not 9-5. You have concerns, risks, and attacks 24/7/365. Adversaries work around the clock...