<atk-img> — your 1-stop shop for 1-bit color images

Pixel-perfect Atkinson error-diffusion dither, contrast-limited adaptive histogram equalization, and duotone processing, in a tiny Web Component, which gracefully degrades to a regular image.

Download the component or copy a self-contained code snippet

• Download atk-img.min.js ( brotli) Copy snippet
• Just the .wasm (bring your own glue) ( brotli)

Usage

Wrap your <img> in an <atk-img>, and use the attributes enhance and scale. Ink color is the element's CSS color (defaults to currentColor); paper is whatever's behind the canvas, so just set background on the host or let the page bg show through.

<atk-img enhance scale="2" style="color:#062800;background:#e0ffd9">
	<img src="img.webp" alt="image description" width="1024" height="683">
</atk-img>

Known alternatives

• as-dithered-image by Andrew Stephens

Source codes: https://codeberg.org/owl/atk-img