13 ms·

Dithered images and websites (2020)

110 points by symisc_devel 5y ago

robbrown451 5y ago
The example images look awful. If the site really has images of "people in suits doing business," why would you want them to be so ugly? I'm not a fan of such images, but if you are going to have them, they should at least look pleasant. These look awful.
armada651 5y ago
As others have pointed out lossy compression will give a way better result. I feel like the author simply misses the aesthetic of the 90s internet and is trying to find any reason for it to make a return.
literallyaduck 5y ago
Maybe put dithering images outside the paywall and full pictures within and in your ad block placeholder a message that says pro users get the real images.
- mark-r 5y ago
  So paying users get a slower site? That seems counter-productive.
  - literallyaduck 5y ago
    You sell it as quality. Think of ordering the quick paperback printing with black and white photos vs getting the full quality hardbound with a glossy photo folio in the middle. Premiumification vs free to read. It is also egalitarian as users aren't paywalled, get access to the content and only pay if they want to use the extra bandwidth.
Sohcahtoa82 5y ago
"The average web page has nearly 1MB of images." And probably 3 MB of JavaScript...
petermcneeley 5y ago
Dithered images cause significant problems with many lower end LCD displays. When I scroll any image on my laptop or my phone they change brightness while in motion.
neivin 5y ago
LOL no. This is literally moving backwards.
WithinReason 5y ago
Dithering for compression is a bad idea, dithered images are much harder to compress than undithered ones.
jjcm 5y ago
This is terrible advice. Dithering should not be used for compression. Real world example: Here's his dog picture encoded to webp using default settings (11KB): https://image.non.io/dog.webp https://image.non.io/dog.webp This is smaller than all but his two color and his four color examples, at a tremendously higher fidelity. Just for comparison: webp vs original @ 11KB: 2.1% difference from source image. gameboy vs original @ 8KB: 18.2% difference from source image. 4 color vs original @ 9KB: 15.2% difference from source image. Even if you compress the webp down to 8KB, you only encounter a 3.3% difference from the original. TL;DR - use modern image formats. Don't use dithering for compression.
- shadowfaxRodeo 5y ago
  But have you tried dithering AND using modern image formats?
  - nikau 5y ago
    more importantly, have you tried dithering then jpeg then zipping the jpeg file to make it smaller?
mikl 5y ago
This reads more as an argument against dithering. Sure, it saves bandwidth, but all the images in the post look awful. If I saw pictures like these on a professional website, I’d assume the people behind it were incompetent. If you really want to save bandwidth, you’d be better off looking at better formats like AVIF, and WebP. Those will shave off a lot of extra bits, especially AVIF, although that is not universally supported yet. Combine that with making a the images a little smaller would save you a lot of bandwidth, without making your pictures look like they are 20 years old.
- theandrewbailey 5y ago
  > If you really want to save bandwidth, you’d be better off looking at better formats like HEIF and WebP. Use AVIF instead. An image in AVIF is half the size of an equivalent JPEG. Chrome already has it, and full Firefox support is imminent.
  - mikl 5y ago
    Good point, I’ll add that to my list.
  - duffyjp 5y ago
    Whenever I look into the modern formats excited to save 50% on bandwidth, I realize I'd have to spend 50% more on storage since I still need my fallback to JPEG. WebP is probably the best supported but isn't available on slightly older Macs or iOS devices. There are tons of iOS 12 iPads and pre-Big Sur macs in service.
    - setr 5y ago
      given the cost difference between storage and bandwidth, that's probably a worthwhile tradeoff. Especially given the common usecase of store once, send many times.
Brajeshwar 5y ago
Isn't this the technique used in Black-n-White Newspapers. I used to help compose Newspaper layouts in the early 90s, and dithering of images were done for similar reasoning -- printing flat colors are bad, so dither them.
- jameshart 5y ago
  There’s a difference between dithering and halftoning, although with some techniques the results can end up similar.
  - mark-r 5y ago
    In particular the ordered dither can look very similar to halftoning, because it results in varying size dots.
the_gipsy 5y ago
They look like shit
- vernie 5y ago
  Hey maybe you want to jump on the brutalist web design bandwagon and have your shit look like a zine.
kangalioo 5y ago
Seems more like an article on dithering generally rather than how to optimize your website If you just want small images, a lossily compressed image will probably look better than a lossless dithered image
- mnw21cam 5y ago
  Agreed. The dog picture actually looks acceptable in jpeg format at 19kB (original 123kB).
  - ThePadawan 5y ago
    Does it? I tried this in GIMP and I get pretty bad block artifacts, discoloration, and blurriness at compression factor 25 (which ends up at ~25kB). I would say at that point it's arguable which artifacts are preferable (compression or dithering), not compression being a clear winner.
    - Veen 5y ago
      It just looks a bit blocky/fuzzy when I try this. It doesn't look great, but it retains much more detail than the dithered version. It looks a bit better at the same size as a HEIC image.
    - tyingq 5y ago
      Here's one done with jpegoptim -m 40, which gets it down to 28k: Original 123k picture on top, 28k picture on bottom: https://imgur.com/a/hZy46K3 https://imgur.com/a/hZy46K3
      - ThePadawan 5y ago
        Yes, this looks pretty much like my version. Maybe I'm just nit-picky, but I do quite clearly see greenish squares, especially on the forehead and nose area. Probably not enough to catch my eye, but strong enough that looking at the picture for 5 seconds I would say "boy this was compressed way too much".
noja 5y ago
No.
icyfox 5y ago
Images serve to make a website beautiful. Dithered images are not - in my mind - beautiful. There are other ways to optimize a website speed and bandwidth. Let's serve devices the image resolution that they can handle and not an XL image just because we can. Let's minimize JS cruft, minimize excessive renders. Sacrificing image quality would be near the bottom of my list.
- mrweasel 5y ago
  Website exist to convey information, image are used to help convey information which is not easily explained otherwise. Using images to make pages beautiful is, to me, part of the problem with modern websites. I happen to like the dithered look, but arguably it might not be the best way to save on bandwidth.
