How to decide 1x, 2x and 3x image sizes based on the size of the corresponding UIImageView?

Question

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.

Answer 1

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.