What is the difference between 1x vs r4 or 2x vs r

问题:

If 1x image is 100*100 then

2x image is 200 * 200

3x image is 300 * 300

what is r4 dimension should be xxx * xxx

There is no documentation on this.

FYI:

Its not about launch screen image ... the image can be anything like back button etc...

回答1:

The answer isn't that straight forward.
The important thing to remember is that different iPhone models would automatically use different images from the imageset. The resolution of iPhone-A is not always a simple multiplication of iPhone-B, so the size of image-A can't always be a simple multiplication of image-B.

Here is a table showing the image automatically selected from x.imageset for each iPhone:
         iPhone Model | ScreenSize | Ratio | x.ImageSet
         -------------|------------|-------|----------------
            XS Max    | 1242-2688  | 0.46  | 3x
            X,XS      | 1125-2436  | 0.46  | 3x
            XR        |  828-1792  | 0.46  | 2x
            6,6s,7,8+ | 1242-2208  | 0.56  | 3x
            6,6s,7,8  |  750-1334  | 0.66  | 2x 
            5,5s      |  640-1136  | 0.56  | R4

As the table shows the same image is selected for multiple screen sizes and multiple aspect ratios, that can lead to a bit of a mess...
Thats where the Content Mode property of the view showing the image comes in handy. It decides how the image will stretch inside its boundaries (LaunchScreen image boundaries are the screen size, Back button boundaries are the ImageView size).

If the Content Mode = Aspect Fill
Then the selected image from the imageset will resize its width to be exactly as the boundary width and the height will also change to maintain the original image aspect ratio - its top and bottom edges will be hidden because they exceeded the boundary or will not reach the boundary at all.

Other Content Modes will have other effects on the image. Take a look: Understanding How Images Are Scaled