Hacker News Reader

Comment by pseudosavant | Hacker News Reader

This is generally some pretty terrible advice. Really, don't follow it. At least not without testing its impact.

Dithered 8-bit/256-color images will look 'better' than non-dithered 8-bit/265-color images, but it will almost always be worse that a 24-bit JPEG (no alpha) or 32-bit webP (includes alpha) and have a much larger file size.

I did some quick tests with https://squoosh.app. The 8-bit dithered PNG is >4x the size of the JPEG. It also shows some terrible banding on any kind of gradient in the image. The PNG is 5x larger than a better looking webP version of the same image.

I tested a lot of images (photos, drawings, digital artwork, etc) and some of the images were 10x larger as dithered PNGs vs webP/JPEG. Only one was smaller as a dithered PNG.

View on HN

Hi there author of the article here, I did a lot of testing when I wrote the article, and even made a tool for dithering.

https://doodad.dev/dither-me-this/

It completely depends on what kind of dithering you do — ordered dithering with a small color palette will give you a much smaller file size than a full color jpeg.

WebP and AVIF also support lossless compression and can be used for even smaller file sizes using dithering.

I didn't seem to find a 8-bit preset (what OP mentioned) to test how it would look like compared to true color images.

Depends on the quality level. In my test, recompressing the original as JPEG quality 12 (with ImageMagick) gives approximately the same size as your 12 color 4x1 dithering, but at better quality (though it's miscolored in places). Webp quality 11 also gives approximately the same size, but looks way better.

I suppose you can argue whether the JPEG artifacts look better or worse than the dithering, but WebP definitely looks better.

Same here, tested dozens of images from our website (user avatars, product images and logos), and the vast majority ended up being larger and with much lower quality. We serve WebPs generated using the sharp library with quality=80.

A. It looks like Safari didn't support webP at the time? https://caniuse.com/webp Either way, they explicitly mention it anyway.

B. If the comparisons keep the pixel size constant, they're not relying on the cool thing about dithering, which is that you can dither down to a small color count and quite small pixel size then display larger with image-rendering: crisp-edges; and it'll still look #aesthetic. From my experiments with the tool you linked, the scaled-up equivalently-sized webPs look potato. This is most relevant for big hero images.

How about dithering as a compositor-level rendering technique for low-bpp displays, rather than as a compression-at-rest effect?

I'm thinking specifically of non-HDR displays displaying HDR content (where HDR10 includes 10-bit-per-channel color.) Presumably the compsitor, if it knew you were watching an HDR video on a non-HDR display, would do better by dithering the HDR content down to 24-bit non-HDR content for display, rather than allowing it to be naively rendered with 24-bit banding?

It can even be tested with the author's own tool[1] and the sample image he provides. I'm surprised the author didn't experiment themselves? Or maybe the did, and the it's the further reduced settings they decided should be used...

[1]: https://doodad.dev/dither-me-this

Reply on news.ycombinator.com