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.
- The aspect ratio of the element is now set automatically to match the source image.
- The really expensive part of the process, the dithering itself, is now performed in a web worker almost completely unblocking the main UI thread.
- Reprocessing the image is no longer triggered on every resize, only when resizing has finished. This greatly improves UI responsiveness while resizing the browser window.
- Elements that are completely offscreen will load their images but dithering is deferred until the element is about to scroll into the viewport, greatly improving performance for long pages containing many dithered elements.
- Displays with non-integer ratios between device pixels and css pixels are handled better, although there is no perfect solution.
- An additional "cutoff" attribute as been added that controls the midpoint between black and white pixels - effectively altering the brightness of the image.
See the as-dithered-image github repo for more details.