- theandrewbailey 5y ago
  Anybody who used a cheap PC in the 90s knows how horrible everything looked. It was a low-res dithered hell. I don't understand why anyone thought that gradients on a 256 color screen ever looked good, and wonder why we didn't have the modern, flat, solid color designs that are fashionable today back then.
  - shakna 5y ago
    > wonder why we didn't have the modern, flat, solid color designs that are fashionable today back then. I really, really, dislike the modern flat colour designs of today. They make it much harder for me to separate out what I care about, like context and information, because my eyesight isn't perfect. Gradients made it so much easier for me to see the difference between a tab and the bar it's sitting in. A little strip of colour or some shadowing, to denote the active tab just disappears for me.
    - bitwize 5y ago
      I'd rather have flat colors for background elements and bevels for "active" UI elements like buttons and checkboxes. NEXTSTEP-derived UIs (like Windows 9x) were razor sharp and easy to read... and it's funny how futuristic cyberpunk UIs, like the non-VR interfaces featured in Johnny Mnemonic, were envisaged as being more of the same -- maybe a drop shadow or marble texture on the beveled button -- instead of the indistinct flat-shaded hellscape of today.
omalamo 5y ago
I like the dither aesthetic and underlying message, but it's possible to compress the first image of the dog (123 kB) to 64 kB with MozJPEG and still maintain the same quality. Modern compression algorithms with native lazy loading will probably offer the best of both worlds.
defanor 5y ago
Apparently the author's point is that image compression is useful, but dithering and then using lossless compression instead of using lossy ones sounds like rather poorly reinventing lossy compressions.
- dTal 5y ago
  *posterizing then dithering. Dithering by itself always improves visual quality.
jameshart 5y ago
I think there’s an interesting idea in here - not necessarily that ‘everyone should use dithering’, but more that if you are using an image and if that image is being used in a way that would not be harmed by stylizing the image in some way, that one of the things you can consider when thinking about how to stylize it might be the compressibility of the stylized image. If you are coming up with a look for a site, dithering all the hero images, or running them through a cell-animation filter, or mosaicing them, or halftoning them, all are stylistic choices that might help your design stand out, and help reduce file size. But… no, you probably shouldn’t just diffusion dither everything down to black and white.
w0mbat 5y ago
This makes no sense. For photographs, a decent quality JPEG is smaller and better looking than a dithered PNG or GIF.
- nikau 5y ago
  You can tell this article was written by someone young who thinks they have discovered sex drugs and rock and roll - dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes. Once computers got to the point where you could use any colour for any pixel it rightly died off, and its only use today is for things like e-ink displays or monochrome printing.
  - robinsoh 5y ago
    > You can tell this article was written by someone young who thinks they have discovered sex drugs and rock and roll I couldn't tell that. I still can't tell that. > dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes. What is more optimal solution than dithering in that context?
    - nikau 5y ago
      > What is more optimal solution than dithering in that context? Having hardware that lets you use whatever colour you want for any pixel.
      - robinsoh 5y ago
        I'm not trying to be pedantic but when you wrote: "dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes." perhaps what you actually meant is: "dithering IS an optimal solution to simulate more colours on old computers with limited colour palettes."
        w0mbat 5y ago
        No, he is using the past tense because personal computers with small color palettes are largely a thing of the past now.
Gormisdomai 5y ago
If we grant that the right kind of blog could make the aesthetics of this work I still think users with cheaper internet might like to be able to click to load the original full-res versions of the images.
discreditable 5y ago
With ImageMagick, you can use -colors to reduce the number of colors in the image. You don't even have to go down to 256 colors. This will usually make photos larger in size, but drawings/graphics can be smaller.
bigattichouse 5y ago
If you take the "4x4 ordered dithering" image, and copy it, use a "mean curvature blur" filter (I used gimp - similarly for gaussian with low enough width) and overlay it on the dither at 50% opacity, the image actually looks pretty good. This could probably be done in CSS/JS on a client machine. a 14k image comes across passably, even on my desktop.
ohazi 5y ago
Dithering was never a compression technique, it's a filtering technique for reducing banding on devices/displays/images that have a small color palette. In fact, even in the 80's, dithered images were often larger than their un-dithered counterpart, sometimes by a lot. But it was worth the trade-off when the alternative was an image with so much banding that it could be confused for a European flag. Unless you're trying to display your image on a retro console (or have aesthetic reasons for wanting to achieve that effect), you should not use dithering. Essentially all modern devices have a sufficiently enormous color palette, and modern compression algorithms use other techniques to achieve their efficiency. In fact, modern compression will do a much better job giving you a smaller file size if you don't use dithering. Edit: Don't get me wrong, dithering is a super interesting topic, and designing a good dither can be surprisingly hard, it's just not going to help you if your goal is to shrink the images on your website the way the article claims. If you haven't seen the trailer for "Return of the Obra Dinn" you owe it to yourself to take a look: https://youtu.be/ILolesm8kFY https://youtu.be/ILolesm8kFY Super cool aesthetic, and writing that shader must have been all sorts of difficult/fun. But you don't do this sort of thing for compression efficiency.
- CodeIsTheEnd 5y ago
  Directly related to dithering and compression, Return of the Obra Dinn is, to an certain extent, an "unstreamable game". When this streamer on Twitch tried to play it [1], the quality of his composited webcam would immediately drop as the compression algorithm focused on rendering the high-frequency dithering sections of the screen. As soon as he would aim the camera away from the fancy rendering (to the sky for instance, or the menu), the video quality would immediately improve. Really a fascinating clip. [1]: https://imgur.com/S191sI0 https://imgur.com/S191sI0 Here's a thread of someone complaining about it on Reddit: https://www.reddit.com/r/Twitch/comments/ls06j5/the_unstreamable_game_return_of_the_obra_dinn/ https://www.reddit.com/r/Twitch/comments/ls06j5/the_unstream...
  - ohazi 5y ago
    I hadn't thought of that, but this is hilarious, and illustrates my point perfectly. If your compression algorithm isn't aware of the exact dither you're using, the decompressor can't reproduce the dither on the other end using only rules and image data. The compressor needs to encode every single dither pixel as an expensive "Hey decompressor, you're never going to be able to guess this pixel value, so here's the whole thing" residual value. This is also why old image compression algorithms that were aware of simple dithers (i.e. a handful of fixed grid patterns) could produce small-ish images that looked slightly better than un-dithered, but still kind of bad. But then as soon as you customized the dither to use a more random looking pixel arrangement that looked significantly better, the filesize would explode -- because the compressor was blissfully unaware of the more complicated dither and had no choice but to encode all of the seemingly random pixels directly.
