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?

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.