What is dithering in computer graphics?


You may have come across the word “dithering” when using a graphics or image editing tool. Despite its funny name, dithering plays an important role in ensuring images appear correctly on screen and in retro game art design.

How dithering works in computer graphics

Dithering is a term used to describe the strategic application of noise to an image. It has traditionally been used to improve the appearance of images where the output is limited to a particular color range.

For example, a 1-bit image is monochrome and can only use a two-color palette: black and white. Dithering can be used to create the appearance of multiple shades by varying the distance between dots. You can see several shades of gray in the image below, but the only colors present are black and white:

Dither example
Tim Brooke

This form of dithering has its roots in the printed medium, particularly newspapers and early comic books. Because publishers were limited by the number of colors they could print, dithering was used to expand perceived gamut, add texture to an image, and produce better-looking comics and photographs.

As printers became more sophisticated, dithering became a more powerful tool. With more colors to work with, reproducing color photographs became more common. Even today, some newspapers still use dithering in their printing process, a phenomenon you can clearly see if you get close enough.

Dithering saves disk space, avoids banding

With the advent of the World Wide Web, dithering has become a valuable tool for reducing file size. In the early days of the Web, dial-up speeds made data transfer a pain. Since a photo may contain thousands or millions of colors, limiting the colors that can be displayed can significantly reduce the file size.

By combining the colors available in a restricted color space, dithering can convincingly reproduce a detailed image at a fraction of the file size. The image below contains only 256 colors, with the dither pattern visible in the enlarged portion of the image:

256 color raster image
Tim Brooke

Animated GIFs depended on dithering to reduce file size. An animated GIF is actually many images (frames) in a container, displayed one after the other. Dithering can be used to reduce the weight of these images, even if the image quality suffers.

Dithering is also used to avoid color banding caused by a restrictive color palette. For example, if your sky has 16 shades of blue but your palette can only display 2, there will be a “band” of harsh color as one shade transitions to the next. Dithering can be used to create gradients by varying the distance between these shades, as you can see below:

Example of dithering blue and purple colors

There are many different algorithms used to dither images, the most popular being the Floyd-Steinberg algorithm. You can upload your own images and experiment with restricted colors, different algorithms and see how dithering works for yourself using Dither it! Web application.

Dithering as a stylistic choice

While modern internet connections have reduced the need for techniques such as dithering, the look is often sought after for its retro aesthetic. Notable examples of what has become known as “dither-punk” include The return of the Obra Dinn and Rogue invader.

If you’re drawn to the retro look of these games, learning to enjoy retro gaming with emulators as well as the legal minefield that comes with the hobby is a great place to start.

RELATED: How to Setup RetroArch, the Ultimate All-in-One Retro Gaming Emulator


Comments are closed.