Bad image quality on Android

Solar2D Android
#1

I’m developing an application for both iOS and Android, the iOS version is ready and looks good on both iPhone3G and iPhone4, it looks good in the simulator for all Android devices I can simulate there as well.

But when I build my application and actually try it on my Samsung Galaxy S II all images looks like crap, they are “grainy” and gradients in my png images looks pixelated.

My config.lua looks like this:

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.5
}
}
}[/lua]

So they should be picking up my @2x images, it does on the iPhone4.

Anyone that knows what I’ve missed here? [import]uid: 35378 topic_id: 14468 reply_id: 314468[/import]

#2

It’s probably your device’s screen which is not really true color. I get this with some images on my HTC Desire. But using indexed PNGs with dithering solves the problem. Sometimes 256 colors may not be enough though.

I also noticed that for best results you have to use even image sizes. For example if your image is 50x51 make it 50x52 by adding some transparency to the bottom. Try using even/whole numbers for display object position as well. This way you avoid minor artifacts from dynamic image scaling in your images. Here is what I mean:
https://developer.anscamobile.com/forum/2011/06/12/dynamic-image-scaling-issue [import]uid: 52103 topic_id: 14468 reply_id: 53531[/import]

#3

+1 on even image sizes. Also as a test change your 2x image to black and white, and test on device to make sure it IS picking the correct image. If not, you might want to print scaleX and ScaleY and catch it in logcat to see whats going on. [import]uid: 8872 topic_id: 14468 reply_id: 53540[/import]

#4

I have even images sizes, and I’ve tried the black/white thing and I know it’s picking up the 2x image.

Read some more on this and it seems to be a problem on certain phones? It’s gradients that looks like crap.

I’ve read this article:
http://www.curious-creature.org/2010/12/08/bitmap-quality-banding-and-dithering/

Really strange problem, and I have no clue how to save a 32-bits png from Photoshop :slight_smile:

It basically looks like this on my phone:
http://www.displaymate.com/Motorola_Droid_ShootOut_files/image003.jpg (not my image though) [import]uid: 35378 topic_id: 14468 reply_id: 53542[/import]

#5

But should I use 8-bit or 16-bit? And I suppose I don’t use “Save as web…” in photoshop? [import]uid: 35378 topic_id: 14468 reply_id: 53553[/import]

#6

Just use Image -> Mode -> Indexed color and play with the dither algorithm for best results.

Take for example these two images:
http://img850.imageshack.us/img850/2268/truecolor.png
http://img26.imageshack.us/img26/2410/indexedd.png

The first, true color one, will probably have jagged gradients on device, but the second one (which is only 256 colors) should look just fine. [import]uid: 52103 topic_id: 14468 reply_id: 53552[/import]

#7

Oh, I think you can. I just checked it out and it looks like it’s more flexible. But I just take an RBG image with 8 bits per channel, convert it to indexed color, and then use Save as… [import]uid: 52103 topic_id: 14468 reply_id: 53555[/import]

#8

Hmm tried saving the png as indexed color, but the simulator won’t load the image now, it’s just a blue/white color where the image should be.

Not sure why that happens? [import]uid: 35378 topic_id: 14468 reply_id: 53560[/import]

#9

The docs say that indexed PNGs aren’t supported, but I never had any troubles in simulator or on device. I even questioned if this bit of documentation is obsolete but got no reply.

Maybe you use Mac OS? [import]uid: 52103 topic_id: 14468 reply_id: 53561[/import]

#10

Yeah I’m using OS X Lion [import]uid: 35378 topic_id: 14468 reply_id: 53562[/import]

#11

– removed – [import]uid: 52103 topic_id: 14468 reply_id: 53699[/import]

#12

I’m having the same problem with gradients on Android. Did you find a solution? [import]uid: 46216 topic_id: 14468 reply_id: 59041[/import]

#13

Didn’t find a solution that worked for me :frowning: Gave up, if you find a solution please post in this thread. [import]uid: 35378 topic_id: 14468 reply_id: 59050[/import]

