HN.zip

How My Images Are Dithered

190 points by surprisetalk - 67 comments
trentor [3 hidden]5 mins ago
I was a rotogravure printer in another life, and this post made me a bit nostalgic. In intaglio printing you usually don't see these patterns because the electrostatic assist pulls the ink out of the cells, and the colors blend together more. It's more akin to a developed photo. I mainly remember them from having to do offset printing for the intermediate exam during my apprenticeship.

Our paper was about 3.5 meters wide, and a single roll length was 2–3 kilometers which ran for 20-30 minutes. The process delivered high quality at high speed, so we printed titles like Playboy and the IKEA catalogue in every language (for a language change we only had to swap the black cylinders, since the data was optimized so the text was mostly single color black). A print run of the IKEA catalogue, around 40 million copies, took about two months. It was brain numbing but also really zen. I miss it sometimes.

inigyou [3 hidden]5 mins ago
I can imagine that feeling of "being a cog in a beautiful machine" gets a lot less people these days because so many cogs are automated and so many machines are no longer beautiful.
rahimnathwani [3 hidden]5 mins ago
If you're doing halftoning with the intent to get custom DTF (direct to film) prints for t shirts, you might find this tool helpful:

https://tools.encona.com/dtf

It aims to 'knock out' some areas of the image: make them transparent in the digital image so those areas are not part of the final film. This means less of the surface of the t shirt has film on it, allowing it to be breathable and flexible.

I got some DTF prints made before I knew you were meant to do this. The tutorials online required a lot of steps so I made the above for next time. Not tested for real yet.

rgoodwintx [3 hidden]5 mins ago
Bravo! One of my canary projects for LLMs has been a spot color / dithering tool; very much an amateur screen printer, and it seemed a way to spark my own interest to do some multicolor prints. Suffice to say the models couldn’t handle it, but I haven’t checked in a generation or two, so this is great motivation to try again!
matsemann [3 hidden]5 mins ago
Almost two decades ago I used a software called Rasterbator to dither an image into dots, blowing it up to multiple A4 pages one could then decorate a whole wall with. Up close it would just be circles of various sizes, but from a distance the image would show up. Super cool. Used it to decorate a wall in my dorm with a picture of the family dog.

Edit: found it. One picture taken from up close. Other pictures the whole image when laid out over multiple pages in the software https://imgur.com/a/OeaIWuY

bthallplz [3 hidden]5 mins ago
Neat! I really liked the look of the Floyd-Steinberg algorithm in the article, so when I googled for a web tool that'll do it for me, I found the tool mentioned here: https://www.ascii-magic.com/styles/dither

It has some fun animation options and settings to play with, and there's other dithering algorithms to play with.

ReactiveJelly [3 hidden]5 mins ago
> Dithering can reduce file size

Yeah, if you're using lossless compression like PNG or GIF, adding a lossy step to reduce the number of colors in the palette can help.

If you're compressing photos, you should use JPEG or WebP.

Anecdotally, JPEG usually beats dithering, and WebP always does.

It's fine to dither images but please please admit that you're doing it for the aesthetic. WebP has very broad browser support and absolutely blows dithering out of the water for compression. You are not going to beat years of research and tuning with "use fewer colors".

I remember a YouTube video about "How we did the impossible and got full-motion video for this Sonic game on a system that couldn't do FMVs", and the answer was like, "Well, we used a low resolution, and then we reduced the color palette, and then we cut the frame rate, and then we did interlacing." None of that's impossible! That's like saying you built the Pyramid at Giza using only a bucket of Lego bricks! It's not the same pyramid! Anyone can use a lower resolution! It takes effort and teamwork to come up with a codec that actually compresses data without artifacts!

galleywest200 [3 hidden]5 mins ago
> It's fine to dither images but please please admit that you're doing it for the aesthetic

They did in the article.

> My goal was to immitate a printed image.

customguy [3 hidden]5 mins ago
> Yeah, if you're using lossless compression like PNG or GIF, adding a lossy step to reduce the number of colors in the palette can help.

Depending on the image context it can also backfire, though not so much for photos, but rather screenshots. E.g. sometimes a 2 color dithered image results in a much bigger PNG than, say 16 colors without dithering, because bigger areas of uniform color compress much more efficiently. So I usually just try "everything", to find some sweet spot between file size and quality.

