85

For example, I have a 100*100 size imageview or button, and I want to set its image or backgroundImage with a local .png file. Based on my understanding, I need to create 3 sets of images, i.e. 100*100 for @1x, 200*200 for @2x, 300*300 for @3x. I am not sure if my understanding is correct or not, can anyone help?

ReinstateMonica3167040
  • 732
  • 9
  • 27
user2053760
  • 1,673
  • 2
  • 14
  • 19
  • 9
    that is totally correct! :) the iphones < 4 will use the regular (@1x) image, the iphone 6 plus will use the largest one (@3x). the iphones between those use the *medium* image (@2x). here is a good overview: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions – André Slotta May 05 '15 at 09:53
  • Have a look at [this](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html). Hope this helps – Vivek Molkar May 05 '15 at 12:16
  • 1
    You should accept one of the answers if it helped you. It will encourage others to answer your questions. Also it will let other developers know which solution worked for you. – Yogi Sep 30 '15 at 05:22

5 Answers5

116

According to my understanding, if the image size is 100 * 100

@1x -> 100 * 100

@2x -> 200 * 200

@3x -> 300 * 300

enter image description here

There is something to understand. By creating 2x and 3x images, you can't expect exact same layout from each iPhone screen. The layout will be different from screen to screen. 1x, 2x and 3x image sizes dealing with only the pixel density of the screen.

Suppose you have an image which is 320 * 70 and you are creating

@1x -> 320 * 70

@2x -> 640 * 140

@3x -> 960 * 210

This will be your output in different screens. enter image description here

enadun
  • 3,107
  • 3
  • 31
  • 34
  • 9
    This answer is supported by [Apple's own guides](https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/): `Suppose you have a standard resolution @1x image that’s 100px by 100px, for example. The @2x version of this image would be 200px by 200px. The @3x version would be 300px by 300px.` – RoberRM Aug 16 '16 at 23:36
  • 2
    Very nicely explained, this should be accepted as the answer.. and a +1 for this.. – Akshatha S R Oct 17 '16 at 07:46
  • 1
    But what's the point of keeping images at 1x, 2x and 3x sizes? Why not just keep image@3x. System will automatically resolve it for 2x and 1x screen resolutions. This way your app size will reduce? – crypt Jan 07 '17 at 18:10
  • 1
    @crypt I think it's because to save processing power (downscaling is an extra work for processor) and avoid the downscaling quality loss. And of cause non retina devices don't need to keep the retina size big images, when the low resolution images are available. I exactly don't know the real reason(s). – enadun Jan 08 '17 at 07:25
  • 2
    @enadun I just found the answer for that. Images at 1x, 2x and 3x should be given because while deploying the app from app store, image@2x images are sent on iphone 5 and its variants, image@3x images are sent on iphone 6 and its variants, etc. This is called app slicing. This prevents non retina iphones from downloading high resolution images and developers get a chance to create image with greater details for retina based iphones. If the desired image is not found in the build, then only upscaling or downscaling occurs. So your answer is correct. – crypt Jan 09 '17 at 07:16
27

For @3x image increase @1x image size by 3 times!

e.g.

15 x 15 = @1x

30 x 30 = @2x

45 x 45 = @3x

OR

100 x 100 = @1x

200 x 200 = @2x

300 x 300 = @3x

OR

15 x 10 = @1x

30 x 20 = @2x

45 x 30 = @3x

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Rupal Patel
  • 570
  • 6
  • 13
  • 8
    This is NOT correct. For `@3x` images you should increase the `@2x` image size by 1.5x: 15 x 15 = `@1x`, 30 x 30 = `@2x`, 45 x 45 = `@3x` – nvrtd frst Nov 20 '15 at 05:06
  • Which one is correct way to define the image size of a button! 1x=15*15, 2x=30*30 and 3x= 45*45 or This one 1x=15*15, 2x=30*30 and 3x=60*60! – Raksha Saini Mar 07 '16 at 07:45
  • 2
    @nvrtd, please consider adding a reference that supports your claims. Raksha: I don't know the answer either but I see three completely different answers here, all of them without proof! – RoberRM Aug 16 '16 at 23:20
  • 2
    @nvrtd: I have read more and, as I've just said in a comment for the accepted answer, your answer is the correct one, as explained in [Apple's own guides](https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/): `Suppose you have a standard resolution @1x image that’s 100px by 100px, for example. The @2x version of this image would be 200px by 200px. The @3x version would be 300px by 300px.` – RoberRM Aug 16 '16 at 23:40
  • @nvrtdfrst, could you please help me this http://stackoverflow.com/questions/43995059/how-to-add-images-for-different-screen-size-from-assets-xcassets-in-xcode-8 ? – May Phyu May 16 '17 at 07:48
  • Unless the post was edited, this answer is congruent with the 1.5:1 ratio described by nvrtd frst – Adrian Bartholomew Jun 07 '19 at 18:05
  • @Adrian Bartholomew The point seems to be kind of moot anyway to me, `3` is by definition `1*2*1.5`, so the way to first double and then multiply by 1.5 seems unnecessarily complex to me. Just triple the original dimensions and you're good to go. – sp00n Aug 13 '21 at 13:55
19

Yes, your understanding is correct.

A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px × 100px, for example. The @2x version of this image would be 200px × 200px. The @3x version would be 300px × 300px.

enter image description here

For more details you can check this link https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

Nilesh Mahajan
  • 3,506
  • 21
  • 34
  • could you please help me this http://stackoverflow.com/questions/43995059/how-to-add-images-for-different-screen-size-from-assets-xcassets-in-xcode-8 ? – May Phyu May 16 '17 at 07:49
  • The URL is now*: https://developer.apple.com/design/human-interface-guidelines/images * at time of writing ;-) – ArieKanarie Jul 06 '23 at 12:24
7

Yes, you are right. But if you are using Assets you can do it all in one image with three slots for it

Azat
  • 6,745
  • 5
  • 31
  • 48
  • 1
    How about navigation bar item? I have a button 40*40 as a navigation bar item, so the image sizes should be 40*40 for 1x, 80*80 for 2x, 120*120 for 2x. But according to apple's document, Tool bar and navigation bar icon should be about 66*66, 44*44, 22*22 for 3x, 2x, 1x accordingly? Why is this? – user2053760 May 05 '15 at 09:58
  • What is the problem? Just use as documentation suggests – Azat May 05 '15 at 10:00
0

Use the assets catalog. Xcode will manage the @1x, @2x, @3x easilly, and tell you the dimensions for the images.

With it it's easy to manage the AppIcon and LaunchScreen images.

David Ansermot
  • 6,052
  • 8
  • 47
  • 82