#14


Take for example these two images:
http://img850.imageshack.us/img850/2268/truecolor.png
http://img26.imageshack.us/img26/2410/indexedd.png

for me both pictures look the same (a little bit bad) on my samsung galaxy tab - just in Safari.
I think the second picture is indexed but not dithered. That makes not much sense for getting better results.

I’m not really behind this problem so far now, but I think true color pictures for MacOS and iOS are perfect. For Android as the target one should use dithered pictures to get better looking results. If you use them as indexed so they will not work on Mac and iOS.

One way could be to use other pictures for Android release - other way convert the dithered indexed pictures back to true color. So both worlds can show them and you have to maintain only one set of pictures.

To find out if 16 bit dithered pics work good enough you should test it. That’s what I would await. Maybe 8 bit dithered looks worse for some pictures. [import]uid: 70114 topic_id: 14468 reply_id: 59071[/import]

#15

I just wanted to note that I’m having the same issue… Hoping for a foolproof solution. [import]uid: 80784 topic_id: 14468 reply_id: 61132[/import]

#16

Hey, I have a solution!!! It’s a bit crazy, but it works great.

First of all, you have to understand what a 32-bit PNG is. It’s 24 bits for RGB colors, and 8 bits for alpha transparency.

You have to add at least one pixel of transparency to your image or else Photoshop will try to optimize things for you, removing the extra 8 bits you need. (I erased one pixel from the top right corner of my background image.) Then when you Save For Web & Devices, select PNG-24, and check the box for Transparency. Click Save, and it will generate your 32-bit PNG.

I just tried it on my Droid Incredible (where I was having issues with banding before), and it now looks fantastic.

Dave [import]uid: 80784 topic_id: 14468 reply_id: 61181[/import]

#17

Everyone,

Corona loads images at a 16-bit color quality on Android. We were doing this because images have to be loaded into memory as uncompressed bitmaps to be used by OpenGL and the Android devices we were using at the time had a 16 MB memory limit per app (such as the original Droid).

We’ve modified the code today to load images at full 32-bit color quality, provided that the Android device has enough memory available to load it. So, even an older device such as the Droid will be able to load a small image at 32-bit color, but huge images at 2048x2048 will be reduced in quality to 16-bit… but at least the image loader will work.

This change will be made available in the next daily build #641, which will be available to you if you are a paid subscriber. Please give it a go when this build becomes available tomorrow and let us know how well it works. Thanks! [import]uid: 32256 topic_id: 14468 reply_id: 61740[/import]

#18

After upload to the latest daily build #641, my app keeps showing bad quality gradients like this:

http://activecodeline.net/wp-content/uploads/2010/07/AndroidGradient1.png

Tested in a Samsung Galaxy S2.

Cheers
[import]uid: 46216 topic_id: 14468 reply_id: 61818[/import]

#19

I never seen I real banding free gradient on my Galaxy Tab - I think it’s a problem of the display.
I let check my friend on a Galaxy S2.

Take a look at test images - as an example:
http://www.lagom.nl/lcd-test/gradient.php

BTW: on my Galaxy Tab the banding looks better than the image for “Reduced color depth”, but worse than it looks on the iPhone 4.

For now I think we stick with a dithering solution for Androids. [import]uid: 70114 topic_id: 14468 reply_id: 61859[/import]

#20

emi,

I viewed the website that Sven gave us a link to on my Galaxy S2 and saw the banding issue on the gradients images on that page via the default web browser app. I viewed the same page on my Motorola Xoom tablet and the gradient image looked much better. So, this confirms that the Galaxy S2 has a lower quality display. That is, it has lower color depth. This suggests a hardware limitation. I’ll double check that our OpenGL surface is set up for 32-bit color depth, but if it is, then we’ll have no choice but to live with this hardware limitation.
Sven,

Thanks for the link. That was very helpful. I hope the increase to 32-bit color has improved the look of your images. [import]uid: 32256 topic_id: 14468 reply_id: 61896[/import]