3 ms·

Dithering with CSS

115 points by speckx 6mo ago

AntiUSAbah 6mo ago
The image quality is so bad, I don't get it?
molszanski 6mo ago
Awesome!
ramon156 6mo ago
Is this what they use at schools before they hand it over to the printer? /j
- marvinblum 6mo ago
  Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...
- skrebbel 6mo ago
  I recommend lookscanned.io if you need a similar effect for legal reasons
  - boltzmann64 6mo ago
    please add atleast one example to demonstrate how the output will look like.
    - OuterVale 6mo ago
      There is no sign-up or anything, so you can see how it looks immediately by opening the web app. https://lookscanned.io/scan https://lookscanned.io/scan
    - skrebbel 6mo ago
      I’m not the author but it’s all local and theres no signup so just plug a random PDF in there and see for yourself!
binaryturtle 6mo ago
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?
kelsolaar 6mo ago
It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!
nextlevelwizard 6mo ago
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
- IshKebab 6mo ago
  Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?
  - heftig 6mo ago
    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.
    - kevinsync 6mo ago
      Yeah they could add grayscale to the filter rule to make the colors go away. #dither-demo img.dithered { filter: url(#dither) grayscale(1); }
rpastuszak 6mo ago
I’ve messed with a similar idea here: https://untested.sonnet.io/notes/just-some-innocent-gradient-fun/ 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.
- ikesau 6mo ago
  Oh nice, this is way better. On finnicky engines, I think if I were to seriously implement this for a project that needed to support arbitrary images, I'd do the dithering server side (assuming it's possible to develop some heuristics to select the correct transformation based on image type (text, low contrast, blurry, etc)), serve those to users, and allow them to customize the colouring filters. That way the dithering looks as good as it can per image, but it can then still be stylized to a user's preferences.
  - rpastuszak 6mo ago
    Hm, for this - yes I think it would make sense. That being said there are libraries that apply proper dithering without relying on SVG filters. Also, I haven't tested this with canvas which I imagine would be much more consistent. If I were to do this... more seriously, I'd keep some parameters exposed in the shortcode/component rendering the dithered images (or data-attrs) so that I could fine-tune them on a case-per-case basis. (I originally wanted to replace the bio photos on my site, like this one https://untested.sonnet.io/notes/wislawa-szymborska/ https://untested.sonnet.io/notes/wislawa-szymborska/) There's a ton of articles about this but for something more fun and even better looking I recommend the Coding Train video on Weighted Voronoi Stippling: https://www.youtube.com/watch?v=Bxdt6T_1qgc https://www.youtube.com/watch?v=Bxdt6T_1qgc
tiborsaas 6mo ago
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/Element/feComposite https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
- pseudosavant 6mo ago
  My first thought was, this is actually SVG in CSS right? The capabilities of SVG are so underrated. I don't know how it makes sense that a vector graphics format has a filter format that can be applied to rasterized bitmaps though? Even more weird that I've used them on `<video>` too.
tnelsond4 6mo ago
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
embedding-shape 6mo ago
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?
tiffanyh 6mo ago
I always thought how WSJ does dithering to be aesthetically pleasing. https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-its-made-11576537243 https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-i...
shortformblog 6mo ago
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.
crazygringo 6mo ago
While I appreciate the retro aesthetic effect some blogs and sites use in dithering photographic images, I just don't think it works well on the modern web. People are using too many different device sizes and device resolutions. Look at an image on a small mobile screen and it's basically converted back to grayscale. Or make the dithering so coarse that it still looks dithered on a phone screen, and it just looks horribly blocky and unclear on a desktop.
ikesau 6mo ago
Wow, my first post that's frontpaged and it's the one I put the least effort into. I've at least fixed the noise colour bleed now. This technique does not do any file compression as it's a transformation applied to the image in the browser (though screenshots of the output would be smaller than the source) For a post on CSS-based noise dithering that I actually polished, there's also https://ikesau.co/blog/making-a-grainy-spotlight-effect-with-css/ https://ikesau.co/blog/making-a-grainy-spotlight-effect-with...
- panarchy 6mo ago
  Amusingly I found the colour (Whaddaya at? Are you from the cold or wet, eh?) bleed the most interesting part for potential artistic effect.
_air 6mo ago
Neat! Here’s orange guy In “camouflage”: https://imgur.com/a/9xpEG2a https://imgur.com/a/9xpEG2a
dnpls 6mo ago
Two-tone doesn't seem to be doing much, regardless of the colors I select. White becomes a light sepia, that's all.
ge96 6mo ago
The base frequency slider is cool how it seems to emanate from the top-left corner, that could be cool for motion effects

Dithering with CSS

115 points by speckx 6mo ago

AntiUSAbah 6mo ago

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

molszanski 6mo ago

Awesome!

ramon156 6mo ago

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

marvinblum 6mo ago
Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...
skrebbel 6mo ago
I recommend lookscanned.io if you need a similar effect for legal reasons
- boltzmann64 6mo ago
  please add atleast one example to demonstrate how the output will look like.
  - OuterVale 6mo ago
    There is no sign-up or anything, so you can see how it looks immediately by opening the web app. https://lookscanned.io/scan https://lookscanned.io/scan
  - skrebbel 6mo ago
    I’m not the author but it’s all local and theres no signup so just plug a random PDF in there and see for yourself!

binaryturtle 6mo ago

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?

kelsolaar 6mo ago

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

nextlevelwizard 6mo ago

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

IshKebab 6mo ago
Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?
- heftig 6mo ago
  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.
  - kevinsync 6mo ago
    Yeah they could add grayscale to the filter rule to make the colors go away. #dither-demo img.dithered { filter: url(#dither) grayscale(1); }

rpastuszak 6mo ago

I’ve messed with a similar idea here: https://untested.sonnet.io/notes/just-some-innocent-gradient-fun/ 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.

ikesau 6mo ago
Oh nice, this is way better. On finnicky engines, I think if I were to seriously implement this for a project that needed to support arbitrary images, I'd do the dithering server side (assuming it's possible to develop some heuristics to select the correct transformation based on image type (text, low contrast, blurry, etc)), serve those to users, and allow them to customize the colouring filters. That way the dithering looks as good as it can per image, but it can then still be stylized to a user's preferences.
- rpastuszak 6mo ago
  Hm, for this - yes I think it would make sense. That being said there are libraries that apply proper dithering without relying on SVG filters. Also, I haven't tested this with canvas which I imagine would be much more consistent. If I were to do this... more seriously, I'd keep some parameters exposed in the shortcode/component rendering the dithered images (or data-attrs) so that I could fine-tune them on a case-per-case basis. (I originally wanted to replace the bio photos on my site, like this one https://untested.sonnet.io/notes/wislawa-szymborska/ https://untested.sonnet.io/notes/wislawa-szymborska/) There's a ton of articles about this but for something more fun and even better looking I recommend the Coding Train video on Weighted Voronoi Stippling: https://www.youtube.com/watch?v=Bxdt6T_1qgc https://www.youtube.com/watch?v=Bxdt6T_1qgc

tiborsaas 6mo ago

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/Element/feComposite https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

pseudosavant 6mo ago
My first thought was, this is actually SVG in CSS right? The capabilities of SVG are so underrated. I don't know how it makes sense that a vector graphics format has a filter format that can be applied to rasterized bitmaps though? Even more weird that I've used them on `<video>` too.

tnelsond4 6mo ago

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

embedding-shape 6mo ago

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?

tiffanyh 6mo ago

I always thought how WSJ does dithering to be aesthetically pleasing. https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-its-made-11576537243 https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-i...

shortformblog 6mo ago

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.

crazygringo 6mo ago

While I appreciate the retro aesthetic effect some blogs and sites use in dithering photographic images, I just don't think it works well on the modern web. People are using too many different device sizes and device resolutions. Look at an image on a small mobile screen and it's basically converted back to grayscale. Or make the dithering so coarse that it still looks dithered on a phone screen, and it just looks horribly blocky and unclear on a desktop.

ikesau 6mo ago

Wow, my first post that's frontpaged and it's the one I put the least effort into. I've at least fixed the noise colour bleed now. This technique does not do any file compression as it's a transformation applied to the image in the browser (though screenshots of the output would be smaller than the source) For a post on CSS-based noise dithering that I actually polished, there's also https://ikesau.co/blog/making-a-grainy-spotlight-effect-with-css/ https://ikesau.co/blog/making-a-grainy-spotlight-effect-with...

panarchy 6mo ago
Amusingly I found the colour (Whaddaya at? Are you from the cold or wet, eh?) bleed the most interesting part for potential artistic effect.

_air 6mo ago

Neat! Here’s orange guy In “camouflage”: https://imgur.com/a/9xpEG2a https://imgur.com/a/9xpEG2a

dnpls 6mo ago

Two-tone doesn't seem to be doing much, regardless of the colors I select. White becomes a light sepia, that's all.

ge96 6mo ago

The base frequency slider is cool how it seems to emanate from the top-left corner, that could be cool for motion effects