What to name images for iPhone 5 screen size?

Question

What is the new naming convention for images for the 4-inch retina display?

For an image named background.png you add @2x to the name ([email protected]) to tell iOS to use that one for devices with the retina display.

What would the suffix be for iPhone 5's screen size?

Glossator

See #12519379 for related information, which is the only "convention" that seems to exist. Otherwise, continue to use @2x as before. – Meehan

Answer 1

You can use my #defines to help you with these images:

#define isPhone568 ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone && [UIScreen mainScreen].bounds.size.height == 568)
#define iPhone568ImageNamed(image) (isPhone568 ? [NSString stringWithFormat:@"%@-568h.%@", [image stringByDeletingPathExtension], [image pathExtension]] : image)
#define iPhone568Image(image) ([UIImage imageNamed:iPhone568ImageNamed(image)])

Just give your images the [email protected] notation, and use iPhone568ImageNamed to get a name for standard name or iPhone 5/new iPod.

Usage example from the comments:

self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:iPhone568ImageNamed(@"mainscreen.png")]];

Ap

Q: If the name is passed in as "foo.png" doesn't it end up converting to "foo.png-568h" instead? – Scrawny

Ahh, what about this? #define iPhone568ImageNamed(image) (isPhone568 ? [NSString stringWithFormat:@"%@-568h.%@", [image stringByDeletingPathExtension], [image pathExtension]] : image) – Scrawny

That's a nice idea, I will add it to the answer. – Atween

Thanks! I tell you, just when I think I have NSString figured out, I discover something new to like about it. – Scrawny

example of this with a background pattern: self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:iPhone568ImageNamed(@"mainscreen.png")]]; – Deraign

what's the best event to override the self.view.backgroundColor in ? – Elisaelisabet

Do you mean when the device rotates? If so, in veiwDidLayoutSubviews. Otherwise, viewDidLoad is a good candidate. – Atween

I think this macro is a bad idea in general, you should just configure with your imageView contentMode and autoreszing in 90% cases. https://mcmap.net/q/501642/-suffix-for-retina-images-in-iphone-5 – Mcclenon

@LudovicLandry It is inevitable if you want to have a precise 1:1 pixel mapping between the image and screen. Your suggestion can and will create upscale artefacts (blurring, for example). – Atween

@LeoNathan Depends, for a lot of cases you can just have your imageview autoresizing with a fix top and bottom and have your content image inside that is top or centered. With your imageView that clip subviews. You see more content on 4-inch and there is no deformation. I agree that for some specific cases another image is required, but it's better to try to avoid that if possible. Who knows how many size we will have in the future? – Mcclenon