Before you try to save load time by dithering Jpegs, do something about the 10Mb JavaScript monstrosity that you're serving which is probably causing the issue in the first place.
Websites should not use dithered images
71–80 of 133 posts
Re: Websites should not use dithered images
#72Isn’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, just like audio software can dither when reducing the bit depth (say, from 24 bits to 16 bits per sample). It makes quantization less perceptible, by decoupling the quantization noise from the signal, which sounds less crunchy (audio) or has less posterization (images).
Re: Websites should not use dithered images
#73nathaniel 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.
FWIW I love the app and have been using it a lot just because.
I think the real value is that it presents a novel idea of considering image compression creatively.
Re: Websites should not use dithered images
#74As has been said, dithering is something that people did back in the bad old days of 256 (or 16!) color palletized displays. It is a way to "fake" more colors than available. It was never meant for image compression. I don't even remember the last time I saw a dithered image anywhere on the internet.... it's been quite some time.
That's not quite right...
Dithering was used to make GIFs smaller, since the reduced palette could fit into a smaller bit depth per pixel. So in that sense it is a type of compression. This was useful and used even when 24-bit colour displays became common.
The issue of 256 colour palette display modes is separate and caused other problems - i.e. you might specify one palette of 16 colours in your GIF, but they might not exactly match the colours provided by the operating system.
That is where the (I imagine now long forgotten...) notion of a "web safe" colour palette came from - these were the 216 colours you could expect any 256 colour OS to provide (produced by dividing up the colour space evenly using only combinations of 00 33 66 99 CC FF values for R, G, B)
You could use colours outside the safe palette in your GIF but the OS would use the nearest available colour from its own palette to display them, and often it did a bad/unpredictable job of choosing a substitute. So it was common to deliberately adjust colours in your image to align with the "web safe" palette, so as not to risk garish substitutions when displayed on a 256 colour display.
Re: Websites should not use dithered images
#75Wow 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
Re: Websites should not use dithered images
#76The dithered example is a bit disingenuous, since it coaxes the picture into a palette that is clearly not suitable, causing an egregious amount of artifacting. I don't know what's going on with their dithered image sample: https://3otebq2knmnf3smsj0374a9u-wpengine.netdna-ssl.com/wp-... This is the same dithered image with a sane 16 color palette: https://www.marginalia.nu/color-simple_500-better-palette.pn... Furthe…
Yeah, that ocean example was a cherry-picked strawman set up like a bowling pin.
Re: Websites should not use dithered images
#77Wow, 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, for completely different reasons -- one wants to visit the past from time-to-time, and the other doesn't know how to escape it)
Re: Websites should not use dithered images
#78The 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…
Yeah, I thought about this as soon as I saw this article compare dithered JPEGs to non-dithered JPEGs. Dithering is going to amplify the high frequencies in your images. JPEG is not the target type of compression for dithering.
Re: Websites should not use dithered images
#79Previous discussions on the original article that this article is responding to:
Re: Websites should not use dithered images
#80I would also be concerned with how these things scale in terms of the display. For instance somebody might have a HiDPI or Retina screen or they might be zoomed in or out on a particular web page. Or for that matter maybe you want to scale the size of the image so it fills the screen horizontally or vertically. The scaling algorithm might maintain the the dither or it might smooth and blend it. Maybe it looks OK in t…
Yes, will almost certainly get weird or ugly moire effects if dithered images are not rendered 1:1