Improved Web Component for Pixel-Accurate Atkinson Dithered Images

, in Computing, Interactive

This is an interactive demo - use the controls to change the image or dithering properties. You can also drag and drop images.

Late last year I released as-dithered-image, a web component that displays images using the famous Atkinson dithering algorithm.

There are other web pages that demonstrate Atkinson dithering but I think this project has the edge. It is surprisingly difficult to get pixel-accurate rendering in a modern browser. Now that hiDPI displays are common, dithering is somewhat of a lost art and I will admit that the utility of this project is low but I have always liked the look of old fashioned black and white images.

The first version of as-dithered-image had a number of deficiencies that irked me. With the second version I have tried my best to make the component play nicely with the browser with much better performance all around while also deferring costly rendering as much as possible.

See the as-dithered-image github repo for more details.

Sunset over the swamp, dithered to match your screen pixel-to-pixel