How my images are dithered | dead.garden

Jo's Blog

tech<br>How my images are dithered

July 06, 2026 (20:57)<br>Jo ❤️<br>Read as plaintext

I don't know much about dithering. But when I visit other people's sites and they dither their images in cool ways I always wonder how they do it. So in case anyone is wondering, here's my current method for dithering these pink images.

Obligatory example image for when I undo this 2 months from now and no one knows wtf I am talking about:

Edit: Almost like I know myself to well — the pictures now look like this instead:

Which is covered in the post.

Dithering, beside making a picture look (to put it professionally) cool as fuck, also reduces file size and thus needed storage (if using only the reduced images) and the weight of your website for the client. That's why sites like Low Tech Magazine use it, for example.

The idea of pink images came from a post a while back, when I tried this before. The post Designing without color introduces the idea of the current design, where I try to get a sort of black and white "printed" vibe, using color only for emphasis. (This makes sense only when you are a light mode user like me).

The image back then, with the old method, looked like this:

The key difference here being that I limited the picture's palette to true monochrome: black and this pink. Also, the weird "dithered" dots are much bigger.

So what's this

My goal was to immitate a printed image. While individual pixels on a screen may have the luxury of setting variable values of red, green and blue — making the grid of repeating RGB lights on your screen light up with different intensity — things work a little differently on paper (and other print substrates).

Getting the limited palette of colors your printer is working with to give the illusion of more colors requires using a grid/matrix of dots. You can go about this in three different ways: AM, FM and hybrid grids. The amplitude here being the size of the dot and the frequency, well … the frequency. Making a dark spot with AM grids means big dots, in FM grids it's lotsa dots.

The top shows an FM print: the dots look chaotic.

The bottom shows AM : all dots show up in a predictable pattern and light spots have smaller dots

The problem with amplitude modulated dots is that if you approach this naively you will end up getting unwanted patterns in your images: a so-called Moiré.

For this reason, there is a rule (DIN 16547) about how exactly the colors are to be offset in an AM print to try and avoid them getting in each others way. Since FM grids are random they do not suffer from this problem.

Simulating AM pattern on your digital image

I access my server via the command line — so I use a command line tool to quickly edit images. The tool is called imagemagick and is called using the "convert" command.

I found the method to create this illusion online (can't find the link) and adapted it a little. So I can't claim to be the expert on what each individual argument does, but I will try to explain it.

convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \<br>-colorspace CMYK -separate null: \<br>\( -size 2x2 xc: \( +clone -negate \) \<br>+append \( +clone -negate \) -append \) \<br>-virtual-pixel tile -filter gaussian \<br>\( +clone -distort SRT 2,0 \) +swap \<br>\( +clone -distort SRT 2,15 \) +swap \<br>\( +clone -distort SRT 2,45 \) +swap \<br>\( +clone -distort SRT 2,75 \) +swap +delete \<br>-compose Overlay -layers composite -set colorspace CMYK -combine \<br>"newfile"

Here's what it does generally: resizes the image to 800px in width (who needs more?), sets the color to CMYK, applies a background to fill the empty space left by rotating (and sets a gaussian blur to filter noise), splits up into the colors, scales them up a bit (for bigger dots) and distorts them (in this case: rotates them) and at the end it combines the 4 images into one again.

The image we generate by running this on the original file looks like this:

Before combining them, these are the individual colors dot grids:

This sets C at 0°, M at 15° etc. But whatever. Zooming in and out doesn't make any weird artifacts apparent so it's good enough.

If we increase the size of the dots to a ridiculous degree (8x8), you can get a better look at what is happening.

Edit: The perfect route to CMYK

After sleeping on it and reading the post back, the solution for a pic limited to truly CMYK colors in an AM grid is apparent. For reasons I get into later this is NOT a good way of reducing file size (apart from the fact that limiting colors and resizing the image to 800 in width always reduces the size, everything else is pretty much stacked against that goal). It does, however, look cool.

With the above method, the dots do not vary in size. Why should they? As we already discussed, a digital image (unless I have a GIF or PNG-8 situation somewhere) can give varying intensity of light for R, G and B per pixel. So when we look at the big image above we can cleary...