Upload images effectively in Android, knowing your target devices

It is not uncommon to have the need of uploading to your server, a picture, taken from your local storage or your camera, with the purpose of sharing it among all other users that utilise the same app.

Most of the times our image (especially if we take it from an high resolution camera) can be quite big, and probably we don’t need that. It is quite obvious that, in order to make our system network-friendly, we should scale it down before sending them to the server.

What is, instead, probably less obvious is how much you should scale the image. In order to answer this question we should ask ourselves other simple questions:

  1. Which are the devices that are going to download that image from the server?
  2. For each different device, which are the sizes of the displayed image?

Let’s assume that our target devices are both iOS and Android, smartphones and tables.

For Android we want that the picture has the following size:
- Tablet : 240x240 dpi
- Smartphone : 160x160 dpi

For iOS we want that the picture has the following size:
- Tablet : 240x240 pt
- Smartphone : 160x160 pt

We also want to support up to the following resolutions: 
- Android : xxhdpi (~480dpi
- iOS : scale factor @3x

Note that for Android, the maximum density is actually xxxhdpi, but there are not a lot of devices out there with that density, as you can see in the diagram below:

Data collected during a 7-day period ending on July 6, 2017. 
Any screen configurations with less than 0.1% distribution are not shown.

With the above-mentioned conditions we should get the biggest image (240x240) for each platform, and do this simple calculation.

For Android we can consider the following equation:

px = dp * (dpi / 160)

and with xxhdpi resolution, which means 480 dpi, we can calculate the required pixels for showing an image of size 240x240 px on a 480dpi device resolution:

px = 240 * (480 / 160) = 720px

For iOS it is easier, we can just multiply the target size with the scale factor:

px = pt * scaleFactor

where we assumed, as maximum supported resolution, a scaleFactor of 3:

px = 240 * 3 = 720px

We should now get the highest calculated value, among all devices (in the example they are actually the same), that is 720 px.

So, the image that we have to send has to have, at minimum, the size 720x720 px, in order to allow all devices to display it without loss of information.

It is easy to notice that if we want to support xxxhdpi resolution, our picture has to be 960x960 px.

Always keep in mind the target when uploading an image that needs to be shared among multiple devices.

Questions or suggestion? Leave a comment!