21–30 of 30 posts
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.
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...
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.
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.
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-g…
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.
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.
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 dither…
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/)
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
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 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 `` too.