Using imageNamed to pick the right image file

February 5, 2013 by
Filed under: iOS 

When designing an iOS app for different devices in the iOS family, there are a lot of different sizes (and corresponding image files). Rather than having to code all the different cases, UIKit’s UIImage imageNamed can take care of it. This is achieved by using naming conventions, so that UIImage can choose the “right” image file depending on the device the app is running on.

Elements of the “imageNamed” Naming Convention

In order to have a call to

[UIImage imageNamed: <base name>];

return the right image, the full name of the image files (and the corresponding elements in Xcode’s Project Navigator) should be constructed like this:

<base name><iPhone5 element><Retina element><iPad element>.<image type>

Here are the elements used to construct the complete file names:

  • iPhone5 images get a “-568h”
  • Retina resolution images get a “@2x”
  • iPad images get a “~ipad” (case dependent)
Some additional points:
  • I found that this works for .PNG images, I couldn’t get it to reliably work for JPG images.
  • I’ve heard conflicting information whether you can drop the retina element for an iPhone5 image. Some posts are reasoning that it’s not needed as there is no non-retina iPhone with a 568px height. However, I found it only worked consistently with the “@2x” element.
  • This convention does not differentiate between landscape and portrait images. If you want to use different images, you have to use different base names, detect the current orientation and choose the right “class” of images.

Complete File Names for different Devices

Putting these elements together, we get the following file names for the base name AppBg (short for App background):

Device Naming Convention Example
iPhone (Non-Retina) <base name>.png AppBg.png
iPhone (Retina) <base name>@2x.png AppBg@2x.png
iPhone5 <base name>-568h@2x.png AppBg-568h@2x.png
iPad (Non-Retina) <base_name>~ipad.png AppBg~ipad.png
iPad (Retina) <base_name>@2x~ipad.png AppBg@2x~ipad.png

Usage

So when you are using the method call

[UIImage imageNamed: @”AppBg”]

the result will automatically contain the right image for the device your app is running on.

In addition to using the right image in your code (e.g. for the background image), this name convention also applies to the “Default” image that is used as the “splash screen” when an application starts.

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!