Subscribe for interesting News and useful Tutorials.   (one or two newsletter per month)

2018-03-21

How to Use Smooth Images with 16 Bit Color Depth Applying Dithering

I'm sure that you have already faced with the problem when you have only 16 bit color depth and an image with smooth color fades. The 65k colors might be not enough to show the similar colors properly, instead ugly stripes will appear. Fortunately there is solution which called dithering. In this post I will how you how to apply dithering on higher color depth images to get a better result at 16 bit color depth.

What is dithering?

Dithering is an image (and audio) processing method. It is able to make the appearance of your image has greater color depth by manipulating pixels according to a smart algorithm. Both of the images below are using only 256 color but the right one is dithered. The difference in the quality is clear. Working form the same color palette (same number of colors) the dithered image looks much better.

8 bit (256 colors) image without dithering An image with 256 colors
8 bit (256 colors) image with dithering Dithered image with 256 colors

Why use dithering?

On embedded systems 16 bit color depth is very common because it needs much less "wire" and memory then 24 bit colors and usually there is no or only minor difference in quality. The exception is subtle color fades where simply there is no enough color to create a smooth fade. And here comes the dithering. If you use a dithered image you will get much better result on lower color depth. All this can be done in compile time without performance loss.

What does dithering do in the practice?

To understand dithering firstly figure out how to create a gray color from only black and white. It's simple just put a black pixel and a white after it. In average it will result a gray color. To make it lighter use more white pixel, and to make it darker use more black pixels.

It sounds simple but real algorithms are counting the errors by after putting a pixels and apply a different "tricks" to avoid artifacts.
To learn more about the dithering algorithms I suggest this article: Image Dithering: Eleven Algorithms and Source Code

Original 24 bit (RGB888) image

24 bit image without dithering

The original image with 24 bit color depth has got smooth color gradients.

Original enlarge

Enlarged 24 bit image without dithering

Even if we are looking an enlarged part it seems perfect.

16 bit (RGB565) image

16 bit image without dithering

If we convert image to 16 bit color depth ugly stripes appear because this color depth can't show enough colors.

16 bit enlarge

Enlarged 16 bit image without dithering

The stripes are clearly visible on the enlarged image too.

16 bit (RGB565) image with Dithering

16 bit image with dithering

The dithered image with also 16 bit color depth looks almost the same like the original. However if you look it carefully you can also notice a few stripes but it is much better then the non-dithered version.

16 bit dithered enlarge

Enlarged 16 bit image with dithering

The enlarged dithered image looks a little bit noisy

How to dither your images?

The most simple way to dither your high color depth image to 16 bit is using a photo editor software. I suggest you to use GIMP which is a free and cross platform software.

GIMP needs a plugin to make this kind of dithering. I used this plugin: http://registry.gimp.org/node/25275. I just followed the steps in the description to add the plugin to GIMP. If because of any reason the link above become broken you can also download the plugin from here. And the steps to add the plugin:

  1. Copy the *dither16bit.scm* file to the script directory of GIMP (On Linux: /home/user/.gimp-*/scripts)
  2. Copy the the 4 Grayscale palette files (*.gpl) file to the palette directory of GIMP (On Linux: /home/user/.gimp-*/palettes)

To make the dithering open GIMP and click Image->Mode->Dither to RGB565 and save the new image. To add the exported dithered image to [LittlevGL](/), you can use this Online Image Converter tool which creates a C array from a BMP, JPG or PNG image .

Conclusion

Now you know how to improve the quality of your 16 images using dithering. I hope you found this article useful!

Here you find other Tutorials about embedded GUI . Check them out!


Did you like this article? Share it with your friends!


Subscribe for more interesting News and useful Tutorials   (one or two newsletter per month)


Have a question or have experience in this field? Share with us!

MarkDown supported


Still no comments. Be the first!

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary