Last time I explained the whole dithering in CSS thing. Today I am going to reveal the results of my attempt at Bayer dithering.

I got confused the last time I was trying to understand this because I think it’s typically explained with an eye outside of the context of 1-bit dithering. For 1-bit dithering, though, we can view the matrix of ordered dithering as serving the exact same function as our noise overlay from last time, except with a more regular pattern.

What matrix, you ask?

Well, if you head to Wikipedia1 you will see they give a nice 4 by 4 matrix as:

0  8  2  10
12 4  14 6
3  11 1  9
15 7  13 5

All multiplied by 1/16. Now, that’s supposed to be compared directly to grayscale values between 0 and 1, which is very much not what we’re dealing with. So for our purposes, we need an image to overlay where each pixel is black if its corresponding entry was 7 or less, and white if its corresponding entry was 8 or more, with a transparency of abs(entry - 7.5) scaled to the range of transparency the pixel can take on. (Kinda; the scaling doesn’t really matter because we’re going to put the whole thing at an eyeballed opacity later like we did with the blue noise)

Now! If this sounds like more of a pain than you’d want to take on, you might think to go find one already made, right? Well, I couldn’t; everything I found had the equivalent of 50% gray where I wanted 100% transparency, because they were thoughtlessly not thinking of the needs of weird cursed CSS. So I fired up a Python repl and made one, and I will now give it to you in the form you need it for the same use as last time:

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');

That’s it! It’s only 4x4 pixels, so it stays nice and short. What does it look like?

At 100% opacity, not great:

really imperious looking selfie where i have super good hair, dithered

But if we tone it down to 40% opacity, it looks real good!

really imperious looking selfie where i have super good hair, dithered

So yeah, go nuts. I hand this power over to you. :)


  1. I know this is all abominably lazy but please remember that I do, like, the opposite of this for a living and therefore really can’t be bothered to look up the proper sacred texts of image processing