Dithering with CSS

I’ve messed with a similar idea here: https://untested.sonnet.io/notes/just-some-innocent-gradient...

(The linked web app doesn’t work on mobile in portrait mode, sorry!)

The biggest issue with this trick is that different engines calculate the filters differently, thus turning an okay-ish image into something that looks like a glitch.

This is CSS dithering with "SVG backend" doing the heavy lifting by utilizing the feComposite filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

I'd love to see a live preview of the final file size that updates as you change the parameters, maybe debounced by 100ms or so. Although as others mentioned, is this actually proper dithering, seems like the effect of dithering without actually doing it?

If we could get jbig2 native support in browsers we could do monochrome black and white images at ridiculously small file sizes.

A page of sheet music can be as small as 8kb. I'm using a wasm decoder right now, but I could forsee using css filters after the fact to make it look less sharp and aliased

Is this actually dithering?

I have dabbled with some dithering algorithms and while this is way faster than my naive js implementations, this looks pretty bad

Is this what they use at schools before they hand it over to the printer? /j

It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!

I have to admit I don't think it's visually very appealing like that. It looks more like some sort of error/ glitch. Maybe my old Firefox does it weirdly?

The image quality is so bad, I don't get it?

I’ve messed with a similar idea here: https://untested.sonnet.io/notes/just-some-innocent-gradient...

(The linked web app doesn’t work on mobile in portrait mode, sorry!)

The biggest issue with this trick is that different engines calculate the filters differently, thus turning an okay-ish image into something that looks like a glitch.

This is CSS dithering with "SVG backend" doing the heavy lifting by utilizing the feComposite filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

The image quality is so bad, I don't get it?

If we could get jbig2 native support in browsers we could do monochrome black and white images at ridiculously small file sizes.

A page of sheet music can be as small as 8kb. I'm using a wasm decoder right now, but I could forsee using css filters after the fact to make it look less sharp and aliased

I have to admit I don't think it's visually very appealing like that. It looks more like some sort of error/ glitch. Maybe my old Firefox does it weirdly?

Is this what they use at schools before they hand it over to the printer? /j

I recommend lookscanned.io if you need a similar effect for legal reasons

Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...

Is this actually dithering?

I have dabbled with some dithering algorithms and while this is way faster than my naive js implementations, this looks pretty bad

It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!

Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?

Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...

I recommend lookscanned.io if you need a similar effect for legal reasons

Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?

The image gets de-saturated but the noise that's mixed in is colored. This looks like a mistake.

I think the noise is also way too 'soft'. At high frequencies it just becomes near-uniform gray so it barely affects the thresholding.

The image gets de-saturated but the noise that's mixed in is colored. This looks like a mistake.

I think the noise is also way too 'soft'. At high frequencies it just becomes near-uniform gray so it barely affects the thresholding.

computers

handy if you're running a site with pictures but you want everything to maintain a consistent aesthetic and colour scheme. might be better to just process the images and save them already dithered, but this way can be customized.

Noise dithering

imagesource

noisebaseFrequency 0.90 numOctaves 1 seed 2

mix (feComposite arithmetic)k1 0.00 k2 0.75 k3 0.35 k4 -0.05

two-toneenabled

dark light

Hacker Times

Hacker Times

Discussion

Discussion

Noise dithering