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 docume
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