Is there a tool that allows you to select which area of the image to use what dithering parameters and color count for, with a live preview? I know I'll vibecode one myself just to see what it looks like, but maybe this already exists in a "real" application? Then you could e.g. use dithering on the faces, but for the background just a few colors without dithering.

mort96 [3 hidden]5 mins ago
.. What do you mean by "beats" here? Is the article trying to hide the fact that they're doing dithering for, among other things, artistic reasons?

A dithered image almost certainly beats a non-dithered JPEG compressed image in terms of file size, because you can JPEG compress the dithered image. Thus, if you like the look of a dithered image, you get file size reduction as a bonus.

I swear, some people on HN intentionally misinterpret and misrepresent the text of an article just to argue against it in bad faith with these smarmy "um actually" type arguments. For some reason I do not understand, Hacker News tends to surface these comments near the top of its comment sections.

CharlesW [3 hidden]5 mins ago
> A dithered image almost certainly beats a non-dithered JPEG compressed image in terms of file size, because you can JPEG compress the dithered image. Thus, if you like the look of a dithered image, you get file size reduction as a bonus.

That's backwards. Dithering (and simulated halftoning, as in this case) adds detail/noise, making images harder to compress efficiently.

xnx [3 hidden]5 mins ago
Title here is missing "How" as in "How My Images Are Dithered"
iTokio [3 hidden]5 mins ago
That’s a hn filter to avoid clickbait titles I think
petercooper [3 hidden]5 mins ago
Which, more often than not, causes weird titles I’m more likely to click due to sounding curious and interesting, undoing the entire point of the feature.

I would not have clicked on “How My Images Are Dithered” but this truncated version made it sound more like an interesting bug story.

gausswho [3 hidden]5 mins ago
My Title Was Dithered
Applejinx [3 hidden]5 mins ago
I went back to Ohio…
jagged-chisel [3 hidden]5 mins ago
Lossy compression
Tempest1981 [3 hidden]5 mins ago
Reminded me of how Safari removes the first word from tab titles
zeraye [3 hidden]5 mins ago
A few years ago I made this fun little app https://dithering-sigma.vercel.app/. May be interesting for someone. Source code https://github.com/zeraye/dithering.
Retr0id [3 hidden]5 mins ago
I suppose it is a type of dithering, but really this is Halftoning
Isamu [3 hidden]5 mins ago
Yes, which of course is still cool. Probably the main point.
ectoloph [3 hidden]5 mins ago
Didder[0] is a good tool for dithering. I use it to pre-process images for the 6-color e-ink displays.

You can go down a rabbit hole of dithering algorithms too, like Floyd Steinberg[1]

[0] https://github.com/makew0rld/didder [1] https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dither...

bthallplz [3 hidden]5 mins ago
Have you posted anywhere online about your experiences with color e-ink displays? I think they're super neat, and I love the idea of using dithering for them. :D
timnetworks [3 hidden]5 mins ago
Is nobody going to mention anything about the fact that one of the friends at the restaurant has no _head_ ?
imhoguy [3 hidden]5 mins ago
Up! Very cool site, creative, slopless and with that 90/00s vibe I miss :)
AyanamiKaine [3 hidden]5 mins ago
Ohhhh that is so cool, but I agree with the others its more halftoning. When you want to dither/pixelate an image you can use Image-to-Pixel [0].

[0]https://tezumie.github.io/Image-to-Pixel/

meindnoch [3 hidden]5 mins ago
Every image should be dithered below 10 bits/component to prevent banding artifacts.
dahart [3 hidden]5 mins ago
Yeah this is important when you print images, since printers can reveal banding artifacts you can’t see on a monitor. I learned this the expensive way printing a batch of large format images that had gradients in them, without dithering. This is also how I learned one way that Photoshop was for professionals and GIMP & ImageMagick weren’t; At the time (and this was years ago, to be fair), Photoshop dithered by default when going from 16 to 8 bits, while those popular open source tools did not and also did not even have good ways to do it manually by adding the right amount of noise before changing the bit depth. I don’t know what the open source tools do today, maybe they’ve fixed it, I haven’t checked.
meindnoch [3 hidden]5 mins ago
"This is also how I learned one way that Photoshop was for professionals and GIMP & ImageMagick weren’t; At the time (and this was years ago, to be fair), Photoshop dithered by default when going from 16 to 8 bits, while those popular open source tools did not and also did not even have good ways to do it manually by adding the right amount of noise before changing the bit depth."

