When using images in your iOS applications, you will need to have different sizes images.
For example here are some of the different sizing required:
- Non-retina display on iPod touch and iPhone
- Retina display on iPhone
- Non-retina display on iPad
- Retina display on iPad
Retina Display Images
Images for retina displays need to be twice (@2x) the size of what the pixel size of the item in Xcode is (or the 1x version). To target retina displays, just use @2x after the image name:
<image name>@2x.<image extension>
For example:
- Non-retina image: buttonBackground.png
- Retina image: buttonBackground@2x.png
Device Specific Images
To target a specific device, you can further append onto the file name a device identifier:
<image name>@2x<device identifier>.<image extension>
The two device identifiers available are: “~iphone” and “~ipad”. For example:
- Non-retina image for iPhone:
buttonBackground~iphone.png - Retina image for iPhone:
buttonBackground@2x~iphone.png - Non-retina image for iPad:
buttonBackground~ipad.png - Retina image for iPad:
buttonBackground@2x~ipad.png
iPad Mini?
With the recent release of the iPad Mini you may be curious about what you need to do with your image resources to support this new device. Actually, <you don’t need to do anything. The iPad mini uses the same 4:3 ratio as the iPad, and as such, will use the images that you designate for the iPad (either using the naming convention above, or using a specific xib).
The key to ensuring your images, and especially buttons that use custom images, is following Apple’s Human Interface Guidelines. This ensures that your buttons are appropriately sizes, with adequate spacing, and large enough text.
You can read more of the use of images, and other resource, in Apple’s Resource Programming Guide.