24

iPhone 6 plus uses @3x image assets, but iPhone 6 uses @2x image assets - just like iPhone 4 and iPhone 5 (Image resolution for new iPhone 6 and 6+, @3x support added?).

iPhone 5, iPhone 5C and iPhone 5S have the screen resolution 640x1136. The screen resolution of iPhone 6 is 750x1334.

So iPhone 6 will scale up images from 640x1136? Is there any way to make graphics customised for iPhone 6's slightly higher screen resolution?

Edit: I know that the PPI is the same. But say for example I want to have an image take up all available width on both iPhone 5 and iPhone 6. I create a 640x200 px image and name it my_image@2x.png. On the iPhone 6 it's going to be upscaled to 750 pixels width, no?

Community
  • 1
  • 1
Niklas Berglund
  • 3,563
  • 4
  • 32
  • 32
  • 1
    In theory, you could swizzle the imageNamed: method to specifically select @3x (or names with any other symbol) images during runtime if the device is iPhone 6, however I do not recommend this path for a production app. – Kaan Dedeoglu Sep 16 '14 at 14:11
  • 4
    Been getting some downvotes but have no idea why. Please leave a comment when downvoting. Thanks! – Niklas Berglund Sep 16 '14 at 14:15
  • It's worth mentioning that if you're using auto-layout, your application will have more space on the iPhone 6 to display content. (Not talking about the 6 Plus) If you're not, your app will be stretched/scaled. This is to support any apps that use point-based X positions but don't realize that the width might be more than 1136/568. ie. an app that wants a button to be 30 points from the right border might use an X-pos of 538.0. – Craig Otis Sep 16 '14 at 14:20
  • @CraigOtis an app that does not use auto layout will not be stretched. You can still use springs and struts or manual layout at different screen sizes. Auto layout just makes things easier. – Rog Sep 24 '14 at 14:38
  • @RogerNolan I was under the impression that if you weren't using auto layout, your app was "stretched" to fit the 6/6 Plus screen? I have an app that has not been updated to use auto layout, and it does appear to have just been "blown up", at least in the simulator, to fit the screen. – Craig Otis Sep 24 '14 at 15:06
  • Probably because you don't have a correct launch image - that's how iOS8 decides whether to scale or not. Of course, without Autolayout, it'll probably be ugly :-) easiest way to quickly add a launch "image" it to use a Storyboard http://oleb.net/blog/2014/08/replacing-launch-images-with-storyboards/ – Rog Sep 24 '14 at 15:25

3 Answers3

6

iPhone 6 uses @2x image assets and not R4 or something else because apple didn't provide suitable APIs for background images!