Yes. Photoshop does the correct thing when going 8bit via the "Mode" menu. On the other hand, if you do "Export As → PNG" and check the "Smaller file (8-bit)" checkbox, it does NOT dither, and it produces banding artifacts.

meindnoch [3 hidden]5 mins ago
Yeah. But even if you stay in the digital realm, dithering is necessary at 8bits per component. Consider that a grayscale gradient can only have 256 distinct levels.
dahart [3 hidden]5 mins ago
True! You’re less likely to be surprised by banding on a display, because you can see it before it’s a problem, and it’s less likely to cost money, but for sure the need for dithering is still there, especially for displays that can do more than 8 bits per channel or can do high dynamic range.

> Consider that a grayscale gradient can only have 256 distinct levels.

This is true, but also keep in mind that for print and low dynamic range displays we humans only need approximately 256 levels, as long as the levels are perceptually spaced out evenly. 8 gamma corrected bits per channel actually made sense for a long time, for both print and for TVs & monitors, until HDR displays came along, relatively recently. Needing dithering for 8 bit images displayed on a 10 bit display is perhaps less surprising than needing dithering even when your display and your printer are both only 8 bits, right?

adgjlsfhk1 [3 hidden]5 mins ago
I think HDR wasn't what changed. It's resolution. At 720P and below, you don't notice dither because pixelation is the more obvious problem. Once you're at 1080p (and it's more obvious at 1440p/4k), you start having enough detail to see the banding patterns.
dahart [3 hidden]5 mins ago
I don’t think I agree with that at all. Color banding is a problem with NTSC - 540 interlaced, and lower resolutions too. If you have a smooth gradient that shows color banding, spatial resolution is completely irrelevant. Pixelation is a separate, orthogonal issue. It would be trivial to show color banding, and the need for dither, on a 16 x 16 pixel image.

HDR is what changed - it requires more than 8 bits per pixel, by definition!

Again, if you only have LDR (low dynamic range), the human visual system’s “just noticeable difference” or JND in the perception literature demonstrates we only need 8 bits when looking at things under ‘indoor’ lighting conditions. You don’t need dithering if you use LDR on a single specific 8-bit display. You do need dithering when either moving to a different display than the one you started with, or using an HDR display - capable of displaying more than 8 bits of color resolution.

adgjlsfhk1 [3 hidden]5 mins ago
The counterpoint is that you should just keep your images at 10 bit minimum or 12+ bit until the OS/monitor can dither for you. Lossy compression will do much better with a 10/12 bit image than a dithered 8 bit one.
meindnoch [3 hidden]5 mins ago
Absolutely! Higher precision is always better. But if you must go as low as 8bits, you should dither.
jeremyscanvic [3 hidden]5 mins ago
I'm only vaguely familiar with dithering/half-toning. What does "component" refer to here?
meindnoch [3 hidden]5 mins ago
8 bit per component = 0-255 red, 0-255 green, 0-255 blue

Like ~99% of images you encounter on the Web.

adgjlsfhk1 [3 hidden]5 mins ago
red/green/blue
willmeyers [3 hidden]5 mins ago
Cool effect! It feels a bit like a deep-fried meme to me, but that might just be me!

I tried doing something similar a couple of years ago and gave up after running into the exact same issues in the post. It's really difficult to replicate proper halftoning on a computer screen without getting moiré patterns and weird artifacts because of PPI, aliasing, and other stuff. Beyond that, print and screens are just fundamentally different ways of rendering things.

ValdikSS [3 hidden]5 mins ago
??? This is halftoning, not dithering
dahart [3 hidden]5 mins ago
I’d say halftoning is a specific type of dithering. Wikipedia mentions that for print, some people consider the terms synonymous.

https://en.wikipedia.org/wiki/Dither#Applications

andai [3 hidden]5 mins ago
See also,

Surface-stable fractal dithering:

https://www.youtube.com/watch?v=EzjWBmhO_1E

And the technical deep dive:

https://www.youtube.com/watch?v=HPqGaIMVuLs

ValdikSS [3 hidden]5 mins ago
Thanks, that looks cool. This is dithering in principle, but using dynamic spot functions.

To learn more about halftones, I'd recommend PDF specification, pages 303-307.

https://opensource.adobe.com/dc-acrobat-sdk-docs/standards/p...

ValdikSS [3 hidden]5 mins ago
>Is this even dithering?

>But if you care about the method this is not dithering.

> I looked it up, the translation in this case is, in fact, simply "half tones" :^)