system2 5y ago
"The average web page has nearly 1MB of images." LOL What. Make it 10mb.
- eigengrau5150 5y ago
  And you could replace them all with dithered WEBP images of William Howard Taft. Nothing of value would be lost, content-wise. https://en.wikipedia.org/wiki/William_Howard_Taft#/media/File:William_Howard_Taft_-_Harris_and_Ewing.jpg https://en.wikipedia.org/wiki/William_Howard_Taft#/media/Fil...
- cube00 5y ago
  :s/images/javascript
Panino 5y ago
I like dithered images and appreciate the author's post. If you don't, but you want your webpages to load fast, look into WebP and AVIF images. Load them opportunistically using the html5 PICTURE tag - no JS required and no worry about old browsers not supporting new formats. Even plain lossless encoding of legacy formats goes a long way. Test your own site for ideas: https://webspeedtest.cloudinary.com https://webspeedtest.cloudinary.com
pablodavila 5y ago
In case anyone is curious about dithering in the context of audio, here[0] is an excellent video on that. [0] https://www.youtube.com/watch?v=2iDrbgfPjPY https://www.youtube.com/watch?v=2iDrbgfPjPY
kixiQu 5y ago
I'm a big fan of this piece! For those looking to play around further, there's https://ditherit.com/ https://ditherit.com/ and on the command line, good ol' imagemagick comes through with something like convert picture_with_cool_colors_you_like.png -colors 10 -unique-colors sourcecolormap.png convert source.jpg -resize 500x500\> -ordered-dither o4x4 -remap sourcecolormap.png output.png mutatis mutandis. :)
pseudosavant 5y ago
This is generally some pretty terrible advice. Really, don't follow it. At least not without testing its impact. Dithered 8-bit/256-color images will look 'better' than non-dithered 8-bit/265-color images, but it will almost always be worse that a 24-bit JPEG (no alpha) or 32-bit webP (includes alpha) and have a much larger file size. I did some quick tests with https://squoosh.app https://squoosh.app. The 8-bit dithered PNG is >4x the size of the JPEG. It also shows some terrible banding on any kind of gradient in the image. The PNG is 5x larger than a better looking webP version of the same image. I tested a lot of images (photos, drawings, digital artwork, etc) and some of the images were 10x larger as dithered PNGs vs webP/JPEG. Only one was smaller as a dithered PNG.
- eliseumds 5y ago
  Same here, tested dozens of images from our website (user avatars, product images and logos), and the vast majority ended up being larger and with much lower quality. We serve WebPs generated using the sharp library with quality=80.
- kixiQu 5y ago
  A. It looks like Safari didn't support webP at the time? https://caniuse.com/webp https://caniuse.com/webp Either way, they explicitly mention it anyway. B. If the comparisons keep the pixel size constant, they're not relying on the cool thing about dithering, which is that you can dither down to a small color count and quite small pixel size then display larger with image-rendering: crisp-edges; and it'll still look #aesthetic. From my experiments with the tool you linked, the scaled-up equivalently-sized webPs look potato. This is most relevant for big hero images.
- xemoka 5y ago
  It can even be tested with the author's own tool[1] and the sample image he provides. I'm surprised the author didn't experiment themselves? Or maybe the did, and the it's the further reduced settings they decided should be used... [1]: https://doodad.dev/dither-me-this https://doodad.dev/dither-me-this
- derefr 5y ago
  How about dithering as a compositor-level rendering technique for low-bpp displays, rather than as a compression-at-rest effect? I'm thinking specifically of non-HDR displays displaying HDR content (where HDR10 includes 10-bit-per-channel color.) Presumably the compsitor, if it knew you were watching an HDR video on a non-HDR display, would do better by dithering the HDR content down to 24-bit non-HDR content for display, rather than allowing it to be naively rendered with 24-bit banding?
deleted 5y ago
[deleted]
tyingq 5y ago
Not as drastic as the dithering in the linked post, but if you work with png files, pngquant is worth a look. It's lossy, but the image quality is still quite good. https://pngquant.org/ https://pngquant.org/ Also, better to compile from source. There are os packages, but they tend to be older versions of pngquant that have various issues.
edflsafoiewq 5y ago
The images in the article are not optimized, so the comparisons are not meaningful. For example, my-dog-dithered.png which uses only black and white is stored as 4x8 bpp instead of 1bpp. Running it through optipng halves the size.
- mark-r 5y ago
  That seems odd to me. Isn't PNG compression based on a LZW-type algorithm, making the bit count of the inputs irrelevant as long as you're only using two distinct values?
