Rendered at 12:20:48 GMT+0000 (Coordinated Universal Time) with Vercel.
ikesau 22 hours 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)
(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.
nextlevelwizard 1 days 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 1 days ago [-]
Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?
heftig 1 days 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.
ramon156 1 days ago [-]
Is this what they use at schools before they hand it over to the printer? /j
skrebbel 1 days ago [-]
I recommend lookscanned.io if you need a similar effect for legal reasons
boltzmann64 1 days ago [-]
please add atleast one example to demonstrate how the output will look like.
OuterVale 24 hours 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
marvinblum 1 days ago [-]
Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...
tiffanyh 23 hours ago [-]
I always thought how WSJ does dithering to be aesthetically pleasing.
It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!
crazygringo 22 hours 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.
dnpls 20 hours ago [-]
Two-tone doesn't seem to be doing much, regardless of the colors I select. White becomes a light sepia, that's all.
binaryturtle 1 days 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?
tnelsond4 1 days 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 1 days 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?
shortformblog 23 hours 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.
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...
(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.
I have dabbled with some dithering algorithms and while this is way faster than my naive js implementations, this looks pretty bad
I think the noise is also way too 'soft'. At high frequencies it just becomes near-uniform gray so it barely affects the thresholding.
https://www.wsj.com/articles/whats-in-a-hedcut-depends-how-i...
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
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.
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