In a previous article I promised to show you a way to dither your images so that they look their best on low-bit-depth LCDs, so here it is!
Here is our reference image from our last discussion:
(Remember, you can click these images to see a larger version)
Using the technique in the previous article, we can simulate the appearance of this image on a 12-bit LCD (4R4G4B):
Note the distinctly visible steps in the gradient, and the noticeable banding. Can we improve on this situation?
If you are using extremely low bit depths, say 3R3G2B, it’s possible to generate a palette that contains all the possible colors in your display, then convert the image to an indexed image with that palette, with dithering. But when using 12-bit depths, you’ll end up with 4,096 colors in your palette. With 16-bit depths, you’d have to generate 65,536 colors. Surely there’s a better way!
And there is. First, split the image into its channels by selecting Split Channels from the Channel palette’s drop-down menu (flatten your image first if the Split Channels option is grayed out).
For each of the resulting channels (red, green, blue), perform the following operation:
- Select Image>Mode>RGB Color.
- Select Image>Mode>Indexed Color....
- In the resulting dialog, select the appropriate grayscale palette (in our example, the 4-bit palette).
- Before closing the dialog, set the Dither drop-down to Diffusion, and select an amount. A high strength tends to work better at low bit depths, so when in doubt, choose 100%.
- Click OK.
- Select Image>Mode>Grayscale (don’t forget this step!).
After you have performed this operation on all channels, select one of the images and select Merge Channels... from the Channels palette.
And there you have it: your image is dithered to optimize for the right bit depth. Here’s what the image looks like after it has been dithered:
Notice how much better the image looks compared to the previous version, even though its bit depth has not changed. Pre-processing images this way allows you to optimize images for your device at no additional cost.
Remember that you can use this technique for “asymmetric” bit depths too, like 5R6G5B. Just choose the appropriate grayscale palette when dithering each channel. In that example, you would use the 5-bit grayscale palette for the Red and Blue channels, and the 6-bit grayscale palette for the Green channel.
And don’t forget, you can download pre-computed grayscale palettes for a variety of bit depths here.
Photo Credit: szeretlek_ma. Licensed under 
. Derived images in this blog are provided under the same license.
Posts
