Chris’ Corner: Dithering

Dithering is a vibe:

Dither is an intentionally applied form of noise used to randomize quantization error, preventing large-scale patterns such as color banding in images. 

Wikipedia

For an academic PDF, this is pretty approachable.

In the web world, I typically think of it as associated with “indexed colors” images like PNG and GIF can do. For example, if you Save for Web from Adobe Photoshop as a PNG or GIF, you can whack down the colors super low and see some cool dithering.

Here are the three dithering choices my copy of Photoshop has:

They are all kinda cool looking if you ask me. More relevant, they made the image smaller in size and require less colors to display. Meaning their aesthetic is like “old-school computing” or “retro video games”.

Acorn, a much more economically friendly image editor, can also dither:

Can you do it right on the web, though? Darn tooting. Well, you can replicate the aesthetic anyway, since you can read images, and we’ve always got tools like <canvas> to play with.

Andrew Stephens made a Web Component that does exactly that. You pass it an image, it reads it and does cool dithering magic, and outputs it onto a canvas for you. He wrote it up in a quick blog post Improved Web Component for Pixel-Accurate Atkinson Dithered Images where he outlines some improvements to this latest version of the component.

I snagged the code and chucked a copy of the web component JavaScript onto our Asset Hosting so I could make a Pen with it. I did have to make a few changes. I had to make the Web Worker inline instead of referencing another file. Then I had to make sure to set img.crossOrigin = "Anonymous"; so I could reference an assets-hosted image as well. You don’t have to do those things if you’re working with all relative paths locally.

This is the original image:

And here’s a Pen where I dither it on-the-fly:

Cool.

This whole vibe matches with another thing I saw recently:

https://end.city/

Refresh the page for a randomly generated busted-up old castle thing. With the random flags and glyphs and icons and stuff I feel like it’s for something specific, but damned if I know what it is.

---

Speaking of very specific nerdy pursuits, I enjoyed reading Philip Walton’s very custom pursuit of improving LCP (Largest Contentful Paint) in unknown situations. The blog post is Dynamic LCP Priority: Learning from Past Visits.

The overall concept is fairly simple.

1. One element on the page is responsible. That’s the LCP.
2. You have no idea what element that is on a dynamic site.
3. If you did know what it was, you could improve your LCP score by using the fetchpriority attribute on that element (if it’s, say, an image). This can be used to make the browser prioritize loading and rendering that element, improving LCP.
4. You can’t just use fetchpriority willy nilly, because if you’re wrong, you could actually harm LCP.
5. You can actually figure out what the LCP element is… after the page has loaded.
6. That’s too late to be useful, but if you save that information, you could pluck it out of storage and use it to put that fetchpriority on the right element for every different page of your site.

Phew. That’s friggin complicated. Not exactly the lowest-hanging web performance fruit. But it’s cool and nerdy and if you’re chasing the best possible numbers, it can go in the toolbox.