How to handle image scale on all the available iPhone resolutions? How to handle image scale on all the available iPhone resolutions? ios ios

How to handle image scale on all the available iPhone resolutions?


You don't have to have each image in all scales if it won't be used. Make only the sizes you need and name them according to their width. For portrait full-device-width images, you need 320px wide at 1x and 2x, 375px wide at 2x and 414px wide at 3x.

4" devices used "-568h" suffix for naming their launch images, so I'd recommend a similar naming scheme:

  • ImageName-320w (@1x & @2x)
  • ImageName-375w (@2x)
  • ImageName-414w (@3x)

Then figure out what image you need at runtime:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];UIImage *image = [UIImage imageNamed:imageName];

This might break if other widths are added in future, but so far Apple has always required rebuilding the app to support new displays so I guess it's somewhat safe to assume they will continue doing that.


I personally will be doing :

ImageName@2x iPhone 4/4s
ImageName-568h@2x iPhone 5/5s
ImageName-667h@2x iPhone 6
ImageName-736h@3x iPhone 6Plus

The logic behind this is that it shows a difference between all devices, whereas width shares the same value on the iPhone 5s and iPhone 4s

Edit:

This is just the naming convention I am using for resources that are device dependant, such as a background image taking the whole screen, most of the time all you want is:

ImageName@2x iPhone 4/4s/5/5s/6
ImageName@3x iPhone 6Plus/Zoom mode


For the @2x and @3x discussion, you don't really have to care about that. Care about the point size of the screen, and make sure that there are @2x assets with twice the point size and @3x assets with thrice the point size in pixels. The device will automatically pick the right one. But reading your post I guess you already know this.

For edge-to-edge images, then unfortunately you have to make it for all screen resolutions. So, for a portrait iPhone, it would be 320 points, 375 points and 414 points, where the 414 points one would have to be @3x. A better solution may be to make your images scalable by setting up the slicing in interface builder (if you use image catalogs, that is). But, depending on the image this may or may not be an option, depending whether the image has a repeatable or stretchable part. Scalable images set up like this have very little performance impact.