6

I'm almost done building my first iPhone app and am trying to add a background image, and am finding it a little confusing, because nowadays there's like 3 or 4 different size screens among the different iPhone versions, with different resolutions to boot.

So while I'm aware of the whole image@2x.png thing, I still don't know what I really need. If I want my app to run on iPhone 4/4s, 5s/5c, 6/6+, how many different versions of a background image do I need, and at what sizes and resolutions?

I have googled around and have not found any cohesive answers up to date for 2014.

Also, if the iPhone 6 is 1334x750 @3x, does that mean I'm supposed to include a 4002x2250 background? And then for the 1920x1080 iPhone 6+ @3x, a 5760 x 3240 image? That's MASSIVE! I feel like I must be understanding this incorrectly.

temporary_user_name
  • 35,956
  • 47
  • 141
  • 220
  • Is your background image a picture of something or just a repeating pattern? – Rick Dec 05 '14 at 07:42
  • [Picture of a repeating pattern](http://imgur.com/livVRu4) :) I guess I was planning on cropping it into shape or something. – temporary_user_name Dec 05 '14 at 07:46
  • Just use constraints and scale the image to your needs – soulshined Dec 05 '14 at 07:55
  • have you seen this post? http://stackoverflow.com/questions/25755443/iphone-6-plus-resolution-confusion-xcode-or-apples-website-for-development this may help you to understand – wcd Dec 11 '14 at 16:57
  • I have seen it, yes, but then I have the guy below telling me I need a 3726 x 6624 image. So 1224x2208 @3x means that the 1224x2208 is ALREADY 3x the size of the screen, not that I need triple those dimensions? – temporary_user_name Dec 11 '14 at 21:48
  • It's better to comment on my answer if you have a question about it. Found this by chance. Apparently I have misunderstood how @3x works, what you say is true, a 6+ image that covers the entire screen should be 1224x2208. It's quite a weird decision from Apple and the 2x/3x does cause a lot of confusion. The linked answer explained it well though. – Rick Dec 13 '14 at 12:06
  • So this means that if you're only supported iPhone 4 and up, you only need `@2x` and `@3x` images, no base image? – temporary_user_name Dec 13 '14 at 19:53
  • dude you need to summon me with a @ if you want to reply my comment. And iPhone 6 is not @3x. That is incorrect. See my answer below. And if you have question, you should comment on the answer too. – wcd Dec 15 '14 at 02:21

5 Answers5

5

I think the easiest way to do this is to use an image that fits on iPhone 6+ and then simply set UIImageView's contentMode to UIViewContentModeCenter. I think it's that one at least, the result should be that on iPhone 6+ you have a centered image but on the other screens you simply get a part of the image.

The downsampling of the iPhone 6+ means that an @3x asset covering the entire screen should be 2208x1242 (That is, this resolution is already 3x. The "real" resolution is 736x414). This is the largest resolution needed and you can then use the same image for @2x and @1x assets using the method I described.

Rick
  • 3,240
  • 2
  • 29
  • 53
  • Not a bad idea at all. Still means finding/creating a 3726 x 6624 image...massive. – temporary_user_name Dec 05 '14 at 20:42
  • Yes, but can't you simply generate the image that you already have but at a larger resolution? – Rick Dec 06 '14 at 09:19
  • As mentioned in the comments to the question, my reply saying that a 3726 x 6624 image is needed was wrong. I've updated the answer accordingly – Rick Dec 13 '14 at 12:07
  • 736 x 414 is the logical size, not the "real" resolution. The "real" resolution is 2208 x 1242 sampled about 87% down. See my answer below. – wcd Dec 15 '14 at 03:02
  • If you disagree with my wording you could have edited the reply. – Rick Dec 15 '14 at 08:23
5

If you want to support native resolution of iPhone 6/Plus, you need to add launch images (prior to iOS 8) or launch screen xib (iOS 8).

iPhone 4/4S: 640 x 960

iPhone 5/5S: 640 x 1136

iPhone 6: 750 x 1334

iPhont 6 Plus: 1242 x 2208

That means you need to prepare 4 launch images with above resolution if you want to support these devices. You can use iOS simulator to capture screenshots with different resolutions. Your app will run in compatibility mode on new resolution devices if it can't find the launch image of the specific resolution. compatibility mode means your view will be scaled to fit the new screen size when still have the same logical size.

EDIT:

I think op misunderstands what do @2x and @3x mean. The resolution of iPhone 6 is 750(pixels) x 1334(pixels), 326 pixels per inch. This is the REAL resolution. And 375(points) x 667(points) is the logical size if the native resolution is supported. iPhone 6 Plus's resolution is 1242(pixels) x 2208(pixels), 401 pixels per inch and the logical size is 414(points) x 736(points).

This is how images with different resolutions work on iOS device:

Let's say you want to run your app on iPhone 4s, iPhone 5/5S, iPhone 6/plus. First thing you should do is to provide 4 launch images to support native resolutions of these devices. When iOS launch your app, it will check if the app provides the right launch image to support the native resolution of current device. If iOS finds it, then use that in launch time and the logical size of screen is right, your app runs as normal. Otherwise, your app will run in compatibility mode in which all of the views will be scaled.

Suppose there is an image named foo.png in your app of which the logical size is 100(points) x 100(points). You want this image looks same in all the above devices. You should provide 2 versions of this image. One is 200(pixels) x 200 (pixels) and should be named foo.png@2x and the other is 300(pixels) x 300(pixels) named foo.png@3x. If you load this image with [UIImage imageNamed:@"foo"], on devices except iPhone 6 plus, the app will load the image named foo.png@2x. Otherwise the app will load foo.png@3x and sample it down to 300 * 84%(pixels) x 300 * 84%(pixels).

And if you load an image from an url and need to render it on the runtime. Let's say the size you get is {width:100, height:100}, the scale is 1.0. This means the REAL size of this image is 100 * 1.0(pixels) x 100 * 1.0(pixels. If you don't want it to be scaled, you need to calculate the logical size yourself. You do it like this:

UIImage *image = ... // you get it from an url
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat width = image.size.width / scale; 
CGFloat height = image.size.height / scale;
CGRect frame = CGRectMake(50.0f, 50.0f, width, height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeCenter;
imageView.image = image;
[self.view addSubview:imageView];
wcd
  • 1,144
  • 8
  • 15
2

You will need three versions of the background image(1x,2x,3x).A good practice to have images of the correct size is to make an image of a size that is 3 times the size of your view and then make the 2x and 1x versions by scaling down.

Apple has come up with a new concept called 'Size Classes' to support the different device sizes.To use size classes you will need the latest version of Xcode(Xcode 6). In the interface builder you can set different set of constraints for different size classes. This way it becomes easier to support all screen sizes. To know more about Size classes watch the WWDC 2014 video "Building Adaptive Apps with UIKit".

Varoon
  • 172
  • 1
  • 5
  • But aren't the ratios different? I can't just have the same X by Y at 1x/2x/3x, the screens are different shapes... – temporary_user_name Dec 05 '14 at 09:38
  • And, to be clear, if for example the iPhone 6+ requires 1242 x 2208 @3x, is that to say I'm supposed to include a 3726 x 6624 image? That's huge... – temporary_user_name Dec 05 '14 at 09:48
  • @Aerovistae You are right. The ratios will differ for the different screen sizes. I usually use the approach I mentioned when Im setting an image for a subview which has a fixed aspect ratio. In your case you can edit the images for different screen sizes and set the appropriate image for each size class. For each aspect ratio have a 1x,2x and 3x version. – Varoon Dec 05 '14 at 12:04
  • You're saying I need a 1x/2x/3x for EACH aspect ratio, for a total of 9 versions of the background image? That doesn't make sense to me, am I misunderstanding? – temporary_user_name Dec 05 '14 at 20:41
  • That would be a safe approach. Basically the retina displays use 2x and iPhone 6 Plus uses @3x and the remaining use 1x.Let me do the work for you and give you a list of resolutions that you will need to cover all the iPhone devices as another answer. – Varoon Dec 06 '14 at 13:43
1

Which game engine are you using ? If you are using cocos2d or cocos2dx then you can use background image of 960 * 640 .Below code will scale the images according to the screen size. 

CCSize frameSize = pEGLView->getFrameSize();
    CCSize designSize = CCSizeMake(480, 320);
    vector<string> searchPaths;

    CCSize resourceSize;

    Utility :: isPad = true;
    searchPaths.push_back("hd");
    resourceSize = CCSizeMake(960, 640);

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width , designSize.height, kResolutionExactFit);
    pDirector->setContentScaleFactor(resourceSize.width/designSize.width);
pankaj khanduja - Game Changer
  • 52
  • 7
0

These are the different resolutions you will need for your background image.

  1. iPhone 4/4S - 640 * 960
  2. iPhone 5/5S - 640 * 1136
  3. iPhone 6 - 750 x 1334 for portrait 1334 x 750 for landscape
  4. iPhone 6 Plus - 1242 x 2208 for portrait 2208 x 1242 for landscape
Varoon
  • 172
  • 1
  • 5