CODEWITHSUNDEEP
androidimagescaleimage-resizingdpi
Josh
Josh

Reputation: 12566

Android - What Size Images to Serve?

I have an Android application, backed by an API. To this API users can upload photographs. These photographs need to then be scaled according to a few categories, to a few different densities.

Is there anywhere that has a recommended size or anyone that's tackled this problem before?

I figure that I need to fill out this grid, to know what size to resize (down) the images to (Assuming the user uploaded, say, a 4000x4000px image, or whatever):

Role / Screen | LDPI | MDPI | HDPI | XHDPI |
--------------------------------------------
Icon          |   ?  |   ?  |   ?  |   ?   |
--------------------------------------------
Thumbnail     |   ?  |   ?  |   ?  |   ?   |
--------------------------------------------
Full          |   ?  |   ?  |   ?  |   ?   |

The API will then return a JSON response like so:

{
  resources: {
    icon: {
      ldpi:  "path",
      mdpi:  "path",
      hdpi:  "path",
      xhdpi: "path",
      raw: "path"
    },
    thumbnail: { ... },
    full: { ... }
  }
}

The client device can then check to what density itself is, and use the appropriate key'd path to render an image.

I know according to this, "you should follow the 3:4:6:8 scaling ratio", but how do you know to what size an image should be used, to scale the others?

EDIT: In case my question is too rambly, here is the condensed version: To what sizes should I scale raw images uploaded by users down by, so that they look the best on the wide variety of Android device screens?

Upvotes: 2

Views: 1239

Answers (2)

Darshan Rivka Whittle
Darshan Rivka Whittle

Reputation: 34031

If I understand correctly what you're asking for, things are easier than you're making them. You already understand the 3:4:6:8 ratio, so it's just a matter of either you or your "powers that be" deciding how big you want each of 'icon', 'thumbnail', and 'full' to be in real life, and then doing the math.

In other words, there's no "correct" size for thumbnails, only a correct ratio to make them look consistent across devices. How big do you want a thumbnail to be?

For starters, you can use the same dimensions for "icon" as for Android's launcher icons, double each dimension for "thumbnail", and use an average full screen for "full":

Role / Screen |  LDPI  |  MDPI  |  HDPI  |  XHDPI  |
----------------------------------------------------
Icon          |  36x36 |  48x48 |  72x72 |  96x96  |
----------------------------------------------------
Thumbnail     |  72x72 |  96x96 | 144x144| 192x192 |
----------------------------------------------------
Full          | 240x320|320x480 | 480x800| 720x1280|

If you already know one of those is different than you'd like, just change the whole row at once, keeping the 3:4:6:8 ratio. If that looks like a good start, then do a mock up and see how it looks. If the mock up shows that thumbnails should be a little bigger, nudge them all up, keeping the ratio.

Basically it boils down to:

  1. Pick a test device and experiment.
  2. When you have sizes that you like, use the 3:4:6:8 ratio to make sure you're in good shape to look good and work well on "wide variety of Android device screens".
  3. Test out on other devices with varying densities and screen sizes to make sure the sizes you chose and the layouts you've designed are accommodating to the minor differences you'll still encounter, even after using the correct ratio, and adjust if necessary.

Lastly, I agree with @Devunwired that you'd do best to not just look at the screen density qualifier, but the screen size one as well.

Upvotes: 6

devunwired
devunwired

Reputation: 63293

Use the average device resolutions for each of those buckets to help guide your scaling efforts:

  • LDPI is usually around QVGA (240x320)
  • MDPI is usually around HVGA (320x480)
  • HDPI is usually around WVGA (480x800)
  • XHDPI is usually around 720p (720x1280)

The only caveat to that is tablets; those numbers represent average handset resolution. A 7" or 10" tablet, for example, is usually also classified as MDPI, but at a resolution of 1024x600 or 1280x800.

So if you are looking to classify the image to grab in your JSON directly by using resource qualifiers, you may want to add the physical size items as well (i.e. normal, large, xlarge) to account for that or use a more generic naming scheme for the keys.

HTH

Upvotes: 1

Related Questions