6

My query is in two parts:

1) plain and simple, how do we decide the 1x, 2x and 3x image sizes ?

I found this SO question closest

what-should-be-3x-images-of-100x100 size UIimageView or UIButton

but there is no accepted answer in this so I am a little confused if that is really how it is So if I have a UIImageView of size, say, 17 X 21 So will my 1x be 17X21, 2x be 34X42 and 3x be 51X63 ?

2) If it is so what the sizes would be in case my UIImageView size also varies as per screen size.

So for iPhone 4s 320X480 if my UIImageView was 17X21, for iPhone 6 375X667 it would be 20X29

So how do I decide my image sizes (1x, 2x & 3x) which are fit for all device sizes?

PS: Really a big thanks in advance, coz this might sound a very basic question but I have really banged my head a lot over it but can't find a concrete satisfactory answer even after searching and reading a lot.

Community
  • 1
  • 1
GKK
  • 232
  • 1
  • 3
  • 15
  • Yes, apart from a typo in your numbers you're correct. If you change the image view size you may want to change the image size, use the largest it could be and allow the framework to scale down. – Wain Jan 02 '16 at 10:02
  • Yup, thanks for pointing out the typo Wain, corrected that. So you are suggesting I use just one image of a large size (maintaining the width height ratio) and let the framework do the rest? – GKK Jan 02 '16 at 10:10
  • "So if I have a UIImageView of size, say, 17 X 21 So will my 1x be 17X21, 2x be 34X42 and 3x be 51X63?" YES 2) nope. For iPhone 6 it is the same 2x image. For 6s it will be 3x (3x is confusing as it will be scaled down by iOS when used). But why do you want to make a decision? API does it on its own. All screen coordinates corresponds to 1x resolution when you use UIKit. – Teddy Jan 02 '16 at 10:23
  • Are you asking how to select a specific image for the iPhone 6/6+ to take into account their larger screen and different aspect ratio? – chedabob Jan 02 '16 at 11:17
  • Kind of yes, chedabob. I am confused since usually we decide the 1x, 2x, 3x image sizes based on the UIImageView dimensions but for even the UIImageView dimensions change as per screen size. – GKK Jan 04 '16 at 05:08

2 Answers2

2

You should think in points, not pixels.

1

If your UIImageView has the size of 17x21 points then you'll need to provide 3 images 17x21 pixels, 34x42 pixels and 51x63 pixels. The OS will pick the correct one depending on the pixel density of the device the app is running on.

2

One way to decide the size a UI element is using a software like Graphic. You can draw a rectangle representing the screen and the UI element only thinking in points. This should make things easier.

Luca Angeletti
  • 58,465
  • 13
  • 121
  • 148
  • Thanks appzYourLife, but actually my point dimensions change as per device screen size. So in 4s my UIImageView size would be 17X21 points but in case of iPhone 6 it would be 20X29 points – GKK Jan 02 '16 at 15:36
1

It is a bit late but I understand your problem.

First you need to know the difference between point and pixel.

The point is when you in Xcode.The pixel is when you have the actual size of iPhones screen as pixel.

In 4s, 1 px equal 1 point. In 5, Se, 6 , 1 point 2 px in 6s, 7s , 1 point 3 pixel.

I am gonna give you 2 different example to understand this.

Example 1

You want you image 100x100 for all iPhones in Xcode.So you should make :

1x size 100x100 pixel in Ps or Sketch. 2x size 200x200 pixel in Ps or Sketch. 3x size 300x300 pixel in Ps or Sketch.

Another example answers you question.Because you have aspect radio.That means you want your image to be scaled.

You have 17x21 point for 4s then it should be 17x21 pixel. You have 20x29 point for iPhone 6. It should be 40x58 pixel. You have something for 6s and 7s so it should be 3 X something.

Because you have aspect ratio and scaled.It does not matter as long as you keep 1x for 4s, 2x for 5, 6, SE, 3x for 6s and 7s.

So you have 40x58 instead 34x42 (17x21) x 2 for iPhone 6. 40x50 for better resolution which Apple recommend.When you use aspect ratio, it sometimes be hard to choose the image size.If you used 32x42 instead 40x58 , there is nothing wrong with this but resolution would be less than 40x58.

Hope It works.

  • Very nice point @user7411527, but I have a little confusion here.wouldn't 5/5C/5S/SE have different – GKK Feb 13 '17 at 10:00
  • Please ignore my previous comment (Entered by mistake and then couldn't edit it after sometime): Very nice point @user7411527, but I have a little confusion here. Wouldn't 5/5C/5S/SE have different sized image view than iPhone 6? Both these categories use 2x sized images so how would we decide the 2x image in that case? Like if the imageView is of size 17x21 is in 4s so it would be 17x25 in 5/5C/5S/SE but it would be 20x29 in 6/6s. So what would be the 2x image. Going by the iPhone 5 series it should be 2 * (17X25) i.e. 34x50 AND going by the 6 series it should be 2 * (20x29) i.e. 40x58 – GKK Feb 13 '17 at 11:01