Dithering with CSS • Hacker News Board

Re: Dithering with CSS

#11

Post by heftig » Fri, May 08, 2026, 11:20 AM UTC

IshKebab wrote: post #9

nextlevelwizard wrote: post #5

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

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.

Re: Dithering with CSS

#12

Post by tiborsaas » Fri, May 08, 2026, 11:28 AM UTC

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...

Re: Dithering with CSS

#13

Post by tnelsond4 » Fri, May 08, 2026, 11:31 AM UTC

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

Re: Dithering with CSS

#14

Post by molszanski » Fri, May 08, 2026, 11:41 AM UTC

Awesome!

Re: Dithering with CSS

#15

Post by embedding-shape » Fri, May 08, 2026, 11:42 AM UTC

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?

Re: Dithering with CSS

#16

Post by boltzmann64 » Fri, May 08, 2026, 11:56 AM UTC

skrebbel wrote: post #10

ramon156 wrote: post #2

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

please add atleast one example to demonstrate how the output will look like.

Re: Dithering with CSS

#17

Post by OuterVale » Fri, May 08, 2026, 12:34 PM UTC

boltzmann64 wrote: post #16

skrebbel wrote: post #10

Earlier quoted context omitted.

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

please add atleast one example to demonstrate how the output will look like.

There is no sign-up or anything, so you can see how it looks immediately by opening the web app. https://lookscanned.io/scan

Re: Dithering with CSS

#18

Post by tiffanyh » Fri, May 08, 2026, 1:01 PM UTC

I always thought how WSJ does dithering to be aesthetically pleasing.

https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-i...

Re: Dithering with CSS

#19

Post by shortformblog » Fri, May 08, 2026, 1:30 PM UTC

It is so wild that this got shared, as I was working on a project that very specifically was hoping to integrate a feature like this. Psyched to try it, I’ll credit the author in the credits of the site I’m building.

Re: Dithering with CSS

#20

Post by kevinsync » Fri, May 08, 2026, 2:14 PM UTC

heftig wrote: post #11

IshKebab wrote: post #9

Earlier quoted context omitted.

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.

Yeah they could add grayscale to the filter rule to make the colors go away.

  #dither-demo img.dithered {
    filter: url(#dither) grayscale(1);
  }