mark-r 5y ago
False dichotomy. Dithering is hardly the only or even best way to reduce image sizes. Just opening his 200x200 original in my favorite editor and resaving as JPEG with my usual parameter choices reduced it from 30K to 11K with no noticeable reduction in quality. I could have tuned the parameters for even more savings. Dithering isn't usually worth the reduction in quality. And ironically it can make things worse if you're not careful - dithering the image and saving it as JPEG actually INCREASED the size to 39K!
- shadowfaxRodeo 5y ago
  If you try to use lossy compression on a dithered image it will increase the file size. Using dithering and saving in a compressed lossless format will have drastically different results.
  - mark-r 5y ago
    Exactly, that was my point. That difference wasn't mentioned in the post, and you have to have some knowledge of how image formats work to realize why it's so.
munificent 5y ago
The reason so many blogs have "stock images of people in suits doing business" is because when the article is submitted to a social media app, the app scrapes the blog looking for an image to use as a thumbnail for the link. Pages with no image, get a default thumbnail and users don't click it. The entire reason so many pages on the web have some generic image from unsplash is because of these thumbnails. This means that the main meaningful way users will see the image is resized as a thumbnail, so before you start dithering, you should really test to see how the resized dithered image looks. Odds are good it will not look good.
tblt 5y ago
> The internet is responsible for 3.7% of global carbon emissions Given all the trade, commerce, learning, community, education, entertainment, and countless other benefits and multipliers the internet brings, I can't help but feel it's a fantastic return on its energy investment.
jebronie 5y ago
satire?
dirtyid 5y ago
>Climate Change. Big images waste electricity and emit carbon. The internet is responsible for 3.7% of global carbon emissions4. A number that keeps growing as we send more and more data. This is a fun stat, I wonder how much physical infrastructure is actually behind serving all the images vs videos / adtech.
skyde 5y ago
the example in the page is kind of stupid. he could have kept using Jpeg but with increased compression ratio to achieve same file size and the visual quality would still be better than dithered PNG.
MrYellowP 5y ago
I like the idea a lot, but the execution on his website is horrendous. This GDC presentation, featuring Mark Ferrari, shows how it's done: https://www.youtube.com/watch?v=ri4_3P2Oh14 https://www.youtube.com/watch?v=ri4_3P2Oh14
zokier 5y ago
Just threw together quick comparison between AVIF and the dithered image: https://ibb.co/hKnwF1Z https://ibb.co/hKnwF1Z (scaled up 4x) I think we can pretty conclusively say that dithered PNG does not make sense from bandwidth point of view.
- shadowfaxRodeo 5y ago
  But you can also use a dithered AVIF — and save even more.
  - zokier 5y ago
    As others have mentioned, dithering doesn't really play well with compression; it adds lots of fine detail noise, while lossy compression tends to smooth things out. Also modern compression like AVIF doesn't understand palette color formats (iirc avif generally uses yuv), so that kinda loses the only thing that dithering has.
    - shadowfaxRodeo 5y ago
      I've tried it out, I'm still getting smaller AVIF files with dithering. Not like the saving you get by using a dithered png instead of a jpeg. Depends on a lot of factors. You can keep turning the quality down on avif and get it lower than a dithered image. At some point I'd prefer the crispness of a dithered image over a blurry full color image. Also, avif seems to do a really good job of lossy compression on dithered images.
naikrovek 5y ago
the tool loses a lot of points because it doesn't appear to do the necessary gamma correction before dithering. the dithered images, at least the color ones, probably all, are lighter than the source images. this is an often-missed detail, unfortunately.
dmitrybrant 5y ago
By all means use dithered images on your website for stylistic reasons, but do not use them simply because dithering produces a slightly smaller PNG file. First of all, no discussion of minimizing PNG sizes is complete without `pngcrush` which applies all kinds of optimizations to the PNG file (losslessly). In fact pngcrush reduces the author's 48kb dithered file down to 28kb. And secondly, modern compression formats like webp and avif will blow PNG out of the water when compressing any kind of photographic image. Heck, just turn down your JPG quality, and your image will be much smaller, and still perfectly recognizable. Know when to use the right tool for the job: PNG -> diagrams, charts, anything with perfectly uniform areas of color and sharp transitions. JPG/AVIF -> photos, anything with smooth variations in color.
WoodenChair 5y ago
Related—I wrote a novelty dithering Mac app and released it this week. It dithers photos and converts them to MacPaint format for display on old black and white Macs. As another commenter pointed out, dithering was less about compression and more about just making things look okay on the limited displays of the time. The original Macintosh had only black and white pixels (no grayscale). Here's the app: https://oaksnow.com/retrodither/ https://oaksnow.com/retrodither/ And here's my blog post talking about how I wrote it: https://www.observationalhazard.com/2021/09/building-retro-dither-dithering.html https://www.observationalhazard.com/2021/09/building-retro-d...
dahart 5y ago
> Dithering is a retro way of reducing the colors in an image for use on old hardware or in print. Why dither in 2020? Dithering is still commonplace, but mostly invisible, for high-end color. Photoshop quietly dithers by default when converting from 16 bits per channel to 8 bits, for example. This is important when sending 8 bits/channel images out for large-format printing because the invisible differences on screen can become clearly visible on paper - the monitor’s gamut and the printer’s gamut are surprisingly dissimilar. Dither is needed to keep smooth gradients from banding badly, and it sucks when you’re spending $100 per print or more to have nasty bands or even compression artifacts appear.
dreamcompiler 5y ago
For those familiar with Sigma-Delta modulation, that's essentially what Floyd-Steinberg dithering is but in two dimensions: It preserves and diffuses sanpling error. (Sigma-Delta just does a better job than F-S of quantifying where the noise moves so you can filter it in the analog domain.) 1-bit DACs in CD players are the same idea: Trading higher sampling frequency for lower sample resolution to convey the same information. Bresenham's algorithm is yet another expression of the same idea but there the samples in question represent the slopes of straight lines represented by pixels.
supermatt 5y ago
Love the use of CSS filters to add some interest to the typography without adding (much) to the page size. Fantastic! Definitely stealing this :D

