Websites should not use dithered images

The idea that dithering should be used to reduce your image size is a misunderstanding of image compression.

Dithering is a technique which allows you to represent a color image with a very limited palette, in particular a two bit palette. The result is not much like a normal photo, but much better than nothing if you have a machine that can only output a few colors. (You could think of that as a sort of compression where the goal is not to reduce file size, but to reduce the number of colors needed to comprehend the image.)

JPG, WebP etc. are compression techniques designed to reduce the size of a full color images, especially photos. Because they’re specifically designed for photos, they don’t work as well on things that aren’t “photo like.”

Dithered images are very much not like real photos, so it’s not surprising that compression techniques designed for photos don’t work well on dithered images.

(I’m not an expert on image compression, but as an example, I believe JPEG and similar algorithms expect to find large blocks of basically the same color in photos - such as a blue sky - and save space by simplifying that to a few big regions of all one color. The “speckled” appearance caused by dithering actively defeats that particular optimization.)

Isn’t the whole point to switch to a palleted image when you dither? If you are leaving it truecolor it just makes the image worse for no benefit as the article noted. Switching to a palleted PNG however can save a lot of bits in certain circumstances.

That said just pulling out a good lossy encoder makes a lot more sense most of the time. It is easier and it will look better. Dithering is lossy anyway.

This is what I think of when the dithering articles show up. Way back in the day, dithering and reducing the color palette made a difference, when you were talking images loading over a 28.8k modem. For many widgets, you could shave kilobytes off, when kilobytes really, really meant something.

Lesson learned: test your optimizations.

I will admit I'm surprised by the results. I assume there's not really a rendering perf hit from WebP vs jpg?

Also, the preposition that lowering the file-size, and therefore transfer time, is the most important factor in environmental impact is, I think, a little under-supported.

That being said, the original Low Tech Magazine article's perf claim is back up from the data, but they also use very low resolution images.

I'd be curious if dithering could be optimized to a particular algorithm. For example, jpeg's quantization is based on the assumption that images are mostly made of low frequency data and higher frequency can be removed without changing the quality of the over all image too much. With dithering, this is almost the exact opposite and all low frequency information is replaced with high frequency information, meaning it won't be nearly as effective.

well tbh they still do today. Every byte you can take off (very easily at that ...) makes websites: . faster to the user, which does contribute to a general reduced level of stress :-) . use less energy: less bandwidth/less CPU (cisco, nginx, your disk/memory cache.... you name it). Less $$ on your bandwidth/cpu bill @[insert cloud provider here] and less BW/CPU used up on your user's mobile metered connection (because nowadays it's mobile, dontcha know) So even though if many instances over-optimisation is definitely overkill ...in nearly all cases a sane amount of optimisation is good.

my 2p