olivierestsage [3 hidden]5 mins ago
AndrewStephens [3 hidden]5 mins ago
Very nice results, I really like the way it looks like a printed page. Image processing is addictive - once you start playing around it is hard to stop.
Dwedit [3 hidden]5 mins ago
Speaking of which, are there any good ways to undither images? Things like GIMP FFT are not perfectly reversible.
jeremyscanvic [3 hidden]5 mins ago
It's a somewhat active inverse problems research subfield https://github.com/MenghanXia/ReversibleHalftoning
Dwedit [3 hidden]5 mins ago
That one does not seem to be an undither project, it appears to be a special way to encode chroma information within a monochrome dithered image. NTSC television also encodes chroma within a grayscale signal, but that's different than black and white only.
dahart [3 hidden]5 mins ago
Dither loses information, so perfectly reversible might be an unreasonable goal. But I bet you could train or fine-tune a denoiser to do a really good job. This might make a cool paper, if there’s anything at all non-standard or surprising you discover along the way.
Dwedit [3 hidden]5 mins ago
When I mentioned "perfectly reversible", I meant the FFT itself. You run the FFT. You run the inverse FFT. Because the FFT was quantized to 0-255, you end up with a lot of stuff that doesn't belong in the image.
dahart [3 hidden]5 mins ago
Gotcha, that’s true. There’s gradations of non-reversible. FFT in practice is still not perfectly reversible, even if you use floats and don’t quantize to 8-bit. Anyway, yeah, dither will be even more non-reversible, but given how good today’s denoisers are, I bet de-dither could be pretty good if it was attacked with the same level of rigor as denoise has been.
trollbridge [3 hidden]5 mins ago
No, although AI gets really close. Dithering represents adding noise to an image and also represents doing a lossy type of compression.
qingcharles [3 hidden]5 mins ago
Do you want to undither, or un-half-tone, like the images in TFA?

Unhalftoning is called descreening.

I use this:

https://descreen.net/

jcynix [3 hidden]5 mins ago
Hmm, that gives me an idea: dithering (of generally "mogrifying") my images might make them less palatable for those pesky AIs roaming my web server …
tiffanyh [3 hidden]5 mins ago
If you like this, you might also like:

https://news.ycombinator.com/item?id=48009879

rrr_oh_man [3 hidden]5 mins ago
Yokohiii [3 hidden]5 mins ago
It's an aesthetic choice. What counters taste?
dahart [3 hidden]5 mins ago
That only says to not expect compression from dither, it’s not a counterpoint to using dither for any other reason.
gausswho [3 hidden]5 mins ago
I vaguely recall stumbling across a site years ago that could do something like this in the browser, with various bits 'n bobs you could poke at. Can't find it now.
effnorwood [3 hidden]5 mins ago
slowly. then all at once.
hnl68yz0go [3 hidden]5 mins ago
This framing is spot on
next_xibalba [3 hidden]5 mins ago
It tickles me greatly how much HN’ers are fascinated by dithering. It seems like a few times per year a post about dithering makes the front page.
ipunchghosts [3 hidden]5 mins ago
Why is this not a typical data augmentation method for training deep networks? It would allow the networks to learn invariants that's align with humans. Currently, I suppose none of these dithered images would be correctly classified.
dahart [3 hidden]5 mins ago
Perhaps because inference on dithered images is pretty rare, not a common or popular thing to do? Otherwise, people would train on dithered images. NNs are trained on noisy images. Training with dither would not learn any other invariants besides how to see through dither, it doesn’t automatically generalize to anything else.
dist-epoch [3 hidden]5 mins ago
When someone says AI can't do something, I like to try it:

> This image features a close-up abstract scene styled with a classic halftone (Ben-Day dot) pop-art filter ...

https://share.gemini.google/O5eqZOKxwzw3

> This image is a halftone/thermal print styled photograph. The photo features a group of four people posing closely together indoors or in front of a windowed backdrop:

https://share.gemini.google/KJOxBDXYsFT4

trollbridge [3 hidden]5 mins ago
I’m sorry, but I can’t understand what you’re saying at all. Explain?