要在图片集中上传哪3张尺寸/分辨率的图片以支持所有设备？

Question

Image assets are now preferred over resources in IOS, which supports to upload only 3 versions of the image. 1x, 2x & 3x.

But there are number of device resolutions to support on iPhones

640x1136 - 5 series
750x1334 - 6, 6s, 7, 8
1242x2208 - (6, 6s, 7, 8) plus
1125x2436 - X, XS
828x1792 - XR
1242x2688 - XS Max

I can understand what 1x, 2x & 3x resolutions are, eg. 320px(1x), 640px(2x) & 960(3x).

But I can not understand which 3 image sizes to upload to support all devices, so that complete image appear full screen on all devices?

Answer 1

The resolutions are 1x, 2x and 3x. In most cases you should scale sizes of images so that for instance 1x is 100x100 , 2x is 200x200 and 3x is 300x300 .

This has nothing to do with resolution but rather the DPI scale. It is a value you get from UIScreen.main.scale . What this is is the scale between your coordinate system and scree pixel coordinate system. For instance if you take a 2x device with resolution of 750x1334 and print out frame you would get 375x667 by checking UIApplication.shared.keyWindow!.frame .

That means that if you place an image view with frame size 100x100 on a 2x device it will take 200x200 pixels. For 3x it will take 300x300 pixels. So that is why the 2x and 3x images should be larger.

The problem occurs if you want to scale image directly depending on screen size. Assume the following:

let imageWidth: CGFloat = 44.0/375.0*view.frame.size.width

If this is used for image size then your image will proportionally resize depending on your screen size. And doing this you would need a better system for icons than having 3 versions of it. You could put them into assets and have 3 images per screen resolution.

But in most cases it is better to keep the image size and increase the whitespace around it. So assume a screen with width of 375 would have an image of width 100 in the middle. It would produce 137,5 whitespace on each of the sides. Now seeing the same scene on device with width of 414 would produce 157 whitespace on which of the sides. This is usually acceptable.

If you really need to scale images you should also consider scaling fonts. If one of your icons increases in size by 10% then most likely a text next to it should have increased font size by 10%. This may later greatly complicate things due to rounding of font sizes to integer value. So I suggest you avoid this.