Dithering was never a compression technique, it's a filtering technique for reducing banding on devices/displays/images that have a small color palette.

In fact, even in the 80's, dithered images were often larger than their un-dithered counterpart, sometimes by a lot. But it was worth the trade-off when the alternative was an image with so much banding that it could be confused for a European flag.

Unless you're trying to display your image on a retro console (or have aesthetic reasons for wanting to achieve that effect), you should not use dithering. Essentially all modern devices have a sufficiently enormous color palette, and modern compression algorithms use other techniques to achieve their efficiency.

In fact, modern compression will do a much better job giving you a smaller file size if you don't use dithering.

Edit:

Don't get me wrong, dithering is a super interesting topic, and designing a good dither can be surprisingly hard, it's just not going to help you if your goal is to shrink the images on your website the way the article claims.

If you haven't seen the trailer for "Return of the Obra Dinn" you owe it to yourself to take a look:

https://youtu.be/ILolesm8kFY

Super cool aesthetic, and writing that shader must have been all sorts of difficult/fun. But you don't do this sort of thing for compression efficiency.

Really? IME images compressed real hard with modern techniques look pretty terrible. Dithering is much less efficient if you're looking for low loss, but if you're trying to get something quite lossy, it looks better to my eyes.

This was something I helped with recently, as a great case study. We launched a new website for our game studio recently and went all-out on supporting modern compressed images: AVIF and WebP with PNG fallback.

The header image for this page was a doozy: https://uplift.games/about/

Originally, the image came from art with the glow around the planet being dithered. The resulting PNG was over 2 MB, resisted crushing, and didn't downscale well. Trying to use AVIF and WebP with aggressive compression made the image look awful.

We asked if they could remove the dithering and suddenly we got super great compression with some tweaking: 50 kB as AVIF, 68 kB as WebP, 797 kB as PNG (oof!)

This is a large banner image. Smaller images can get _much_ smaller with AVIF and WebP with no sacrifice of quality. It takes some tweaking and the tools were pretty bad in my experience. We wrote a couple utilities to do this and fiddled with knobs for awhile and it turned out great.

EDIT: Looking at this page again closely, I can see interesting artifacts because of AVIF. Look at the robo-dog's left ear! You could probably use slightly higher settings than we did.

> Look at the robo-dog's left ear!

Not sure how you created those AVIFs. The reference AVIF encoder[0] wants to use 4:4:4 chroma, but it looks like that hero image is 4:2:0. There is a small size hit for 4:4:4, but edges around saturated colors is much better.

[0] https://github.com/AOMediaCodec/libavif