About Dithering

Dithering is essentially a method for trying to make an image look good while reducing the number of colors it uses, or as wikipedia puts it:

Dithering is used in computer graphics to create the illusion of "color depth" in images with a limited color palette - a technique also known as color quantization. In a dithered image, colors that are not available in the palette are approximated by a diffusion of colored pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colors within it (see color vision). Dithered images, particularly those with relatively few colors, can often be distinguished by a characteristic graininess or speckled appearance.

I'm no scientist, but I think basically what that means is: When reducing an image from many colors to fewer colors you can't get every pixel exactly right, but you can spread that error around to neighboring pixels which helps it look more like the original. The various wasy to spread that error around are the various dithering algorithms.

Is this wrong? Tweet at me.

About Dither it!

Dither it! was inspired by a blog post from a site called Low-tech Magazine about how to reduce the energy usage associated with running websites. One method they discussed was to reduce full color images to dithered images with very few colors. Ensuing comments clarified that there are other, more modern ways to compress images which achieve small file sizes while maintaining color, but I still think it is a fun technique that looks cool and is interesting to learn about.

Source code

The Dither it! source code is available on the Dither it! Github page. Please feel free to contribute, share or pilfer.

Thanks

• Leon Sorokin, for making RgbQuant.js
• Don, for making vue-color
• Low-tech Magazine

Built by Alex Harris.