How exactly do image sizes and Resolutions work for mobile development?

Question

I am highly confused about how images work in mobile development for ios and for Android. I am using Xamarin for my but I believe images should still work the same as with native development. I looked at some documentation for working with images on both platforms, and they do not really help. I was hoping I could get some more useful information on here for the specific question below and any further explanation that you feel is necessary.

How do image size specifications work on ios exactly? I have have read through Apple developer documentation on image size and resolution but it doesn't give enough explanation.

Example: I have an image (.png) of a specific size (W520pixels by H257pixels) and resolution (300ppi) and I want to have this Image in my app (Not as a button image or icon, just a regular image). Do I need to resize this to a specific size for @3x? and then downsize it to specific sizes as well for @2x and @1x? Do I also need to reduce the resolution?

Also, this article talks about how using improper dimensions for images would cause the OS to have to downscale or upscale the images which consumes processing resources (and I assume could increase battery consumption). Is my assumption correct? and if this is the case what are the optimal dimensions to be used for images in order to avoid this?

Answer 1

On iOS currently there are two screen densities: 2x, 3x. Historically there was also 1x size, but such devices are not supported anymore and you don't need to address them.

If you use bitmaps and you know their exact size on the screen (you don't want them to occupy the percentage of the screen but just exactly the same size) for best results you should provide images for those two screen densities. In reality with current devices you won't get any user notable problem if you don't, but if you measure milliseconds, or as you mentioned buttery consumption, or take a very detailed look from small distances you may notice some differences. Also if your image is to be stretched proportionally to the size of screen then effects of having two assets are very theoretical, probably there are still some improvements but they get very close to nothing.

Also iOS supports PDFs in Asset catalogs and they are resolution independent.

Answer 2

Device resolution and Image optimization is a complex topic. Your best bet is to do more searching and read through various articles discussing this.

But, in a nutshell - for iOS devices...

When designing your UI, you work in Points, not Pixels. So, consider putting a 320 x 240 image view in the center of the screen.

On an old device that has a 1x screen-scale, that 320 x 240 rectangle will render at 320 x 480 screen pixels.

On a 2x screen-scale device - such as an iPhone 11 - it will render at 640 x 480 screen pixels.

On a 3x screen-scale device - such as an iPhone 11 Pro - it will render at 960 x 720 screen pixels.

Physically, they will all be about the same size - roughly 2.5 inches x 1.75 inches (I'm estimating... I didn't grab a ruler to measure them).

If you have 3 sizes of the same image - 320 x 240, 640 x 480 and 960 x 720 - UIKit will load the one that matches the screen-scale.

---

Practically speaking, though (I'm going to ignore the 1x devices since it will be rare to see one these days)...

Suppose you have a photograph with an original size of 640 x 480.

On a 2x device, that will render 1:1 pixel ratio. On a 3x device, it will be scaled up to 960 x 720 pixels. With the naked eye, and the devices side-by-side, you'd be hard-pressed to see any difference.

Likewise if the original size if 960 x 720.

On a 3x device, that will render 1:1 pixel ratio. On a 2x device, it will be scaled down to 640 x 480 pixels. With the naked eye, and the devices side-by-side, you'd be hard-pressed to see any difference.

If your original image is 960 x 720 pixels, and you use an image editor to scale it to 640 x 480 so you have both 3x and 2x versions, you get almost no benefit, because the image editor is doing the same thing as the device... scaling the image.

When you will notice is with line-drawing or text-based images, and you can benefit from having @1x, @2x and @3x versions. However, those images would almost certainly start out as Vector drawings, and you would export the 3 different resolutions from your vector drawing program. You wouldn't export a 960 x 720 rendered bitmap and then scale it down in Photoshop.