Image sizes recommendations

Question

I'm writing an application that shows a lot of images (currently using Gallery, but going to move away from that soon). Each image takes up the whole screen, with exception of an ActionBar at the top. My app will end up having about 80 images per gallery.

I would like to provide appropriately sized images for different types of device, from small handsets to larger tablets. I know that I can use the ldpi, mdpi and hdpi folders, but I don't know what size to make each image.

At the minute I'm using .png files but I'm also not certain whether I should be using .9.png files, and whether it is just a matter of changing the .png to .9.png and Android will take care of the scaling/skewing.

During development I'm only providing my app with ldpi and hdpi images. I have guessed at 640x680 (coming out at around 435k each) for ldpi and 768x1024 (coming out at around 1.2m each) for hdpi. I am not happy with the actual file sizes that these dimensions yeild.

Can anyone please advise me on what dimensions my images should be and if there is anything else I should be taking into account?

Please don't just say read http://developer.android.com/guide/practices/screens_support.html, as this talks about resolution and I can't workout how that equates to my problem.

Thanks in advance,

Mark.

Answer 1

Using 9-patch drawables (.9.png) is useful only when your images can be stretched without looking weird. For example, a gradient can be used as a 9-patch, but a photo couldn't, because the proportions would get stretched. Android can't take care of stretching for you because your 9-patches must have stretch/padding regions, which are defined by placing black pixels in a 1px border around the image (see here for more info)

In terms of your image sizes, this is more complicated. For example, an image that filled a screen on a phone-sized mdpi device (with a screen resolution of, say, 480x320) wouldn't fill the screen on an mdpi tablet device (with a screen resolution of 1280x800) without blowing the image up. The dpi image qualifiers are designed to make image and icons the same physical size on different screens.

One idea could be to put your images at the highest resolution you can get in the drawable-nodpi (or assets) folders. Next find the size of the display in pixels (not display-independent pixels), and subtract the size of the actionbar from the height (which is around 48dp or 56dp, I'm sure it says somewhere in the documentation). Then, use a BitmapFactory to decode the image at the size of the display you found earlier (this answer will help with that). However, this would probably be fairly processor-intensive, so not ideal. Alternatively, hold sets of images at certain resolutions on a server and when your user starts up the application for the first time, download the ones which are a closest match to their screen size.