110 points by symisc_devel 5y ago

The example images look awful. If the site really has images of "people in suits doing business," why would you want them to be so ugly? I'm not a fan of such images, but if you are going to have them, they should at least look pleasant. These look awful.

armada651 5y ago

As others have pointed out lossy compression will give a way better result. I feel like the author simply misses the aesthetic of the 90s internet and is trying to find any reason for it to make a return.

literallyaduck 5y ago

Maybe put dithering images outside the paywall and full pictures within and in your ad block placeholder a message that says pro users get the real images.

mark-r 5y ago
So paying users get a slower site? That seems counter-productive.
- literallyaduck 5y ago
  You sell it as quality. Think of ordering the quick paperback printing with black and white photos vs getting the full quality hardbound with a glossy photo folio in the middle. Premiumification vs free to read. It is also egalitarian as users aren't paywalled, get access to the content and only pay if they want to use the extra bandwidth.

Sohcahtoa82 5y ago

"The average web page has nearly 1MB of images." And probably 3 MB of JavaScript...

petermcneeley 5y ago

Dithered images cause significant problems with many lower end LCD displays. When I scroll any image on my laptop or my phone they change brightness while in motion.

neivin 5y ago

LOL no. This is literally moving backwards.

WithinReason 5y ago

Dithering for compression is a bad idea, dithered images are much harder to compress than undithered ones.

jjcm 5y ago

This is terrible advice. Dithering should not be used for compression. Real world example: Here's his dog picture encoded to webp using default settings (11KB): https://image.non.io/dog.webp https://image.non.io/dog.webp This is smaller than all but his two color and his four color examples, at a tremendously higher fidelity. Just for comparison: webp vs original @ 11KB: 2.1% difference from source image. gameboy vs original @ 8KB: 18.2% difference from source image. 4 color vs original @ 9KB: 15.2% difference from source image. Even if you compress the webp down to 8KB, you only encounter a 3.3% difference from the original. TL;DR - use modern image formats. Don't use dithering for compression.

shadowfaxRodeo 5y ago
But have you tried dithering AND using modern image formats?
- nikau 5y ago
  more importantly, have you tried dithering then jpeg then zipping the jpeg file to make it smaller?

mikl 5y ago

This reads more as an argument against dithering. Sure, it saves bandwidth, but all the images in the post look awful. If I saw pictures like these on a professional website, I’d assume the people behind it were incompetent. If you really want to save bandwidth, you’d be better off looking at better formats like AVIF, and WebP. Those will shave off a lot of extra bits, especially AVIF, although that is not universally supported yet. Combine that with making a the images a little smaller would save you a lot of bandwidth, without making your pictures look like they are 20 years old.

theandrewbailey 5y ago
> If you really want to save bandwidth, you’d be better off looking at better formats like HEIF and WebP. Use AVIF instead. An image in AVIF is half the size of an equivalent JPEG. Chrome already has it, and full Firefox support is imminent.
- mikl 5y ago
  Good point, I’ll add that to my list.
- duffyjp 5y ago
  Whenever I look into the modern formats excited to save 50% on bandwidth, I realize I'd have to spend 50% more on storage since I still need my fallback to JPEG. WebP is probably the best supported but isn't available on slightly older Macs or iOS devices. There are tons of iOS 12 iPads and pre-Big Sur macs in service.
  - setr 5y ago
    given the cost difference between storage and bandwidth, that's probably a worthwhile tradeoff. Especially given the common usecase of store once, send many times.

Brajeshwar 5y ago

Isn't this the technique used in Black-n-White Newspapers. I used to help compose Newspaper layouts in the early 90s, and dithering of images were done for similar reasoning -- printing flat colors are bad, so dither them.

jameshart 5y ago
There’s a difference between dithering and halftoning, although with some techniques the results can end up similar.
- mark-r 5y ago
  In particular the ordered dither can look very similar to halftoning, because it results in varying size dots.

the_gipsy 5y ago

They look like shit

vernie 5y ago
Hey maybe you want to jump on the brutalist web design bandwagon and have your shit look like a zine.

kangalioo 5y ago

Seems more like an article on dithering generally rather than how to optimize your website If you just want small images, a lossily compressed image will probably look better than a lossless dithered image

mnw21cam 5y ago
Agreed. The dog picture actually looks acceptable in jpeg format at 19kB (original 123kB).
- ThePadawan 5y ago
  Does it? I tried this in GIMP and I get pretty bad block artifacts, discoloration, and blurriness at compression factor 25 (which ends up at ~25kB). I would say at that point it's arguable which artifacts are preferable (compression or dithering), not compression being a clear winner.
  - Veen 5y ago
    It just looks a bit blocky/fuzzy when I try this. It doesn't look great, but it retains much more detail than the dithered version. It looks a bit better at the same size as a HEIC image.
  - tyingq 5y ago
    Here's one done with jpegoptim -m 40, which gets it down to 28k: Original 123k picture on top, 28k picture on bottom: https://imgur.com/a/hZy46K3 https://imgur.com/a/hZy46K3
    - ThePadawan 5y ago
      Yes, this looks pretty much like my version. Maybe I'm just nit-picky, but I do quite clearly see greenish squares, especially on the forehead and nose area. Probably not enough to catch my eye, but strong enough that looking at the picture for 5 seconds I would say "boy this was compressed way too much".

noja 5y ago

No.

icyfox 5y ago

Images serve to make a website beautiful. Dithered images are not - in my mind - beautiful. There are other ways to optimize a website speed and bandwidth. Let's serve devices the image resolution that they can handle and not an XL image just because we can. Let's minimize JS cruft, minimize excessive renders. Sacrificing image quality would be near the bottom of my list.

