141

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.

Community
  • 1
  • 1
Bhumit Mehta
  • 16,278
  • 11
  • 50
  • 64
  • Then what the use of the Retina 4 2x, if none of the device using it? – Mrunal Dec 20 '14 at 07:56
  • 1
    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 Oleksandr Feb 03 '15 at 14:04
  • @MatrosovAlexander how you solved that? – Mário Carvalho Feb 18 '15 at 17:14
  • 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 Oleksandr Feb 18 '15 at 18:08
  • follow "https://stackoverflow.com/questions/48483934/how-to-handle-iphone-screen-sizes-resolution-for-background-images/48563225#48563225" – Rishil Patel Mar 16 '18 at 15:56

4 Answers4

102

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

iluvatar_GR
  • 1,017
  • 13
  • 19
Nitin Gohel
  • 49,482
  • 17
  • 105
  • 144
  • 8
    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. – Duck Sep 11 '14 at 10:25
  • 1
    might be that for iphone4 @RubberDuck :) see that ipad 2 and iPad Mini that need 1x – Nitin Gohel Sep 11 '14 at 11:50
  • 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. – Duck Sep 11 '14 at 11:53
  • @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. – rmaddy Sep 11 '14 at 20:35
  • @RubberDuck Even though there is space for 1x, you do not have to use it. We published an iOS 7+ app for iPhone which only had 2x assets. This was approved for the App Store. – jowie Sep 15 '14 at 09:08
  • @jowie - ok but then your iPhone app will not be able to run on ipad mini with iOS 7. Have you tested it? I am curious to know if it will run. – Duck Sep 15 '14 at 09:53
  • I will have to check, but from previous experience I've noticed that the assets are just scaled down to size, although you do get aliasing artefacts. Since we were not that concerned with how the app looked on iPad, we didn't bother to test. – jowie Sep 15 '14 at 14:54
  • Can we submit iOS 8 apps *without* @3x assets? Will they get rejected? – emma ray Sep 16 '14 at 20:46
  • 1
    https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/ newly link – JerryZhou Sep 27 '16 at 06:01
54

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.

TSob
  • 566
  • 5
  • 4
  • 2
    Yes I tested with simulator, all devices take @3x images , confusing indeed – Bhumit Mehta Sep 11 '14 at 07:36
  • 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? – darkheartfelt Oct 17 '14 at 21:59
  • It seems that the 3x choice on iPhone 6 only happens if the asset in question is JPG instead of PNG. – emreberge Apr 07 '15 at 13:09
10

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, 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:.)

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • 1
    You have marked the asset as "universal", hence why you see consistent behaviour. Try selecting "device specific" in the drop-down menu instead! – Nikolay Spassov Sep 29 '14 at 15:32
  • @matt, thank you for the answer. It's been almost a month and I wonder if this issue has been fixed cause I still got it in Xcode 6.0.1 and can't find the answer on google. – inexcii Oct 08 '14 at 02:49
  • @RalphZhouYuan What is "this issue"? – matt Oct 08 '14 at 02:58
  • @matt The issue that "interface builder ignores 2x version image on double-resolution devices when you assign the image to a UIImageView" in your answer. Sorry for the confusing. – inexcii Oct 08 '14 at 05:20
  • 1
    @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. – matt Oct 08 '14 at 15:30
  • 1
    @RalphZhouYuan Here's my downloadable example: https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/bk2ch02p050HiResTest2 - it displays both using image files in the app bundle and image files in the asset catalog and they all work correctly. – matt Oct 09 '14 at 03:18
  • 3
    @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: http://stackoverflow.com/questions/26333278/xcode-6-loads-3x-image-incorrectly-when-apps-deployment-target-is-set-to-6-0-or and fired a bug report to Apple. – inexcii Oct 13 '14 at 05:24
  • 1
    @RalphZhouYuan Wow, great detective work tracking that down! Thanks for reporting back. – matt Oct 13 '14 at 14:30
  • Would a script that reduces by thirds be useful? After exporting so many times I wrote an extension here, https://www.velara3.com/wp/2015/01/22/export-to-multiple-sizes-for-photoshop/ that exports to multiple sizes and if reduction by 3rds is helpful I'll add it as one of the default options. – 1.21 gigawatts Dec 31 '16 at 00:27
  • What it sounds like is you'd start out with the highest resolution and then create two additional images at the smaller sizes. So if you want to target 3x then you'd create your image at 300 and a 200 and 100 version would be created. I could automate that. – 1.21 gigawatts Dec 31 '16 at 00:34
  • can i use like one@1x.png, one@2x.png and one@3x.png in assets @matt – Dilip Tiwari Oct 27 '18 at 05:49
2

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/

Bastian
  • 10,403
  • 1
  • 31
  • 40