My view in the storyboard contains an imageView having for the constraints top= 0, height= 55, width= 230 and centred horizontally. Using the "view as" option in the last version of Xcode, I realise that the display of the image and its quality are not the same for all the screens. In the iPhone 4s the quality is good but the image same big. Otherwise, in the iPhone 6s plus screen, I see that the image size is good for the screen but the quality isn't well.
How the image can be displayed the same way in all the screens? Can anyone please give me the right constraints to resolve this?
Depending on the device's screen, you should define various representation of the image.
From the Apple Developer portal:
iOS uses a coordinate system to place content onscreen. This coordinate system is based on measurements in points, which map to pixels in the display.
If you define all three image resolutions (
@3x), you should be good to go.
What is important, that the
@1x should have the following parameters:
height: 55, width: 230
@2x should be twice the size of
height: 110, width:460
@3x should be three times the size of
height: 165, width:690
Lets assume you image is called
my_image, and it is a png.
@1xshould be called:
@2xshould be called:
@3xshould be called:
Add all these images to the
Assets.xcassets. Click on
Assets.xcassets. Once it is opened, you should see a
+ sign on the left hand side.
Tap on the
+ sign and give a name to you image:
And insert them into these slots:
Now, when you are trying to use this image, you can just simply say in Swift:
let image = UIImage(named: "my_image")