mrweasel 5y ago
Website exist to convey information, image are used to help convey information which is not easily explained otherwise. Using images to make pages beautiful is, to me, part of the problem with modern websites. I happen to like the dithered look, but arguably it might not be the best way to save on bandwidth.
theandrewbailey 5y ago
Anybody who used a cheap PC in the 90s knows how horrible everything looked. It was a low-res dithered hell. I don't understand why anyone thought that gradients on a 256 color screen ever looked good, and wonder why we didn't have the modern, flat, solid color designs that are fashionable today back then.
- shakna 5y ago
  > wonder why we didn't have the modern, flat, solid color designs that are fashionable today back then. I really, really, dislike the modern flat colour designs of today. They make it much harder for me to separate out what I care about, like context and information, because my eyesight isn't perfect. Gradients made it so much easier for me to see the difference between a tab and the bar it's sitting in. A little strip of colour or some shadowing, to denote the active tab just disappears for me.
  - bitwize 5y ago
    I'd rather have flat colors for background elements and bevels for "active" UI elements like buttons and checkboxes. NEXTSTEP-derived UIs (like Windows 9x) were razor sharp and easy to read... and it's funny how futuristic cyberpunk UIs, like the non-VR interfaces featured in Johnny Mnemonic, were envisaged as being more of the same -- maybe a drop shadow or marble texture on the beveled button -- instead of the indistinct flat-shaded hellscape of today.

omalamo 5y ago

I like the dither aesthetic and underlying message, but it's possible to compress the first image of the dog (123 kB) to 64 kB with MozJPEG and still maintain the same quality. Modern compression algorithms with native lazy loading will probably offer the best of both worlds.

defanor 5y ago

Apparently the author's point is that image compression is useful, but dithering and then using lossless compression instead of using lossy ones sounds like rather poorly reinventing lossy compressions.

dTal 5y ago
*posterizing then dithering. Dithering by itself always improves visual quality.

jameshart 5y ago

I think there’s an interesting idea in here - not necessarily that ‘everyone should use dithering’, but more that if you are using an image and if that image is being used in a way that would not be harmed by stylizing the image in some way, that one of the things you can consider when thinking about how to stylize it might be the compressibility of the stylized image. If you are coming up with a look for a site, dithering all the hero images, or running them through a cell-animation filter, or mosaicing them, or halftoning them, all are stylistic choices that might help your design stand out, and help reduce file size. But… no, you probably shouldn’t just diffusion dither everything down to black and white.

w0mbat 5y ago

This makes no sense. For photographs, a decent quality JPEG is smaller and better looking than a dithered PNG or GIF.

nikau 5y ago
You can tell this article was written by someone young who thinks they have discovered sex drugs and rock and roll - dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes. Once computers got to the point where you could use any colour for any pixel it rightly died off, and its only use today is for things like e-ink displays or monochrome printing.
- robinsoh 5y ago
  > You can tell this article was written by someone young who thinks they have discovered sex drugs and rock and roll I couldn't tell that. I still can't tell that. > dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes. What is more optimal solution than dithering in that context?
  - nikau 5y ago
    > What is more optimal solution than dithering in that context? Having hardware that lets you use whatever colour you want for any pixel.
    - robinsoh 5y ago
      I'm not trying to be pedantic but when you wrote: "dithering was a sub optimal solution to simulate more colours on old computers with limited colour palettes." perhaps what you actually meant is: "dithering IS an optimal solution to simulate more colours on old computers with limited colour palettes."
      - w0mbat 5y ago
        No, he is using the past tense because personal computers with small color palettes are largely a thing of the past now.

Gormisdomai 5y ago

If we grant that the right kind of blog could make the aesthetics of this work I still think users with cheaper internet might like to be able to click to load the original full-res versions of the images.

discreditable 5y ago

With ImageMagick, you can use -colors to reduce the number of colors in the image. You don't even have to go down to 256 colors. This will usually make photos larger in size, but drawings/graphics can be smaller.

bigattichouse 5y ago

If you take the "4x4 ordered dithering" image, and copy it, use a "mean curvature blur" filter (I used gimp - similarly for gaussian with low enough width) and overlay it on the dither at 50% opacity, the image actually looks pretty good. This could probably be done in CSS/JS on a client machine. a 14k image comes across passably, even on my desktop.

ohazi 5y ago

Dithering was never a compression technique, it's a filtering technique for reducing banding on devices/displays/images that have a small color palette. In fact, even in the 80's, dithered images were often larger than their un-dithered counterpart, sometimes by a lot. But it was worth the trade-off when the alternative was an image with so much banding that it could be confused for a European flag. Unless you're trying to display your image on a retro console (or have aesthetic reasons for wanting to achieve that effect), you should not use dithering. Essentially all modern devices have a sufficiently enormous color palette, and modern compression algorithms use other techniques to achieve their efficiency. In fact, modern compression will do a much better job giving you a smaller file size if you don't use dithering. Edit: Don't get me wrong, dithering is a super interesting topic, and designing a good dither can be surprisingly hard, it's just not going to help you if your goal is to shrink the images on your website the way the article claims. If you haven't seen the trailer for "Return of the Obra Dinn" you owe it to yourself to take a look: https://youtu.be/ILolesm8kFY https://youtu.be/ILolesm8kFY Super cool aesthetic, and writing that shader must have been all sorts of difficult/fun. But you don't do this sort of thing for compression efficiency.

