Image resolution for new iPhone 6 and 6+, @3x support added?

141
votes

I have looked on few articles and discussion like one here and Here about image resolutions that new iPhones will use @3x images for display. Is it true?

So does it mean we will have to keep three images? Say for example I have an image of 50 X 50, will I have to keep 3 images for optimizing the look for new iPhones?

  • Normal (50 X 50)
  • @2x - Retina (100 X 100)
  • @3x - Retina HD (150 X 150)

Or will the new phones use @2x images only and there is nothing like @3x?

I have tested by making a sample project and all simulators seem to use @3x images, this is confusing.

Edit

Here is some more info

  • 3GS ( 163 ppi so use Normal)
  • 4, 4s, 5 and 5s (326 ppi so we use @2x)
  • 6 (326 ppi so it seems like it will use @2x)
  • 6 plus (401 ppi here lies the confusion )

Edit

Based on Answers given by Tsob and nitin, I added @3x images to my project.

Informational Edit

I see few users are confused about why iPhone 6 uses @2x images even though it has higher resolution , the reason is

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 as it has same PPI and iPhone 6 plus uses @3x.

4
iosresolutioniphone-6iphone-6-plus
Then what the use of the Retina 4 2x, if none of the device using it? – Mrunal
I agree that the density is the same for 4, 5 and 6 iPhones but how to solve different resolution issue? So it's big difference 640x960 and 750 × 1334 pixels. If I need to use background image that overlay whole screen. How can I set image xcassets in this case? – Matrosov Alexander
@MatrosovAlexander how you solved that? – Mário Carvalho
as workaround I used iphone 6 image for @2x image as well but it's starnge that xcode does not have appropriate image for it – Matrosov Alexander
follow "stackoverflow.com/questions/48483934/…" – Rishil Patel

4 Answers

54
votes

I've tried in a sample project to use standard, @2x and @3x images, and the iPhone 6+ simulator uses the @3x image. So it would seem that there are @3x images to be done (if the simulator actually replicates the device's behavior). But the strange thing is that all devices (simulators) seem to use this @3x image when it's on the project structure, iPhone 4S/iPhone 5 too.
The lack of communication from Apple on a potential @3x structure, while they ask developers to publish their iOS8 apps is quite confusing, especially when seeing those results on simulator.

**Edit from Apple's Website **: Also found this on the "What's new on iOS 8" section on Apple's developer space :

Support for a New Screen Scale The iPhone 6 Plus uses a new Retina HD display with a screen scale of 3.0. To provide the best possible experience on these devices, include new artwork designed for this screen scale. In Xcode 6, asset catalogs can include images at 1x, 2x, and 3x sizes; simply add the new image assets and iOS will choose the correct assets when running on an iPhone 6 Plus. The image loading behavior in iOS also recognizes an @3x suffix.

Still not understanding why all devices seem to load the @3x. Maybe it's because I'm using regular files and not xcassets ? Will try soon.

Edit after further testing : Ok it seems that iOS8 has a talk in this. When testing on an iOS 7.1 iPhone 5 simulator, it uses correctly the @2x image. But when launching the same on iOS 8 it uses the @3x on iPhone 5. Not sure if that's a wanted behavior or a mistake/bug in iOS8 GM or simulators in Xcode 6 though.

102
votes

UPDATE:

New link for the icons image size by apple.

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

enter image description here

Yes it's True here it is Apple provide Official documentation regarding icon's or image size

enter image description here

you have to set images for iPhone6 and iPhone6+

For iPhone 6:

750 x 1334 (@2x) for portrait

1334 x 750 (@2x) for landscape

For iPhone 6 Plus:

1242 x 2208 (@3x) for portrait

2208 x 1242 (@3x) for landscape

For more info regarding Images and it's resolution this is best ever helpful post

For setting images size for controls you can set 1x @2x and @3x like following:

enter image description here

10
votes

I have tested by making a sample project and all simulators seem to use @3x images , this is confusing.

Create different versions of an image in your asset catalog such that the image itself tells you what version it is:

enter image description here

Now run the app on each simulator in turn. You will see that the 3x image is used only on the iPhone 6 Plus.

The same thing is true if the images are drawn from the app bundle using their names (e.g. one.png, [email protected], and [email protected]) by calling imageNamed: and assigning into an image view.

(However, there's a difference if you assign the image to an image view in Interface Builder - the 2x version is ignored on double-resolution devices. This is presumably a bug, apparently a bug in pathForResource:ofType:.)

2
votes

ios will always tries to take the best image, but will fall back to other options .. so if you only have normal images in the app and it needs @2x images it will use the normal images.

if you only put @2x in the project and you open the app on a normal device it will scale the images down to display.

if you target ios7 and ios8 devices and want best quality you would need @2x and @3x for phone and normal and @2x for ipad assets, since there is no non retina phone left and no @3x ipad.

maybe it is better to create the assets in the app from vector graphic... check http://mattgemmell.com/using-pdf-images-in-ios-apps/