Dithering Images On The Client Side – as-dithered-image.js

Preview:

Description:

as-dithered-image.js is a JavaScript library that provides a Custom Element to dither images on the client side. Based on HTML Canvas and Atkinson Dithering’s image dithering algorithms.

How to use it:

1. Download and import the as-dithered-image.js.

<script src="as-dithered-image.js"></script>

2. Add your image to the <as-dithered-image /> custom element and specify the size of the logical pixels the image is dithered into.

<as-dithered-image 
  src="1.jpg" 
  alt="Image Description" 
  <!-- 1: dithers to logical css pixels no matter what the DPI. 
       2: makes the logical pixels twice the size, for a coarser look. 
       3: is really blocky.
       auto: attempts to give good results on very high-DPI screens (like iPhones) which have such small pixels that standard dithering just looks grey. It is equivalent of 1 on most displays and 2 on devices where the ratio of screen to css pixels is 3 or more.
       pixel: dither to screen pixels. This can either look amazing or be completely wasted depending on the size of the screen but you paid for all the pixels so you might as well use them.-->
  crunch="2"
  <!-- Beween 0 and 1
       Controls the cutoff the dithering algorithm uses to determine whether a pixel is black or white. Modifying this will produce either a lighter or darker image.-->
  cutoff="0.5"
</as-dithered-image>

Changelog:

v2.0 (01/17/2023)

• better resize behavior preventing needless redraws
• dithering is performed in a web worker
• Lazy drawing for elements that lie completely offscreen, they will be drawn as they approach the viewport as the user scrolls
• new cutoff attribute to control the dithering
• better support for non-integer devicePixelRatios
• fixed image loading
• lots of small bug fixes