Image.xcassets rendering strangely on simulator

123 views Asked by At

I designed an image on Adobe Illustrator that has H: 100 px and W: 2000 px. When the device is in landscape left, this asset should run across the bottom the of screen and completely cover it from end to end.

As far as I know, the iPhone 6+ is 1080 x 1920. An asset with the width of two thousand should comfortably fit on the bottom, so I must be missing something big here.

I used Prepo to covert my 3x (the one with width of 2000), into 2x and 1x.

The figures are as follows:

3x: 2001 x 102 2x: 1334 x 68 1x: 667 x 34

This set:

Fits: 5s, 5, 4s

Too Short: iPad Retina, iPad Air, iPad 2, 6+, 6

I'm assuming I'm missing some critical aspect of image xcassets because I'm sort of at a loss.

Thank you, and I'm happy to update this with any other details needed.

1

There are 1 answers

1
Fogmeister On

First thing...

The iPad Air resolution is 2048x1536 and so your image of 2001 pixel width will not fit. Also, iPhone 6+ resolution is 1242x2208 so again that won't fit.

Second...

You shouldn't only be relying on the image size to fit to the screen. You haven't shown what the image is but I imagine that something of that size will be some sort of gradients or something that spreads across the bottom of the screen.

In that case you should be using a sliced image that will resize to be any size regardless of the device resolution.

Third...

If you do rely on the image size then what guarantee do you have that in the future there will not be a device with an even bigger resolution that will break the image again?

Hint... The near future is guaranteed to have a device with a bigger resolution that will break your display.

Summary

Use a resizable image that will stretch to the required size no matter what it is.

Use something like AutoLayout so that the frame of the image view is set by the screen size rather than being set by the image size.