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

91–100 of 133 posts

Re: Websites should not use dithered images

#91

Post by louhike »

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 was also a good option for CRT screen as they tended to blend the dithering (more or less depending on the video signal quality). It helped to make transparency or new colors as pointed out.

Re: Websites should not use dithered images

#92

Post by dang »

omoikane wrote: post #79

Previous discussions on the original article that this article is responding to: https://news.ycombinator.com/item?id=28696014

Thanks! Macroexpanded:

Dithered images and websites (2020) - https://news.ycombinator.com/item?id=28696014 - Sept 2021 (121 comments)

Re: Websites should not use dithered images

#93

Post by ska »

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.

The opposite is likely. RLE works best with long "runs" of the same value. Dithering will tend to break up these regions if it improves quantization error.

Re: Websites should not use dithered images

#94

Post by news_to_me »

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.

Re: Websites should not use dithered images

#95

Post by jrochkind1 »

tofof wrote: post #90
jrochkind1 wrote: post #31

Earlier quoted context omitted.

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…

I find the original 5053x3581 image to be 5.88 MbB (6176 thousand bytes). The dithered 63.3 KB (65 thousand bytes) image is actually natively only 800x567 pixels. In other words, they get to 1% of the filesize by reducing the number of pixels to 2.5% of the original count. Once you've done that, you can get a better looking image by using Squoosh than by dithering. https://imgur.com/a/9bGGA4j shows a comparison of th…

Also for a website that claims to be concerned with reducing energy usage for sustainability... why the heck do they have a 5053x3581 ~6MB JPG even on their "standard, not solar-powered" website, amirite?!?

Re: Websites should not use dithered images

#96

Post by dinkelberg »

cbarrick wrote: post #44

That 6 kB WebP looks awful . This seems a bit apples-to-oranges. To make the argument that WebP is better than dithering, the author should compare the 30 kB dithered image to a 30 kB WebP. Or even compare to a smaller WebP that lacks obvious compression artifacts. In the comparison as given, I would not say that the WebP is a better image.

I think you might have mixed up the different images at the end of the article. The image labels are a bit confusing.

Re: Websites should not use dithered images

#97

Post by masklinn »

grishka wrote: post #37
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 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.

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

Even then that's a bit more complicated because both formats will apply LZ compression (respectively LZW and LZ77 because DEFLATE), so depending on the original source the dithering can work against the compression.

Re: Websites should not use dithered images

#99

Post by kixiQu »

vmception wrote: post #75
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…

> 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.

Re: Websites should not use dithered images

#100

Post by wolf550e »

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…

JPEG removes fine detail by transforming 8x8 pixel squares into the frequency domain using a 2d discreet cosine transform and quantizing the coefficients. It also optionally subsamples the chroma. The other things JPEG does are reversible.
Post reply on HN