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

21–30 of 133 posts

Re: Websites should not use dithered images

#21

Post by NBJack »

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…

Dithering can be applied to any palettesd imaged; in the earlier days of the net, restricted color palettes could indeed help reduce size. Dithering however can interfere with run length encoding (RLE) compression used in certain formats (i.e. GIF, or the ancient PCX).

As I understand it, JPEG compression does not play nice with dithering as it is based on a matrix of discrete cosine transformations. Smooth transitions from one color to the next are much easier to compress this way than highly detailed features (i.e. a series of small dots due to dithering). For example, if you blur out parts of a photo, you will likely get a smaller image at the same compression level as the original. In other words, dithering basically creates a much harder image for the JPEG algorithm to compress.

Re: Websites should not use dithered images

#22

Post by vanderZwan »

jschwartzi wrote: post #15
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…

you might get better results with a run-length encoding on a dithered image. I’m not aware of any modern image formats that use RLE though.

I've experimented with that. It only works if you pick you pick a form of ordered dithering, like a Bayer index or Interleaved Gradient Noise[0][1]. Which looks pretty terrible compared to error diffusion dithering approaches like Sierra3. And even if you use ordered dithering it only somewhat helps with compression.

[0]https://bartwronski.com/2016/10/30/dithering-part-three-real...

[1] https://www.iryoku.com/next-generation-post-processing-in-ca...

Re: Websites should not use dithered images

#23

Post by klodolph »

jschwartzi wrote: post #15
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…

you might get better results with a run-length encoding on a dithered image. I’m not aware of any modern image formats that use RLE though.

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

Re: Websites should not use dithered images

#24

Post by janekm »

jschwartzi wrote: post #15
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…

you might get better results with a run-length encoding on a dithered image. I’m not aware of any modern image formats that use RLE though.

A dithered image tends to produce very short runs of pixels so is likely to get poor compression with RLE.

Ordered dithering with a compression algorithm that can compress "words" (repeated patterns) (like the LZW in GIF) will perform better if the image has large areas of flat colour (not photos).

Re: Websites should not use dithered images

#26

Post by musingsole »

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 SOME comparison to specifically their "old" image method, the takeaway could be "re-evaluate your optimizations"

Another take with low-tech mag is an aim of describing and utilizing old techniques that did the job just fine (a sentiment I take from a lot of their articles). So, using the latest compression algorithm literally doesn't tick as many of their boxes as dithering.

Re: Websites should not use dithered images

#28

Post by rjmunro »

magicalhippo wrote: post #13
WithinReason wrote: post #7

TLDR: There are much better compression algorithms than dithering

Dithering isn't a compression algorithm[1]. It's an algorithm that adds noise to effectively increase bitdepth when downsampling. In the case of images, it makes color-reduced versions not look terrible. Adding noise is almost always a bad thing for compression. The undithered images would compress much better. [1]: https://en.wikipedia.org/wiki/Dither

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.

Re: Websites should not use dithered images

#29

Post by zinekeller »

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…

Dither when it makes sense, but using dither in photographic images... defeats the purpose of JPEG and its descendants. Photographic lossy compression is designed to be compressed with non-dithered (as much as possible) images.
Post reply on HN