What sizes would be the best to use for images: background.png, background@2x.png and background@3x.png if we want to use this image for example to cover the full width and half height of the screen on all resolutions for iPhone portrait app?
This is what we have now:
Device Points Log. Res. Sc. Real Res. PPI Ratio Size
iPhone 12 Pro Max, 13 Pro Max 926x428 2778x1284 3x 2778x1284 458 19.5:9 6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390 2532x1170 3x 2532x1170 460 19.5:9 6.1"
iPhone 12 mini, 13 mini 812x375 2436x1125 3x 2340x1080 476 19.5:9 5.4"
iPhone XS Max, 11 Pro Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR, 11 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X, XS, 11 Pro 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6+, 6S+, 7+, 8+ 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6, 6S, 7, 8, SE2 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5, 5S, 5C, SE1 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4, 4S 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
https://i.stack.imgur.com/0jwdF.png
Some people say that for edge to edge image (like a banner on the bottom from left to right edge of the screen) for iPhone 6 Plus they would prepare back@3x.png with width 1242 and for iPhone 6 back@2x.png with width 750 to match the iPhone 6 screen size however I do not think that this is a good idea because 1242 / 3 = 414 and 750 / 2 = 375 so naming them as @2x and @3x does not have sense. And then what width should have back.png - 375 or 414?
Graphics names are using @2x and @3x suffixes so if for example image@3x.png has 30x30 resolution then logically thinking image@2x.png should have 20x20 resolution and image.png should be 10x10. This means that if we want to have sharp full width image for each screen then we probably should create back@3x.png with width 4143=1242px, back@2x.png with width 4142=828px and back.png with width 414px. This however means that on every iPhone except for iPhone 6 Plus you will need to setup your uiimages to use for example aspect fit content mode and they will be scalled down so this again is not a perferct solution and probably would really slow down the application if we use a lot of scalling on older devices.
So what do you think would be the best solution to solve this problem?
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.
the @2 and @3 is not the real image scaling, but only represent how much real pixel represent one virtual pixel on screen, some sort of hdpi/xhdpi/xxhdpi/blabla from android universe. it only show to system what image should be used for some device screen.
so if you need to use whole screen image - prepare it dependently of real screen size.
Depending on the graphics in some cases it might work fine when we use just a single image for example a banner with size 414 points width x 100 points height (largest possible width and some fixed height) and put it in a UIImageView that is pinned to the left and right edge of the screen, has fixed height 100 and set aspect fill mode for that UIImageView. Then on smaller devices left and right side of the image will be cut and we will see only the center part of the image.
I've created category for this:
+ (UIImage *)sizedImageWithName:(NSString *)name {
UIImage *image;
if (IS_IPHONE_5) {
image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
if (!image) {
image = [UIImage imageNamed:name];
}
}
else if (IS_IPHONE_6) {
image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
}
else {
image = [UIImage imageNamed:name];
}
return image;
}
you can take full code here: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5
I think the best solution for edge to edge or full screen images, is to care about the real screen size in pixel (not in point), and you must check at runtime the model of the device and choose the appropriate image i.e:
image-iphone4-4s.png (640x960/2) for 1/2 screen height
, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height
, image-iphone6-6s.png (750x1334/2) for 1/2 screen height
, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height
,
there is no need for @?x in this situation of the asker.
i think we should use different size of background images for different devices. Just use @3x scale images for background.
You can detect device with below lines.
#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))
#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)
Success story sharing