Subscribe for interesting News and useful Tutorials. (one or two newsletter per month)
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.
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.
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.
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
The original image with 24 bit color depth has got smooth color gradients.
Even if we are looking an enlarged part it seems perfect.
If we convert image to 16 bit color depth ugly stripes appear because this color depth can't show enough colors.
The stripes are clearly visible on the enlarged image too.
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.
The enlarged dithered image looks a little bit noisy
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:
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 .
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!
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:
All Rights Reserved © 2018 Hungary