iOS Image Naming Conventions

Question

I'm relatively new in iOS development.

I'm currently building an app using the cocos2d library that will be available for the iPad Retina, iPad, iPhone 5, and iPhone 4s/4.

I'm getting all of my images setup, and I'm trying to figure out the naming conventions.

Does anyone know of a guide out there that could help me?

Say I have a background.png.

From what I understand:

• background.png -> iPhone (non-retina/fallback)
• background-hd.png -> iPhone 4s/4 (retina)
• background-ipad.png -> iPad (non-retina)
• background-ipadhd.png -> iPad (retina)

And the same naming convention would be used for all other files? For example:

• arbitraryButton.png -> iPhone (non-retina/fallback)
• arbitraryButton-hd.png -> iPhone 4s/4 (retina)
• arbitraryButton-ipad.png -> iPad (non-retina)
• arbitraryButton-ipadhd.png -> iPad (retina)

What do I name the iPhone 5 files?

I've searched a bit and cant seem to find any tangible guides out there on this.

Thank you!

Answer 1

The OS has a naming convention that you can use (and enforces for you, meaning you only need to reference the file as @"fileName"). The documentation is available here.

• fileName.png -> iPhone (non-retina/fallback)
• [email protected] -> iPhone 4s/4 (retina)
• fileName~ipad.png -> iPad (non-retina)
• fileName@2x~ipad.png -> iPad (retina)

Note: ~iphone also exists, and can be used with/instead of using ~ipad. Using both ~ipad and ~iphone would safeguard against a third idiom Apple may introduce. cough TV cough

As for the iPhone 5, the OS does not enforce a naming scheme. But, it'd probably be wise to use the same scheme as that for the launch image.

• [email protected] -> iPhone 5

To handle this easily throughout the app, you can create a category, and use it where you know you will have an iPhone 5 friendly image, as well as a regular sized image. A simple version can be made, like the one below.

UIImage+iPhone5Image.h

#import <UIKit/UIKit.h>

@interface UIImage (iPhone5Image)

+ (UIImage*)iPhone5ImageNamed:(NSString*)imageName;

@end

UIImage+iPhone5Image.m

#import "UIImage+iPhone5Image.h"

#define IsIPhone5() ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone && [UIScreen mainScreen].bounds.size.height == 568)

@implementation UIImage (iPhone5Image)

+ (UIImage*)iPhone5ImageNamed:(NSString*)imageName
{
    if (IsIPhone5()) {
        NSString* newImageName = [NSString stringWithFormat:@"%@-568h", imageName];
        return [UIImage imageNamed:newImageName];
    }
    else {
        return [UIImage imageNamed:imageName];
    }
}

@end

Answer 2

It looks like you are after the cocos2d naming conventions not the standard UIKit versions. They are different and if you are using cocos2d you are recommended to use the cocos2d suffixes and not the UIKit ones.

They are as follows:

• Non retina iPhone (No suffix)
• Retina iPhone -hd
• Non retina iPad -ipad
• Retina iPad -ipadhd
• iPhone 5 -iphone5 and -iphone5hd

All files that you want loaded based on the device that are used with the cocos2d methods can be suffixed like this.

Answer 3

Ok, Now cocos2d itself support iphone5.

-hd.png for iPhone HD 
-ipad.png for iPad 
-ipadhd.png for iPad HD
-wide.png for iphone 5
-widehd.png for iPhone 5 HD

If your Cocos2d version is old then use:

static inline NSString *i5res(NSString * data)
{
    if(IS_IPHONE5)
    {
        return [data stringByReplacingOccurrencesOfString:@"." withString:@"-whd."];
    }

    return data;
}
//usage
CCSprite *bg = [CCSprite spriteWithFile:i5res(@"bg.png")];