locked
Which 3 size images to upload in image set to support all devices? RRS feed

  • Question

  • User60991 posted

    Image assets are now preferred over resources in IOS, which supports to upload only 3 versions of the image. 1x, 2x & 3x.

    But there are number of device resolutions to support on iPhones

    640x1136 - 5 series 750x1334 - 6, 6s, 7, 8 1242x2208 - (6, 6s, 7, 8) plus 1125x2436 - X, XS 828x1792 - XR 1242x2688 - XS Max

    I can understand what 1x, 2x & 3x resolutions are, eg. if 1x size is 414x896 than 2x vesion is 828x1792 and 3x is 1242x2688

    But I can not understand which 3 image sizes to upload to support all devices, so that complete image appear full screen on all devices without cutting the edges of the image?

    Thursday, March 14, 2019 12:32 PM

Answers

  • User369978 posted

    The height/width ratio of iphoneX + is 2.16 , ratio of old devices(iphone6,7,8 +s) is 1.77 .

    I recommend a workaround which you don't need code to adapt devices.

    If it is full screen image , you could upload 828x1792 for 2x , and 1242x2688 for 3x, and set ImageView.ContentMode as ScaleAspectFill , and then some portion of the content may be clipped to fill the view’s bounds(portion of top and bottom will be clipped on those old devices) , so you have to take care of that image , do not place the important content at top or bottom .

    If you don't want my solution , refer https://stackoverflow.com/a/48770392/8187800 , try to add a different asset for iPhoneX specifically .

    PS : 1x image is not needed set , it is design for old devices (below iphone4).

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 15, 2019 7:57 AM
  • User369978 posted

    @Mak said: @ColeX , Thank you for the detailed answer.

    I actually did same, uploaded images of that resolution with AspectFill. But problem was that image was not showing same on all the devices. If we have image with something like logo in center then it will work. But I got an image with designs at bottom so as you mentioned some portion of the content was not showing at bottom of the screen on old devices. It has been used as launch screen as well as a view's background.

    So it isn't possible with image assets that a full image looks same on all devices as launch image or background? Or I need to change my launch image?

    You can try to add a second Asset for using on Iphone X + ,upload two different(size) files in the two assets, and name the image in new Asset with adding "-x" as suffix . Create a extension class like

    public static class ImageExtension
    {
        public static void SetImage(this UIImage image, string imageName)
        {
    
            var height = UIScreen.MainScreen.Bounds.Size.Height;
            var width = UIScreen.MainScreen.Bounds.Size.Width;
            if(height/width > 2) // IphoneX +
            {
                image = UIImage.FromFile(imageName + "-x");
            }
            else
                image = UIImage.FromFile(imageName);
        }
    }
     //usage
    image.SetImage("abc");   abc in first asset , and abc-x in second asset.
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, March 19, 2019 10:03 AM

All replies

  • User369978 posted

    The height/width ratio of iphoneX + is 2.16 , ratio of old devices(iphone6,7,8 +s) is 1.77 .

    I recommend a workaround which you don't need code to adapt devices.

    If it is full screen image , you could upload 828x1792 for 2x , and 1242x2688 for 3x, and set ImageView.ContentMode as ScaleAspectFill , and then some portion of the content may be clipped to fill the view’s bounds(portion of top and bottom will be clipped on those old devices) , so you have to take care of that image , do not place the important content at top or bottom .

    If you don't want my solution , refer https://stackoverflow.com/a/48770392/8187800 , try to add a different asset for iPhoneX specifically .

    PS : 1x image is not needed set , it is design for old devices (below iphone4).

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 15, 2019 7:57 AM
  • User60991 posted

    @ColeX , Thank you for the detailed answer.

    I actually did same, uploaded images of that resolution with AspectFill. But problem was that image was not showing same on all the devices. If we have image with something like logo in center then it will work. But I got an image with designs at bottom so as you mentioned some portion of the content was not showing at bottom of the screen on old devices. It has been used as launch screen as well as a view's background.

    So it isn't possible with image assets that a full image looks same on all devices as launch image or background? Or I need to change my launch image?

    Monday, March 18, 2019 2:07 PM
  • User369978 posted

    @Mak said: @ColeX , Thank you for the detailed answer.

    I actually did same, uploaded images of that resolution with AspectFill. But problem was that image was not showing same on all the devices. If we have image with something like logo in center then it will work. But I got an image with designs at bottom so as you mentioned some portion of the content was not showing at bottom of the screen on old devices. It has been used as launch screen as well as a view's background.

    So it isn't possible with image assets that a full image looks same on all devices as launch image or background? Or I need to change my launch image?

    You can try to add a second Asset for using on Iphone X + ,upload two different(size) files in the two assets, and name the image in new Asset with adding "-x" as suffix . Create a extension class like

    public static class ImageExtension
    {
        public static void SetImage(this UIImage image, string imageName)
        {
    
            var height = UIScreen.MainScreen.Bounds.Size.Height;
            var width = UIScreen.MainScreen.Bounds.Size.Width;
            if(height/width > 2) // IphoneX +
            {
                image = UIImage.FromFile(imageName + "-x");
            }
            else
                image = UIImage.FromFile(imageName);
        }
    }
     //usage
    image.SetImage("abc");   abc in first asset , and abc-x in second asset.
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, March 19, 2019 10:03 AM
  • User60991 posted

    @ColeX , Thank you very much for all the help. I will try that suggestion.

    Tuesday, March 19, 2019 11:43 AM