HOWTO: Fix annoying color banding in 24bpp images

[Guest dwallersv]

As is well known around these parts, WM limited color resolution (16 bits per pixel, 65k color gradations) causes color banding in gradients in photos. Ugly.

Especially ugly with certain images, like the welcome image on the Verizon i920. Below is the 16M color, 24bpp image on the phone on the left (this was taken straight from the phone), likely looking beautiful and smooth on your PC display. To the right of it is what this image looks like when displayed on the 16bpp display of the phone. Banding occurs because the phone takes that 24-bit image (8:8:8 bits for RGB) and simply truncates the lower-significant bits of the RGB triplet to produce a 16 bit representation as 5:6:5 bits of RGB.

To understand where the bands come from, consider how the values of each channel (red, green, blue) change across one of those constant color bands. It really isn't constant color, but is smoothly changing shade. Problem is, all those changes in the channel value occur in the lower 3:2:3 bits of each channel, which are truncated -- ignored -- by the phone when displaying the colors. The upper 5:6:5 bits don't change across the band -- hence the constant color, and the banding:

  

I absolutely HATE that banded crapola when my phone boots up. It's highly annoying.

The answer to this is to dither the image down from 24bpp to 5:6:5 16bpp. This is easily done if you have photoshop. Here's how:

• Open target 24bpp image in photoshop.
  
• Using Filter->Noise->Add Noise... add a tiny bit of noise to the image. You want to add as little as necessary, so this is a manual step. The welcome image is a kind of worst case, and it only took 1.2% noise to get a satisfactory effect for me, so this amount could be automated for all images, but best results for any particular image will be obtained by manual trial and error.
  
  UPDATE!! You can stop here after simply adding the noise -- this achieves the necessary dithering. While there is data still in the lower 3:2:3 bits of the RGB triple, there's no reason other than technical purity to truncate them (zero them out), since they're ignored anyway by Windows Mobile. This is actually a big "DUH", and I don't know why I didn't think of it earlier. So fixing banding is a whole lot easier that this thread originally described.
  
  Still, the following steps are good to learn anyway, for no resaon other than knowing how to reduce the pallete (colorspace) in photoshop.
  
  • Next, the number of shades (i.e. resolution) of each color channel needs to be reduced from 256 (8 bit) to the shades available in 16 bit, 5:6:5 representation. This translated to 32:64:32 (multiply these three numbers together, and surprise surprise! You get 65k, the number of colors supported by a 16-bit graphics system).
  1. 
     
  2. On the Layers panel, click on the channels tab.
     
  3. Click on the Red channel, highlighting it. You should see the picture change to a grayscale image showing the relative intensity of the red component of each pixel in the image.
     
  4. Go to Image->Adjustments->Posterize... In the levels box, type in "32". Hit OK.
     
  5. Repeat for the green channel, using 64 levels.
     
  6. Repeat for the blue channel, using 32 levels.
     

  [*]Save you image in the original format (24bpp JPG, PNG, GIF, etc.), and transfer it back to your phone. You're done!

  Here is the result for the Verizon i920 welcome image... This is a 24bpp image that essentially has had the lower 3:2:3 bits of each channel zeroed out, making it actually a 16bpp image in reality. Looks pretty good, I think:

  

  i920 owners that want to use this image so that bootups look nicer, simply copy it to your phone, rename to "welcomehead.192.png", and put it in \Windows with a file explorer that will let you overwrite ROM files. Then reboot and enjoy.

  As for processing images generally for viewing on the Omnia, one word: DON'T. Bad idea. Either live with the banding when viewing these images, or get a photo viewer that can do dithering on the fly when displaying pictures (Resco Photo Manager does, and produces excellent results for viewing -- I highly recommend it).

  Use the above method for particular images that show up a lot, like backgrounds. In that case, make a copy, process it, and use that. You do not ever, ever want to discard that extra color resolution from an original photo.

  One final thing you may have already noticed from the sample images in this post: Adding noise makes the file size for the image explode. Not surprising, because noise makes compression much less effective. Yet another reason not to go around doing this just for viewing images.

  Good luck!

Edited May 20, 2010 by dwallersv

[Guest TheGoDxxxx]

Woow, nice howto, I'nna use your method when I upload new wallpapers to my phone for sure.

Thanks

[Guest Terry666]

Nice work!!! Thank you very much...

[Guest scegli1nick2]

I think WM 6.5.5 support natively the dithering on the pictures...

[Guest bobhero]

I think WM 6.5.5 support natively the dithering on the pictures...

Not all 6.5.x builds have this fix included, I have made a thread here to discuss and identify the builds that do:

http://www.modaco.com/content/i8000-verizo...uality-problem/