ChatGPT解决这个技术问题 Extra ChatGPT

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

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?

iPhone 6 Screens Demystified link: bit.ly/1qHEBKk The Ultimate Guide To iPhone Resolutions link: bit.ly/1paVXLd
iPhone 6 Plus 414 x 736 points 1242 x 2208 pixels 3x scale 1080 x 1920 physical pixels 401 physical ppi 5.5" iPhone 6 375 x 667 points 750 x 1334 pixels 2x scale 750 x 1334 physical pixels 326 physical ppi 4.7" iPhone 5 320 x 568 points 640 x 1136 pixels 2x scale 640 x 1136 physical pixels 326 physical ppi 4.0"
iPhone 4 320 x 480 points 640 x 960 pixels 2x scale 640 x 960 physical pixels 326 physical ppi 3.5" iPhone 3GS 320 x 480 points 320 x 480 pixels 1x scale 320 x 480 physical pixels 163 physical ppi 3.5"

M
MeV

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.


well thats one of the reasons that apple didn't introduce 32 GB version of the new iphones.16 GB version as test devices and 64 for usage.Application sizes will increase dramatically due to graphics.
@IlkerBaltaci I'd understand if they only let developers buy 16 GB version, but this way there will be many people who won't even be able to upgrade their OS due to lack of disk space.
thats true even with 32 GB i had to wait one week to clean up and make 5 GB space for IOS 8.
How to use these in IB?
@FilipRadelic what about iPhone5? the width is 640 but height different than the one used for iPhones 4
F
Fatih Aksu

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


What about the "Zoom mode" in iPhone 6 plus ? Shouldn't we need to provide an ImageName-667h@3x as well ?
@thewormsterror I think the last one of your image naming convention is worng
@thewormsterror great answer, you could also add how ipad images should be named.
If the image coming from an api is 1024 x 768, does it mean the max size I can use it is 256@3x?
E
Emiel

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.


I need to fit the screen width with an image inside a uicollectionviewcell (obviously inside a uicollectionview fitting all screen). For the iphone 6 plus I solve to put for the 3x a (414x3=1242 px), the 2x which size I have to use? It have to fit the iphone4s/5/5s and also 6 screen...
I have an icon of size 222px x 260px, which looks perfectly fit on iPhone5/5s screen. Now while making the app compatible to iPhone6 and 6plus screen 1)what should be size of that icon? as per thrice rule, should it be 333px x 390px? 2) should I need to apply any auto resizing to image in xib?
@ jerrygdm, I have almost same scenario like yours. What did you do at the end of the day? Can you share that with me please?
@Ans, Have you used 3x icon for iphone6 and iphone6Plus.
@Jitesh I'm asking the same question ... at what size I should make x3x icon? I want to add but what should be the size ... this was my question ..
D
Denis Kozhukhov

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.


L
Leszek Szary

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.


G
George

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.


u
user2024885

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) 

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now