iPhone 6 - Using precisely sized images through naming convention

Question

Apple's HIG has the following to say regarding graphical assets for iPhones:

Support the Retina display. Make sure that you supply high resolution assets for all artwork and graphics in your app. In particular, supply @3x assets for iPhone 6 Plus and @2x assets for all other high-resolution iOS devices.

Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your app to look skewed or too large. Let users choose whether they want to zoom images in or out.

Looking at this and other related sources, I take it that for general graphical assets, the iPhone 6 will take the same @2x retina images of 640x1136 size and scale them up to its own 750x1334 size. Is this correct?

What I would like to know is whether there is an easy way (e.g. through some naming parameters like @2x or -568h) to include separate assets at the 750x1334 size and FORCE iPhone 6 devices to use them instead of scaling up 640x1136 assets.

Note: I'm aware that this can be done by identifying the device in the code, perhaps defining a category, and pointing to a special image depending on the device. Just wondering whether there is an easier way without coding.

possible duplicate of How to specify size for iPhone 6 customised edge-to-edge image? — Niklas Berglund

elliotrock elliotrock · Accepted Answer · 2014-09-24T09:29:04

I am making an assumption that the naming convention is the following:

retina display, > iPhone 4s

image_name@2x~iphone.png

retina display iPhone 6 plus:

image_name@3x~iphone.png

Note: iPhone 6 plus is not 3 x the original sized screen. It is 2.34 so what I mean when you are creating 1 to 1 pixel assets of 44x44 actual pixels, is 88x88 on a retina then 103x103 on an iPhone 6 plus. But you should be using the extra screen size for a different UI/UX rather than just scaling up the size of your elements.

The way to maintain a non scaling of existing sizes would be fixed autolayout on those image resources, making sure those images are constrained by the x1 size. Like if your image was at x1 32pixels squared:

UIImageView *imageView= [[UIImageView alloc] initWithFrame:CGRectZero];
imageView.translatesAutoresizingMaskIntoConstraints = NO;
imageView.image=[UIImage imageNamed:@"your_image"];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[image(32)]" options:0 metrics:0 views:@{@"image":@(imageView)]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[image(32)]" options:0 metrics:0 views:@{@"image":@(imageView)]];

And use your @2x @3x images, the issue is if apple doesn't have a @3x named image for a resource it will upscale the next best thing the @2x image. SO there might not be a way to avoid that easily. I sort of wish apple would remove the base x1 sizing now that there phones are different resolutions. I would prefer a one to one pxiel measurement convention.

Work it like Apple wants you to, use autolayout as a convention. Above should keep the image the same, I am getting an iPhone plus later so will test it out.

iPhone 6 - Using precisely sized images through naming convention

1 Answers