CodeIsTheEnd 5y ago
Directly related to dithering and compression, Return of the Obra Dinn is, to an certain extent, an "unstreamable game". When this streamer on Twitch tried to play it [1], the quality of his composited webcam would immediately drop as the compression algorithm focused on rendering the high-frequency dithering sections of the screen. As soon as he would aim the camera away from the fancy rendering (to the sky for instance, or the menu), the video quality would immediately improve. Really a fascinating clip. [1]: https://imgur.com/S191sI0 https://imgur.com/S191sI0 Here's a thread of someone complaining about it on Reddit: https://www.reddit.com/r/Twitch/comments/ls06j5/the_unstreamable_game_return_of_the_obra_dinn/ https://www.reddit.com/r/Twitch/comments/ls06j5/the_unstream...
- ohazi 5y ago
  I hadn't thought of that, but this is hilarious, and illustrates my point perfectly. If your compression algorithm isn't aware of the exact dither you're using, the decompressor can't reproduce the dither on the other end using only rules and image data. The compressor needs to encode every single dither pixel as an expensive "Hey decompressor, you're never going to be able to guess this pixel value, so here's the whole thing" residual value. This is also why old image compression algorithms that were aware of simple dithers (i.e. a handful of fixed grid patterns) could produce small-ish images that looked slightly better than un-dithered, but still kind of bad. But then as soon as you customized the dither to use a more random looking pixel arrangement that looked significantly better, the filesize would explode -- because the compressor was blissfully unaware of the more complicated dither and had no choice but to encode all of the seemingly random pixels directly.

system2 5y ago

"The average web page has nearly 1MB of images." LOL What. Make it 10mb.

eigengrau5150 5y ago
And you could replace them all with dithered WEBP images of William Howard Taft. Nothing of value would be lost, content-wise. https://en.wikipedia.org/wiki/William_Howard_Taft#/media/File:William_Howard_Taft_-_Harris_and_Ewing.jpg https://en.wikipedia.org/wiki/William_Howard_Taft#/media/Fil...
cube00 5y ago
:s/images/javascript

Panino 5y ago

I like dithered images and appreciate the author's post. If you don't, but you want your webpages to load fast, look into WebP and AVIF images. Load them opportunistically using the html5 PICTURE tag - no JS required and no worry about old browsers not supporting new formats. Even plain lossless encoding of legacy formats goes a long way. Test your own site for ideas: https://webspeedtest.cloudinary.com https://webspeedtest.cloudinary.com

pablodavila 5y ago

In case anyone is curious about dithering in the context of audio, here[0] is an excellent video on that. [0] https://www.youtube.com/watch?v=2iDrbgfPjPY https://www.youtube.com/watch?v=2iDrbgfPjPY

kixiQu 5y ago

I'm a big fan of this piece! For those looking to play around further, there's https://ditherit.com/ https://ditherit.com/ and on the command line, good ol' imagemagick comes through with something like convert picture_with_cool_colors_you_like.png -colors 10 -unique-colors sourcecolormap.png convert source.jpg -resize 500x500\> -ordered-dither o4x4 -remap sourcecolormap.png output.png mutatis mutandis. :)

pseudosavant 5y ago

This is generally some pretty terrible advice. Really, don't follow it. At least not without testing its impact. Dithered 8-bit/256-color images will look 'better' than non-dithered 8-bit/265-color images, but it will almost always be worse that a 24-bit JPEG (no alpha) or 32-bit webP (includes alpha) and have a much larger file size. I did some quick tests with https://squoosh.app https://squoosh.app. The 8-bit dithered PNG is >4x the size of the JPEG. It also shows some terrible banding on any kind of gradient in the image. The PNG is 5x larger than a better looking webP version of the same image. I tested a lot of images (photos, drawings, digital artwork, etc) and some of the images were 10x larger as dithered PNGs vs webP/JPEG. Only one was smaller as a dithered PNG.

eliseumds 5y ago
Same here, tested dozens of images from our website (user avatars, product images and logos), and the vast majority ended up being larger and with much lower quality. We serve WebPs generated using the sharp library with quality=80.
kixiQu 5y ago
A. It looks like Safari didn't support webP at the time? https://caniuse.com/webp https://caniuse.com/webp Either way, they explicitly mention it anyway. B. If the comparisons keep the pixel size constant, they're not relying on the cool thing about dithering, which is that you can dither down to a small color count and quite small pixel size then display larger with image-rendering: crisp-edges; and it'll still look #aesthetic. From my experiments with the tool you linked, the scaled-up equivalently-sized webPs look potato. This is most relevant for big hero images.
xemoka 5y ago
It can even be tested with the author's own tool[1] and the sample image he provides. I'm surprised the author didn't experiment themselves? Or maybe the did, and the it's the further reduced settings they decided should be used... [1]: https://doodad.dev/dither-me-this https://doodad.dev/dither-me-this
derefr 5y ago
How about dithering as a compositor-level rendering technique for low-bpp displays, rather than as a compression-at-rest effect? I'm thinking specifically of non-HDR displays displaying HDR content (where HDR10 includes 10-bit-per-channel color.) Presumably the compsitor, if it knew you were watching an HDR video on a non-HDR display, would do better by dithering the HDR content down to 24-bit non-HDR content for display, rather than allowing it to be naively rendered with 24-bit banding?

deleted 5y ago

[deleted]

tyingq 5y ago

Not as drastic as the dithering in the linked post, but if you work with png files, pngquant is worth a look. It's lossy, but the image quality is still quite good. https://pngquant.org/ https://pngquant.org/ Also, better to compile from source. There are os packages, but they tend to be older versions of pngquant that have various issues.

edflsafoiewq 5y ago

The images in the article are not optimized, so the comparisons are not meaningful. For example, my-dog-dithered.png which uses only black and white is stored as 4x8 bpp instead of 1bpp. Running it through optipng halves the size.

mark-r 5y ago
That seems odd to me. Isn't PNG compression based on a LZW-type algorithm, making the bit count of the inputs irrelevant as long as you're only using two distinct values?

mark-r 5y ago

False dichotomy. Dithering is hardly the only or even best way to reduce image sizes. Just opening his 200x200 original in my favorite editor and resaving as JPEG with my usual parameter choices reduced it from 30K to 11K with no noticeable reduction in quality. I could have tuned the parameters for even more savings. Dithering isn't usually worth the reduction in quality. And ironically it can make things worse if you're not careful - dithering the image and saving it as JPEG actually INCREASED the size to 39K!

