Pixel Accurate Atkinson Dithering for Images in HTML

, in Computing, Interactive

This describes the old version of this project, see Improved Web Component for Pixel-Accurate Atkinson Dithered Images for the new version plus an interactive demo

A regal iguana, dithered to perfection at all sizes and included with a single custom tag

The code and more technical documentation is available in the as-dithered-image GitHub repository.I have always liked the look of images processed with Atkinson Dithering, the algorithm used in the original Apple Macintosh. There are other ways of crushing a multicolored image down to 1-bit monochrome but I think Atkinson's method produces quite striking results that I thought would look neat on the modern web.

Actually including dithered images on the web is fraught with issues. Dithering relies on a precise correspondence between the source image pixels and the display pixels - any attempt to resize a dithered image is going to be either blurry or covered in distracting Moiré patterns. The browser is actively working against us here - it resizes images in a way that makes sense for most images but totally destroys the sharp dithering effect I am going for.

Even worse, for responsive designs the size of the image can change dynamically. What is needed is a way to hold off dithering until just before the image is to be displayed in the page. By this time we know the exact size of the destination and can dither accordingly, reprocessing the image as its dimensions change.

This is where as-dithered-image comes in - a stand-alone custom element that handles all the annoying details. It is designed to be almost a drop-in replacement for the standard img tag.

And believe me, there are some very annoying details, namely:

There are a few issues with this approach:

Other Examples

Just a little sketch I whipped up. We can control the pixel size the dither algorithm uses. In this case the "crunch" is set so to produce a one-to-one match between screen and image. On high DPI screens this gives a finer image, maybe too fine on really small screens.

Of course we can go the other way as well