An image dithering tool

or 🐸 Start with a frog

Dither it! for Figma v1.0.0

Finally, the plugin that literally no one has ever asked for...Dither It! for Figma is now available.

Features include:

  • Dithering images in Figma
🌀 Take it for a spin

Open Source

The Dither it! source code is available for your browsing pleasure on github.

Read more

Resources

A list of dithering resources from around the web. Explainers, algorithms, examples, etc.

Support

Support the continued existence of Dither it! with a small donation. Much appreciated.

☕ Buy me a coffee

Examples

Ordered (Bayer)
Error Diffusion
Red Mono
Black & White
CMYK
Blue & Yellow
Gameboy

Contact

Say hello, report a bug, or make a feature request!

About Dither it!

What is Dithering?

Dithering is 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.

For more information, see this list of dithering resources from around the web: explainers, algorithms, examples, etc.

About this site

Dither it! is built by Alex Harris.

It was inspired by a blog post from Low-tech Magazine about how to reduce the energy usage associated with running websites. One method discussed was to reduce full color images to dithered images with very few colors and subsequently smaller file sizes. Ensuing discussion clarified that there are other, more modern ways to compress images (try Squoosh) which achieve reduced file sizes while maintaining color. Nonetheless, dithering is a fun technique that looks cool and is interesting to learn about.

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

Thanks to Leon Sorokin, for making RgbQuant.js and Don for making vue-color.

Image slider for examples: Img Comparison Slider