shadowfaxRodeo 5y ago
If you try to use lossy compression on a dithered image it will increase the file size. Using dithering and saving in a compressed lossless format will have drastically different results.
- mark-r 5y ago
  Exactly, that was my point. That difference wasn't mentioned in the post, and you have to have some knowledge of how image formats work to realize why it's so.

munificent 5y ago

The reason so many blogs have "stock images of people in suits doing business" is because when the article is submitted to a social media app, the app scrapes the blog looking for an image to use as a thumbnail for the link. Pages with no image, get a default thumbnail and users don't click it. The entire reason so many pages on the web have some generic image from unsplash is because of these thumbnails. This means that the main meaningful way users will see the image is resized as a thumbnail, so before you start dithering, you should really test to see how the resized dithered image looks. Odds are good it will not look good.

tblt 5y ago

> The internet is responsible for 3.7% of global carbon emissions Given all the trade, commerce, learning, community, education, entertainment, and countless other benefits and multipliers the internet brings, I can't help but feel it's a fantastic return on its energy investment.

jebronie 5y ago

satire?

dirtyid 5y ago

>Climate Change. Big images waste electricity and emit carbon. The internet is responsible for 3.7% of global carbon emissions4. A number that keeps growing as we send more and more data. This is a fun stat, I wonder how much physical infrastructure is actually behind serving all the images vs videos / adtech.

skyde 5y ago

the example in the page is kind of stupid. he could have kept using Jpeg but with increased compression ratio to achieve same file size and the visual quality would still be better than dithered PNG.

MrYellowP 5y ago

I like the idea a lot, but the execution on his website is horrendous. This GDC presentation, featuring Mark Ferrari, shows how it's done: https://www.youtube.com/watch?v=ri4_3P2Oh14 https://www.youtube.com/watch?v=ri4_3P2Oh14

zokier 5y ago

Just threw together quick comparison between AVIF and the dithered image: https://ibb.co/hKnwF1Z https://ibb.co/hKnwF1Z (scaled up 4x) I think we can pretty conclusively say that dithered PNG does not make sense from bandwidth point of view.

shadowfaxRodeo 5y ago
But you can also use a dithered AVIF — and save even more.
- zokier 5y ago
  As others have mentioned, dithering doesn't really play well with compression; it adds lots of fine detail noise, while lossy compression tends to smooth things out. Also modern compression like AVIF doesn't understand palette color formats (iirc avif generally uses yuv), so that kinda loses the only thing that dithering has.
  - shadowfaxRodeo 5y ago
    I've tried it out, I'm still getting smaller AVIF files with dithering. Not like the saving you get by using a dithered png instead of a jpeg. Depends on a lot of factors. You can keep turning the quality down on avif and get it lower than a dithered image. At some point I'd prefer the crispness of a dithered image over a blurry full color image. Also, avif seems to do a really good job of lossy compression on dithered images.

naikrovek 5y ago

the tool loses a lot of points because it doesn't appear to do the necessary gamma correction before dithering. the dithered images, at least the color ones, probably all, are lighter than the source images. this is an often-missed detail, unfortunately.

dmitrybrant 5y ago

By all means use dithered images on your website for stylistic reasons, but do not use them simply because dithering produces a slightly smaller PNG file. First of all, no discussion of minimizing PNG sizes is complete without `pngcrush` which applies all kinds of optimizations to the PNG file (losslessly). In fact pngcrush reduces the author's 48kb dithered file down to 28kb. And secondly, modern compression formats like webp and avif will blow PNG out of the water when compressing any kind of photographic image. Heck, just turn down your JPG quality, and your image will be much smaller, and still perfectly recognizable. Know when to use the right tool for the job: PNG -> diagrams, charts, anything with perfectly uniform areas of color and sharp transitions. JPG/AVIF -> photos, anything with smooth variations in color.

WoodenChair 5y ago

Related—I wrote a novelty dithering Mac app and released it this week. It dithers photos and converts them to MacPaint format for display on old black and white Macs. As another commenter pointed out, dithering was less about compression and more about just making things look okay on the limited displays of the time. The original Macintosh had only black and white pixels (no grayscale). Here's the app: https://oaksnow.com/retrodither/ https://oaksnow.com/retrodither/ And here's my blog post talking about how I wrote it: https://www.observationalhazard.com/2021/09/building-retro-dither-dithering.html https://www.observationalhazard.com/2021/09/building-retro-d...

dahart 5y ago

> Dithering is a retro way of reducing the colors in an image for use on old hardware or in print. Why dither in 2020? Dithering is still commonplace, but mostly invisible, for high-end color. Photoshop quietly dithers by default when converting from 16 bits per channel to 8 bits, for example. This is important when sending 8 bits/channel images out for large-format printing because the invisible differences on screen can become clearly visible on paper - the monitor’s gamut and the printer’s gamut are surprisingly dissimilar. Dither is needed to keep smooth gradients from banding badly, and it sucks when you’re spending $100 per print or more to have nasty bands or even compression artifacts appear.

dreamcompiler 5y ago

For those familiar with Sigma-Delta modulation, that's essentially what Floyd-Steinberg dithering is but in two dimensions: It preserves and diffuses sanpling error. (Sigma-Delta just does a better job than F-S of quantifying where the noise moves so you can filter it in the analog domain.) 1-bit DACs in CD players are the same idea: Trading higher sampling frequency for lower sample resolution to convey the same information. Bresenham's algorithm is yet another expression of the same idea but there the samples in question represent the slopes of straight lines represented by pixels.

supermatt 5y ago

Love the use of CSS filters to add some interest to the typography without adding (much) to the page size. Fantastic! Definitely stealing this :D