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

111–120 of 133 posts

Re: Websites should not use dithered images

#111

Post by xtracto »

munificent wrote: post #106
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.

Right, it sounds to me that people are confusing Dithering with Compression. Back in the day we used Dithering to represent high-color-depth images in lower-color-depth devices... it sounds similar to compression but it is not.

It's like confounding stenography with cryptography. In a way, both are used to "hide" a message, but they are completely different beasts.

Re: Websites should not use dithered images

#112

Post by xtracto »

Hitton wrote: post #110
jmull wrote: post #77

Earlier quoted context omitted.

> 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 jpe…

I think the main premise of the article "Dithering is not Compression". People should use compression algorithms to compress their images. They shouldn't be using "color depth decrease" algorithms to compress their images.

Re: Websites should not use dithered images

#113

Post by dreamcompiler »

burlesona wrote: post #12

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…

Exactly. Dithering is not a compression scheme; it's an encoding scheme. It's particularly useful in systems where you have limited sample dynamic range but you can sample much more frequently than the Nyquist criterion. It trades sample range for sample frequency while conveying the same information.

Audio CD players use Sigma-Delta modulation (also called "1-bit D/A converters") which is essentially just dithering in one dimension. But CDs don't contain fewer bits because of this.

Re: Websites should not use dithered images

#114

Post by WithinReason »

marginalia_nu wrote: post #42
rjmunro wrote: post #28

Earlier quoted context omitted.

If added noise is the aesthetic effect you are going for, it's probably better to ship a low quality (<50) JPEG of the original image and add the "dithering" in the client by overlaying noise there.

Dithering is fairly expensive operation. Please don't do it client-side each time a resource is fetched.

It's much cheaper than decompressing a JPEG

Re: Websites should not use dithered images

#115

Post by noduerme »

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…

Everyone talking about compression is missing the original point. When GIF format came along, most people still had 8-bit displays. Photos look terrible if you reduce them to 256 colors naively. Dithering helped fill the gap in the early days of the web until 16-bit and higher displays became more common.

Re: Websites should not use dithered images

#116

Post by marginalia_nu »

WithinReason wrote: post #114
marginalia_nu wrote: post #42

Earlier quoted context omitted.

Dithering is fairly expensive operation. Please don't do it client-side each time a resource is fetched.

It's much cheaper than decompressing a JPEG

Compressing, perhaps. But decompressing? Not really.

Re: Websites should not use dithered images

#117

Post by handrous »

louissan wrote: post #20
deltarholamda wrote: post #16

Earlier quoted context omitted.

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.

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 (becau…

Sort of. I suspect an under-appreciated part of the modern Web performing so poorly is how casually we throw in vector graphics (SVG, mostly) and draw/transform shit with CSS, these days. Those used to be things one simply did not do without an excellent reason, because they're computationally costly for the client. In maybe a couple years' span they went from "wait, don't do that, it's bad for your user" to "LOL SVG icons are so convenient, let's use them everywhere, and then maybe skew and manipulate them with CSS at runtime because why not".

[EDIT] To clarify, this is relevant to cutting bytes because encoding graphics with SVG or drawing them with CSS can mean shipping fewer bytes than JPGs or whatever.

Re: Websites should not use dithered images

#118

Post by mananaysiempre »

munificent wrote: post #105
chmod775 wrote: post #48

Earlier quoted context omitted.

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 reducin…

This makes me think that one could store less significant bits of the channels with a lower spatial resolution ...

... Wait, this is what JPEG is, isn’t it? Why aren’t there dithering decoders for it, in this case? Is the block too small?

Re: Websites should not use dithered images

#119

Post by klodolph »

StillBored wrote: post #57
klodolph wrote: post #23

Earlier quoted context omitted.

PNG uses deflate, which can encode runs of repeating values very efficiently. A run of repeating XYZXYZX… will get encoded as Literal X, literal Y, literal Z, copy distance=3 length=N

Was going to say, this but tiny correction, its the LZ variant that does this, as will most of them. Deflate is just two pass compression of LZSS followed by Huffman. The LZ variant will pick out repeat patterns, while the second will compress the byte representation of the resulting stream if a particular set of values is over represented. AKA its all variations of X, Y, Z in different orders those might get assigne…

I’ve written a deflate decompressor and I’m not sure what correction you are trying to make. It seems like you’re replying to this comment to show off some details you know about deflate.

Re: Websites should not use dithered images

#120

Post by ksec »

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…

>Wow I feel old, everyone seems to have forgotten why and how to use these techniques :(

That is the reason why Web Development keep reinventing the flat tire.

Post reply on HN