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

ios resolution iphone-6 iphone-6-plus

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.

Then what the use of the Retina 4 2x, if none of the device using it?

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?

@MatrosovAlexander how you solved that?

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

follow "stackoverflow.com/questions/48483934/…"

iluvatar_GR

UPDATE:

New link for the icons image size by apple.

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

https://i.stack.imgur.com/X2PMj.png

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

https://i.stack.imgur.com/6sTql.png

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:

https://i.stack.imgur.com/9E2Bs.gif

if all devices are retina 2x or 3x why assets catalog ask for 1x images on projects for targeting for iPhone only on iOS 7/8? Does not make sense.

might be that for iphone4 @RubberDuck :) see that ipad 2 and iPad Mini that need 1x

sorry but you did not read what I wrote. I am talking about an iPhone only project for iOS 7. There is no iphone with 1x that can run iOS 7 but the assets catalog still ask for it.

@RubberDuck Select your image asset and then view the utilities pane on the right side of Xcode. One of the tab has a set of checkboxes. Perhaps your asset(s) have too many checkboxes selected resulting in the 1x appearing as an option.

developer.apple.com/ios/human-interface-guidelines/graphics/… newly link

TSob

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.

Yes I tested with simulator, all devices take @3x images , confusing indeed

So in conclusion, as of today the best possible path would be utilizing "@2x" in image names but somehow device-checking for 6 Plus and using a 3x image WITHOUT the "@3x" so as not to poison the 2x devices?

It seems that the 3x choice on iPhone 6 only happens if the asset in question is JPG instead of PNG.

matt

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:

https://i.stack.imgur.com/BQaLP.png

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, one@2x.png, and one@3x.png) 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:.)

You have marked the asset as "universal", hence why you see consistent behaviour. Try selecting "device specific" in the drop-down menu instead!

@RalphZhouYuan It now works fine for me. You won't see the 2x version listed, but just assign the 1x version and the 2x or 3x version will be correctly used. Or, just use an asset catalog.

@RalphZhouYuan Here's my downloadable example: github.com/mattneub/Programming-iOS-Book-Examples/tree/master/… - it displays both using image files in the app bundle and image files in the asset catalog and they all work correctly.

@matt I finally find that my issue is related to the deployment target settings(which is 6.0) of my app.I opened a question: stackoverflow.com/questions/26333278/… and fired a bug report to Apple.

@RalphZhouYuan Wow, great detective work tracking that down! Thanks for reporting back.

Bastian

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/

just use the amazing PaintCode for vectors in apps

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US