Websites should not use dithered images

As the OP says, but maybe not clearly enough, it's a response made to these claims/suggestions by lowtechmagazine.com:

https://www.lowtechmagazine.com/2018/09/how-to-build-a-lowte...

They do use dithering with JPGs and PNGs on their "solar-powered website" variant, which I won't link-to so as not to contribute to draining the battery with an HN effect.

The first image I found to compare from the two versions of their own website... the dithered version is 65K and the original is an incredible 6.2MB... but that's at least in part because the original is 5053x3581 pixels and the dithered is 1213x600! First picture at https://www.lowtechmagazine.com/2021/11/fascine-mattresses-b... is the "non-dithered" variant. There may be other compression mis-choices on the original JPEG as well. To suggest this size difference is due to dithering would be misleading!

Size and compress your images properly (including JPG lossy compression) to save energy resources is good advice; I think the OP is probably right that dithering is not a very useful tool in that toolkit.

It makes me lose some respect for lowtechmagazine, when they go for more style over substance in this particular case, it makes me wonder in others.

The article is a rebuttal to this article (https://endtimes.dev/why-you-should-dither-images/), which in fact used photographic images, so definitely not a straw-man article in this case.

Mpqzcp nzxxpyetyr htes pxzetzylwwj-nslcrpo nzxxpyed, dpp tq jzfc nzxxpye xlvpd dpydp ty esp nzyepie zq esp lcetnwp lyo yze ufde esp etewp. Nzxxpyetyr hteszfe vyzhtyr esp nzyepie xlvpd jzf wzzv (opdpcgtyrwj) defato.

Yes, exactly. Indexed PNG makes for really small files. Especially when you don't use much colours (for 256-color-index, the saving is not really there, but if you are like <8, it's worth it - if the image fits, style-wise, of course).

Dithering would, in theory, work well for compression if you use a palette. GIF always does that, PNG also has a palette mode.

JPEG, WebP, and AVIF use various frequency-domain transforms. These work best for smooth color transitions, like in photos. They're generally terrible for sharp edges (as found on screenshots), and especially so when many neighboring pixels have drastically different colors.

The dithered example is a bit disingenuous, since it coaxes the picture into a palette that is clearly not suitable, causing an egregious amount of artifacting.

I don't know what's going on with their dithered image sample:

https://3otebq2knmnf3smsj0374a9u-wpengine.netdna-ssl.com/wp-...

This is the same dithered image with a sane 16 color palette:

https://www.marginalia.nu/color-simple_500-better-palette.pn...

Further, human eyes are kind of bad at blue colors, so whatever compression artifacts you get with JPEG or WebP is going to be really hard to detect. (The blue channel is typically compressed much harder by many algorithms because of this).