The most direct way now is to create 2 assets and programatically load them :(

Check this out: How to specify size for iPhone 6/7 customised edge-to-edge image?

Community
  • 1
  • 1
João Nunes
  • 3,751
  • 31
  • 32
5

iPhone 6 (not plus) has the same DPI as iPhone 4 - 5s, i.e. 326 dpi. So, 2x images still actual.

m8labs
  • 3,671
  • 2
  • 30
  • 32
  • 1
    Yes, but it has more inches. Say for example I create a 640x200 pixels image for @2x. On iPhone 6 this image will have to be upscaled to 750 pixels width, no? Or is there something I don't get? – Niklas Berglund Sep 16 '14 at 14:19
  • Perhaps this will help: http://www.paintcodeapp.com/news/iphone-6-screens-demystified – Casey Fleser Sep 16 '14 at 14:26
  • 7
    @NiklasBerglund No. A 640x200 pixel (not point) image on a 2x device will render at 320x100 points. The iPhone 4 and 5 models are 320 points wide. The iPhone 6 is 375 points wide so the image won't fill the screen width unless you set it up to do so. – rmaddy Sep 16 '14 at 14:26
  • 2
    I see, so some images will appear proportionally smaller on iPhone 6 as they aren't scaled. Still don't get why there isn't some way to specify images tailored for the resolution of iPhone 6 though. Say you have a 640x200 pixels image that you want to stretch 100% horizontally. – Niklas Berglund Sep 16 '14 at 14:39
  • 1
    @NiklasBerglund because additional pixels in iPhone 6 - it's not about stretching images, it's about additional space on the screen. If you're talking about background picture that should be stretched - that's ok, and is fully supported with SDK (resizableImageWithCapInsets:resizingMode: method). If not, you'll have additional space around this image. Bigger screen - more space, profit! – m8labs Sep 16 '14 at 14:58
  • Sure, most image assets don't take up 100% width or height. But some, for example backgrounds do. So you're saying there's no @-some-number support for images taking up 100% width or height if you want to use iPhone 6's full resolution. Instead you have to resize or load an image of appropriate size programatically? – Niklas Berglund Sep 16 '14 at 15:25
  • @NiklasBerglund yes, because @2x/@3x image loading subsystem knows nothing about your images and what you are going to do with them (except Icon image and LaunchImage). So, if you want stretchable background you must do it yourself (at least in Xcode 5, may be such setting for each image in Xcode 6? I haven't seen yet). – m8labs Sep 16 '14 at 15:43
  • @MaratAl I see. Could make it stretch with constraints. I dont desire a stretched image, just thought it's a bit odd that it's `@2x` when it isn't 2x320 pixels. Coming from non-retina to retina and pre-5 to iPhone 5's taller screen was much more straight forward. E.g. non-retina to retina **320x480** to **640x960**. In that case `@2x` makes so much sense. `@2x` for **320x480** to **750x1334** less so. – Niklas Berglund Sep 16 '14 at 16:57
  • In some cases background images can be created in bigger size (i.e. iPhone 6 resolution) and aligned based on the image structure (e.g. centered in case it's simple gradient). That way it wil just crop on iPhone 4/5 screens, but never stretched. Another case still open, is something that should take all the width minus some margins (e.g. buttons which by design should almost fill the space). Any suggestion on this one? – Mikayel Aghasyan Jun 01 '16 at 21:32
2

Marat AL is correct reffer to this thread To add to his answer

iPhone 6 might have different resolution but has same density of per pixel inch (PPI)

  • Resolution concerns an absolute number of pixels.
  • Density (aka Pixels per inch - PPI) concerns a relative number of pixels per inch which is same in case of iPhone 6 and previous iPhones , but different in iPhone 6 plus.

Check more about this here in this thread

Hence iPhone 6 uses @2x image same as iPhones 4 , 5 and 5S.

This post will definitely clear all your confusion regarding iPhone 6 resolution

Edit

This post will helped me to understand better about pixelling and scaling iPhone 6 and 6 plus

Community
  • 1
  • 1
Bhumit Mehta
  • 16,278
  • 11
  • 50
  • 64
  • 1
    I still don't get how images created for 640x1136 resolution can be displayed on a 750x1334 resolution without being upscaled? I'm aware that iPhone 6 **plus** downsamples, but AFAIK iPhone 6 does not? – Niklas Berglund Sep 16 '14 at 14:32
  • So when using an @2x image on the iPhone 5 and iPhone 6, and updating your app to use auto-layout, the image will take up the same number of pixels, but will take up less physical space on the screen? ie. If it's being displayed at the left of a table row cell, it might only cover the left-most 10% of the cell, instead of the left-most 15%, etc? – Craig Otis Sep 16 '14 at 14:33
  • @NiklasBerglund They'll be upscaled *unless* your app uses auto-layout to position them at the same *pixel* size. It's indeed a hard concept to wrap heads around. – Craig Otis Sep 16 '14 at 14:34
  • Perhaps we can use size class for that , one can have different constraints set in for different sized devices in single storyboard, havent tried it though – Bhumit Mehta Sep 16 '14 at 14:38
  • @CraigOtis I'd say I'm onboard with points vs pixels and layout. Know how to configure my app for iPhone 6, but can't see how images optimised for 640x1136 won't have to be upscaled for 750x1334. Say you create an image for 100% width horizontally. – Niklas Berglund Sep 16 '14 at 14:47
  • Ah, yes! In those cases, it *will* be stretched. The clue here is that autolayout doesn't work with percentages - it works with points. So that's how it's going to avoid stretching your images in most cases. If (with autolayout) your image is 5 pixels from the left side of the screen, and a text label starts 5 pixels from the right side of your image and goes to the end of the screen, you'll have *more room for text*. **But!** If your image is 0 pixels from the left side of the screen, and 0 pixels from the right side of the screen, and your image is 640 px wide, it *will* be stretched to 750. – Craig Otis Sep 16 '14 at 15:56
  • 1
    This is a curious situation - how do you design @2x images that are intended to be used as 100% width backgrounds? I don't know. You ultimately have to know the hardware pixels available to say, "it should be 640 pixels wide" or "750 pixels wide". Do you go with 750 and let it be downscaled on an iPhone 5? Or 640 and upscaled on an iPhone 6? I don't have the answer to that very good question. – Craig Otis Sep 16 '14 at 15:59
  • http://www.paintcodeapp.com/news/iphone-6-screens-demystified may be this can help us understand things better – Bhumit Mehta Sep 17 '14 at 06:04
  • 3
    @CraigOtis exactly. Images will appear proportionally smaller on iPhone 6, but what about when you want 100% width or height for example for background images, banners etc that take upp 100% width. I can't find a way to specify iPhone 6 specific assets. Maybe I should create another question specifically asking about this. Seems a bit strange to me if it has to be done programatically. – Niklas Berglund Sep 17 '14 at 07:36
  • @NiklasBerglund Yea, I would ask a separate question and see if anyone can clear it up. – Craig Otis Sep 17 '14 at 10:12
  • @CraigOtis I went and did that: http://stackoverflow.com/questions/25892207/how-to-specify-iphone-6-customised-edge-to-edge-image – Niklas Berglund Sep 17 '14 at 13:41