Android Web Browser Scaling Works More Effectively for Images than Sprites

Question

I'm developing a mobile web application and I have a home screen with a number of icons on it, so I tried to use a sprite to serve all the images in one swoop.

I noticed, however, that the iphone4 scaled the images in my sprite fairly well (they looked a little dithered), but on my HTC Evo the sprite rendered images look really blocky. I switched to standard images (background:(/image_url/) w/o background-position) and the image looked much better - see this , where the left image is served using the single image, and the ones to the right of it are served from the sprite (but are the same images in the sprite).

Is there a way to get the Android browser to interpret the sprites better?

Sacculus

Answer 1

You're hitting the maximum decoded image size barrier in the Android browser. This size limit was upped to something reasonable in 2.3. Try splitting up your sprites into smaller images.

Doehne

Interesting, do you know what the max size is in Froyo? This isn't device dependent, is it? – Sacculus

I dug through the relevant source code here: sephidev.net/external/webkit/WebCore/platform/graphics/android/… . Size limit is 8*1024*1024 bytes (about 8M) on "large memory devices" (>256M), and 2*1024*1024 bytes (about 2M) on "low memory devices". Note that this is the decompressed size, which you can approximate by saving your source images as bitmaps and checking the filesize. – Doehne

@Doehne Thanks again for your followup comment with the pointer to the webkit src file where that c macro is used - saved me heaps of time searching around trying to fix that. – Maryjanemaryjo

Answer 2

This is just a guess but, which one are you using? Your operator or wifi connection? Some operators do compress images over certain size.

Faena

That's a good guess, but I was using my wifi connection to pull down the images. – Sacculus