Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Websites should not use dithered images

simplethread.com

Post reply on HN
Print view View original

101–110 of 133 posts

Re: Websites should not use dithered images

#101

Post by anentropic »

news_to_me wrote: post #94
anentropic wrote: post #67

Wow I feel old, everyone seems to have forgotten why and how to use these techniques :( No one was dithering large photos back in the day - that's what JPEG are for. The point of dithering was to take advantage of the reduced bit depth of indexed-colour GIFs (and later PNGs). The Dither-Me-This tool does a lovely job of rendering different dither styles but then misses the point completely by exporting 32-bit RGB+alp…

GIF uses LZW compression, not RLE, but your point stands that it more efficiently compresses long runs of the same color.

Ah you're right... I saw another comment mention RLE which jogged my memory, as you say it was the same point though, to have large areas of flat colour

It was BMP that used RLE wasn't it?

Re: Websites should not use dithered images

#102

Post by vmception »

kixiQu wrote: post #99
vmception wrote: post #75

Earlier quoted context omitted.

> Also... WebP and AVIF compression rate looks great, but can it be used for websites today if not supported by Safari? https://caniuse.com/webp https://caniuse.com/avif You load them conditionally based on browser capability or user-agent

Doing this makes a lot of sense for any web setup where you already have something you're calling an "asset pipeline", but can seem pretty nuts where you're writing simple no-JS HTML.

nothing about web for the last decade has been about no-JS HTML

its an option but doesn't leave you anything to contribute. the web is fragmented most of the toolchain is for simplifying deployment into that fragmented place without caring that it is fragmented. so not really nuts when everything already takes care of it for you. you can stick with no-JS HTML cached on an edge node just as well, or not cached if you expect low traffic, its whatever.

Re: Websites should not use dithered images

#103

Post by jedimastert »

musingsole wrote: post #26
jedimastert wrote: post #18

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, bu…

Low Tech Magazine Article on the whole site...which mentions dithering: https://www.lowtechmagazine.com/2018/09/how-to-build-a-lowte... """Compressed through this dithering plugin, images featured in the articles add much less load to the content: compared to the old website, the images are roughly ten times less resource-intensive.""" There's an assertion which implies data, but no data. But accepting that there was…

the "data" comes in the form of a before and after perf-test:

before: https://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3...

after: https://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3...

Re: Websites should not use dithered images

#104

Post by jokethrowaway »

DitheringIdiot wrote: post #32

nathaniel here, writer of the article this article is referencing. If it's okay with you I'll update the original with a link to this at the top. It's sort of hilarious that I made an whole app based on a premise that is basically just wrong. I wish I could say I've learned my lesson, but I'll probably continue to make enjoyable mistakes like this for the rest of my life.

I would give gif a shot to see if you can get some savings applying dithering there

Re: Websites should not use dithered images

#105

Post by munificent »

chmod775 wrote: post #48
DitheringIdiot wrote: post #32

nathaniel here, writer of the article this article is referencing. If it's okay with you I'll update the original with a link to this at the top. It's sort of hilarious that I made an whole app based on a premise that is basically just wrong. I wish I could say I've learned my lesson, but I'll probably continue to make enjoyable mistakes like this for the rest of my life.

You're not as wrong as you think. Dithering allows you to display images with a limited color palette, thus reducing the file size. However the image formats chosen here don't really benefit from that. Dithering is particularly effective in bitmap formats that use a palette (GIF, for instance). Just make sure your gif is actually saved with less bits-per-pixel than your original image. It's however true that these fo…

> Dithering allows you to display images with a limited color palette, thus reducing the file size.

I think that sentence is misleading and is what caused the initial misconception.

Reducing the color palette is a technique for reducing file size. For example, say you have a grayscale image using 8 bits per pixel (256 colors). Ignoring other compression techniques, you can cut the size of the image in half by reducing it 4 bits per pixel (16 colors).

The naïve way to reduce bit depth is by discarding the low order bits, since they carry the least information. However, when you do that, the result is banding [1]. Banding is an unsightly artifact.

Dithering exists essentially to deal with banding. It works by (sort of) adding a slight amount of noise to the pixel values to diffuse the transitions between diffferent thresholds.

But anyone with an ounce of information theory will tell you that noise by definition is literally the hardest thing to compress. So when you dither an image, you are throwing away almost all of the gains you got by reducing the bit depth in the first place.

[1]: https://en.wikipedia.org/wiki/Colour_banding

Re: Websites should not use dithered images

#106

Post by munificent »

jandrese wrote: post #14

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.

Yes, you definitely want a palettized output format. But, even so, dithering makes that harder to compress. You're essentially adding noise, which confounds data compression.

Re: Websites should not use dithered images

#107

Post by grujicd »

Lot of posts here say that dithering is something we did in "good old days". Dithering is still very much alive, just not as needed on general web sites. But it's critical when you need to squeeze animation sprites for games or multimedia projects. These sprites typically need transparency, and precise control over which frame is displayed, so standard video codecs can't be used.

So 8-bit palettized PNG sprite sheets are the most convenient way to do it in the browser, where it's not efficient to manually unpack some custom format.

I highly recommend pngquant tool with its adaptive dithering algorithm for compressing sprite sheets. One of main features is it uses partial transparency colors in a palette, while few other tools I tried just support on/off transparency, which is far from great. Especially for antialiased semitransparent edges. pngquant works beautifully with these cases.

https://pngquant.org/

Re: Websites should not use dithered images

#108

Post by [deleted] »

kixiQu wrote: post #99
vmception wrote: post #75

Earlier quoted context omitted.

> Also... WebP and AVIF compression rate looks great, but can it be used for websites today if not supported by Safari? https://caniuse.com/webp https://caniuse.com/avif You load them conditionally based on browser capability or user-agent

Doing this makes a lot of sense for any web setup where you already have something you're calling an "asset pipeline", but can seem pretty nuts where you're writing simple no-JS HTML.

[deleted]

Re: Websites should not use dithered images

#109

Post by zamadatix »

kixiQu wrote: post #99
vmception wrote: post #75

Earlier quoted context omitted.

> Also... WebP and AVIF compression rate looks great, but can it be used for websites today if not supported by Safari? https://caniuse.com/webp https://caniuse.com/avif You load them conditionally based on browser capability or user-agent

Doing this makes a lot of sense for any web setup where you already have something you're calling an "asset pipeline", but can seem pretty nuts where you're writing simple no-JS HTML.

It's really not bad:
and you only need to bother with this on images it might matter (e.g. key large multi MB photos in a blog post or something not all of the 20x20 logo icons that would be less than 2kb even if uncompressed).

Re: Websites should not use dithered images

#110

Post by Hitton »

jmull wrote: post #77
Hitton wrote: post #68

Wow, I don't remember reading such a bad article in a very long time. Very disingenuous take. 1) author starts with lossy format at the beginning of the comparison 2) author uses squoosh app for some of his conversions, but not others, even though it supports dithering too - instead uses a random web tool which doesn't care about file size at all 3) not even a mention about image formats supporting limited color pale…

> Very disingenuous take...instead uses a random web tool You missed that this is a rebuttal to an article that suggests using dithering and to use that specific tool. Hardly "random". > anyone still supports IE 11? Fair enough for now, but MS itself is in the process of dropping support for IE 11, so I don't expect others to carry on without them very widely. It will be all retro sites and corporate sites soon (LOL,…

Ok, not quite random, but still hardly fair. If that's the take, it should be called "Websites should not use images created by this dithering tool" instead.

Usage of IE 11 and other browsers which do not support even webp (old safaris) is higher than usage of screen readers.

Personally I doubt we'll ever experience widespread usage of avif, considering how long it took Apple with webp, we'll probably sooner have jpeg xl.

Post reply on HN