The idea that dithering should be used to reduce your image size is a misunderstanding of image compression.<p>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 where the goal is not to reduce file size, but to reduce the number of colors needed to comprehend the image.)<p>JPG, WebP etc. are compression techniques designed to reduce the size of a full color images, especially photos. Because they’re specifically designed for photos, they don’t work as well on things that aren’t “photo like.”<p>Dithered images are very much not like real photos, so it’s not surprising that compression techniques designed for photos don’t work well on dithered images.<p>(I’m not an expert on image compression, but as an example, I believe JPEG and similar algorithms expect to find large blocks of basically the same color in photos - such as a blue sky - and save space by simplifying that to a few big regions of all one color. The “speckled” appearance caused by dithering actively defeats that particular optimization.)
nathaniel here, writer of the article this article is referencing.<p>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.<p>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.
Wow I feel old, everyone seems to have forgotten why and how to use these techniques :(<p>No one was dithering large photos back in the day - that's what JPEG are for.<p>The point of dithering was to take advantage of the reduced bit depth of indexed-colour GIFs (and later PNGs).<p>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+alpha PNGs. 24 bits of RGB plus a 8-bit alpha channel? such decadence! A 16 colour dithered image only needs a 4 bit palette.<p>The type of images where this was useful in web design have mostly been made obsolete by the increased capabilities of CSS, and ability to render SVGs etc. e.g. graphical elements like borders and stripes of colour, or company logos. Or text in a specific font! (we didn't have web fonts in those days)<p>Why not use JPEGs for everything?<p>Two reasons:
One is that heavily compressed JPEGs can make crisp straight edges blurry or fuzzy, and colours can get a bit desaturated. Bad for logos.<p>The other is that GIF had a Run Length Encoding compression which meant that large blocks of flat colour would compress very efficiently.<p>It's worth noting that RLE does not compress dithering efficiently at all... back in the day we would spend a bunch of manual effort to avoid unnecessary dithering (i.e. make sure blocks of flat colour are really all a single colour). But some dithering was unavoidable and sometimes, for specific types of images, it was possible to make a GIF that was smaller and looked cleaner than a comparable JPEG.<p>Also... WebP and AVIF compression rate looks great, but can it be used for websites today if not supported by Safari? <a href="https://caniuse.com/webp" rel="nofollow">https://caniuse.com/webp</a> <a href="https://caniuse.com/avif" rel="nofollow">https://caniuse.com/avif</a>
The 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.<p>I don't know what's going on with their dithered image sample:<p><a href="https://3otebq2knmnf3smsj0374a9u-wpengine.netdna-ssl.com/wp-content/uploads/2021/11/color-simple_500_dither.webp" rel="nofollow">https://3otebq2knmnf3smsj0374a9u-wpengine.netdna-ssl.com/wp-...</a><p>This is the same dithered image with a sane 16 color palette:<p><a href="https://www.marginalia.nu/color-simple_500-better-palette.png" rel="nofollow">https://www.marginalia.nu/color-simple_500-better-palette.pn...</a><p>Further, human eyes are kind of bad at blue colors, so whatever compression artifacts you get with JPEG or WebP is going to be really hard to detect. (The blue channel is typically compressed much harder by many algorithms because of this).
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.<p>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.
I would also be concerned with how these things scale in terms of the display.<p>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.<p>The scaling algorithm might maintain the the dither or it might smooth and blend it. Maybe it looks OK in the end but I wouldn't take for granted what happens.<p>When I zoom in and out on that page some of the images like the greek guy do OK consistently, but the dither takes on an unpleasant structure at certain sizes of the ocean image.
Lesson learned: test your optimizations.<p>I will admit I'm surprised by the results. I assume there's not really a rendering perf hit from WebP vs jpg?<p>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.<p>That being said, the original Low Tech Magazine article's perf claim is back up from the data, but they also use very low resolution images.<p>I'd be curious if dithering could be optimized to a particular algorithm. For example, jpeg's quantization is based on the assumption that images are mostly made of low frequency data and higher frequency can be removed without changing the quality of the over all image too much. With dithering, this is almost the exact opposite and all low frequency information is replaced with high frequency information, meaning it won't be nearly as effective.
There are at least two problems with this article in how its argument is constructed.<p>First, it’s a response to two other articles and does not refer to the images in those articles or the processing techniques used on them, instead grabbing four other images and transforming them, perhaps in the same way as the original article, perhaps not. From this it draws broad conclusions. As the joke goes, at least one side of the sheep appears black from here.<p>The second is that there is a source of truth for these claims, and it’s in the algorithms and file formats in question. A JPEG image is generated and compressed a certain way, a PNG is encoded in a certain way. There is an actual answer to the question of whether or not dithering saves space and under what circumstances, and it has to do with how the images are encoded and compressed. If one does not want to bother learning enough about the algorithms in question, at the least one could approximate that knowledge by processing a statistically significant number of images and evaluating the results to get some kind of actual data on when and where the technique generates larger or smaller file sizes.<p>Instead, we’ve now got three articles, two of which say “this works” and one of which says “no it doesn’t” with all the rigor of 18th century naturalists puzzling over the behavior of birds.
Wow, I don't remember reading such a bad article in a very long time. Very disingenuous take.<p>1) author starts with lossy format at the beginning of the comparison<p>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<p>3) not even a mention about image formats supporting limited color palettes<p>4) no mention of disadvantages of webp and avif (anyone still supports IE 11?)<p>5) more things like dithered "lossless" webp made from lossy jpg, from the same image you can see that author used much bigger color palette than the one used in Low-tech Magazine images<p>Funny thing is that aside of browser support modern formats would probably still win even without manipulating the numbers (they are made for this), but I guess the author wanted really convincing victory.
With that complex example, I can get a B&W 4-color dithered png down to 91K and an 8-color down to 131K. The Color Simple one goes down to 142K with a 16-color dithered palette.
I'm confused why you'd even compare the dithered JPGs, because that's self-contradictory, or why your dithered PNGs ended up so big. Did you forget to turn it into an indexed PNG?<p>If you're dithering, you want a lossless format that can used indexed colors. Webp also does better in this if you keep it in lossless mode. My last 16-color simple example goes down to 128K when converted to a lossless indexed webp.<p>I don't think this article does all the sufficient legwork to come to the conclusion it does. I agree that dithering isn't a be-all or end-all compression technique, but it's not as useless as the article makes it seem.
This seems to miss the point. Of course these dithered images don't result in a saving in filesize when offered up as jpegs.<p>This feels like a bit of a strawman argument.<p>Some people here weren't web developers in the 90s and it shows :)
As 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.<p>I don't even remember the last time I saw a dithered image anywhere on the internet.... it's been quite some time.
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.<p>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.<p>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.<p><a href="https://pngquant.org/" rel="nofollow">https://pngquant.org/</a>
Previous discussions on the original article that this article is responding to:<p><a href="https://news.ycombinator.com/item?id=28696014" rel="nofollow">https://news.ycombinator.com/item?id=28696014</a>
Curious about what the space usage would be if the dithered image was stored in a format actually suited to dithering, e.g. GIF, rather than the ones here which aren't.
Sometimes dithering is the right option depending on your use case. If it’s purely getting the smallest size, for example, go into Adobe Photoshop “save for web” and mess around with the various algorithms, formats, and dithering settings. Photoshop has a live preview with live updating file size. I’ve always found limited palette pngs and gifs with dithering tended to be the smallest. It also depends on the contents of your image and all of that. And there are many cases for complex images where a jpeg will be able to represent the image at a smaller size with greater clarity.
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.
I felt like the real point of Nathaniel's dithering article was pointed out early:<p>> reducing file sizes in a stylized way.<p>I don't think we ever stop and actually consider what creative avenues are open to us in that regard.<p>It's sort of like how there are technically better methods of printing than risograph, but sometimes that's what you really want and it's still fun to mess with.
Thank you, I was thinking of doing a write up on this topic as well after reading the article "How to build a low tech website" which recently floated on HN.<p>However I would have shown how you could significantly reduce file size simply using optimized JPEG settings, as JPEGs are most widely supported and can achieve good compression rates too.
If you're at the point of "should I use dithering" to optimize your website, congratulations: you're in the 99th percentile of optimized websites.<p>You're already a SSG PWA with modular js and a stylesheet devoid of unused selectors.<p>You've got almost all the unlocks. How much longer do you really want to be playing this game?
Based on the comments and not reading the article everyone seems to have missed the more important point.<p>Images on a webpage will be scaled to devicePixelRatio. Common devices have non integer devicePixelRatios so dithered images are going to fail
I was sure this was an article from 15 years ago until I saw WebP mentioned.<p>Why would anyone even consider color dithering these days when it comes to the Web? It feels counterproductive even intuitively.
Playing around with the Squoosh tool mentioned in the article, it's easy to get a <10KiB image that looks way better than the WebP shown at the bottom of the page.
It's 2021. Who is still using dithering? How did this article even make it to HN?<p>I recall dithering being heavily used in the days of very finite color palettes - BMP, GIF16 etc..
That 6 kB WebP looks <i>awful</i>. This seems a bit apples-to-oranges.<p>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.<p>In the comparison as given, I would <i>not</i> say that the WebP is a better image.
Curious if this is a commentary a propos a popular low-tech website we see around HN. I appreciate the dithering pattern, though I recognize it is not as efficient as, say, a compressed jpeg or a palette limited GIF.
I independently came to the same result back in August, though I provide the commands used and with feedback from someone over at lobste.rs found dithering <i>can</i> be effective, just isn't usually worth it<p><a href="https://opguides.info/posts/lowbandwidthimages/" rel="nofollow">https://opguides.info/posts/lowbandwidthimages/</a>
> Unless you’re going for an aesthetic look<p>I honestly doubt that a lot of people who go to lengths to unearth Atkinson dithering these days don't aim for that, though.<p>Most likely, you shouldn't use images in the first place.