Search code examples
iosxcodeimageresolution

Image asset size in Xcode interface builder


If I add an image view onto interface builder in Xcode and it has a size of 200 x 100 (size in Xcode), how do I know what size to make the image asset for 1x 2x and 3x.

If I make it 600x300 pixels in photoshop for the 3x and then try to use this image it doesn't look very clear on an iPhone 7 plus so how do I know what resolution the image assets should be for a given image view size


Solution

  • If I add an image view onto interface builder in Xcode and it has a size of 200 x 100 (size in Xcode), how do I know what size to make the image asset for 1x 2x and 3x.

    Resolution is a matter of the correspondence between points and pixels. If the desired image size is 200x100 points, then you would provide these three image sizes:

    • 1x: 200x100 pixels
    • 2x: 400x200 pixels
    • 3x: 600x300 pixels

    If we are running on, say, a 2x-resolution device, the image will be loaded with its scale set to 2, so that 2 pixels will correspond to 1 point.

    Note that you should not attempt to make the 3x image by simply upscaling the 1x image. That will obviously look terrible. You should start with a 600x300 original and downscale to get the 2x and 1x images.