How my images are dithered

我的图片是如何进行抖动处理的

July 06, 2026 (20:57) Jo ❤️ Read as plaintext 2026年7月6日 (20:57) Jo ❤️ 阅读纯文本

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. 我对抖动（dithering）了解不多。但每当我访问别人的网站，看到他们以很酷的方式对图片进行抖动处理时，我总是很好奇他们是怎么做到的。所以，如果有人也感到好奇，这就是我目前处理这些粉色图片的方法。

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. 抖动处理除了能让图片看起来（用专业术语来说）酷毙了之外，还能减小文件大小，从而节省存储空间（如果只使用缩减后的图片），并减轻客户端加载网站的负担。这就是为什么像《Low Tech Magazine》这样的网站会使用它的原因。

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: 粉色图片的灵感来自于前阵子的一篇文章，当时我尝试过这种做法。《Designing without color》这篇文章介绍了当前设计的理念，我试图营造一种黑白“印刷”的氛围，仅使用颜色来作为强调。（这只有在你像我一样使用浅色模式时才有意义）。当时使用旧方法处理的图片看起来是这样的：

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). 我的目标是模仿印刷图像。虽然屏幕上的单个像素可以自由设置红、绿、蓝的变量值，使屏幕上重复的 RGB 灯光网格以不同的强度发光，但在纸张（和其他印刷基材）上，情况则有所不同。

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. 要让打印机有限的调色板产生更多颜色的错觉，需要使用点阵/矩阵。你可以通过三种不同的方式来实现：调幅（AM）、调频（FM）和混合网格。这里的“幅度”指的是点的大小，“频率”就是……频率。用调幅网格制作暗点意味着使用大点，而在调频网格中，则是通过增加点的数量来实现。

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. 调幅点的问题在于，如果你处理得不够精细，图像中会出现不想要的图案：即所谓的“莫尔条纹”（Moiré）。因此，有一项规则（DIN 16547）规定了调幅印刷中颜色偏移的具体方式，以尽量避免它们相互干扰。由于调频网格是随机的，它们不会遇到这个问题。

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. 我通过命令行访问服务器，因此我使用命令行工具来快速编辑图像。这个工具叫 ImageMagick，通过 convert 命令调用。我在网上找到了创建这种视觉效果的方法（找不到链接了），并做了一些调整。所以我不敢自称是每个参数作用的专家，但我会试着解释一下。

convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \
-colorspace CMYK -separate null: \
\( -size 2x2 xc: \( +clone -negate \) \
+append \( +clone -negate \) -append \) \
-virtual-pixel tile -filter gaussian \
\( +clone -distort SRT 2,0 \) +swap \
\( +clone -distort SRT 2,15 \) +swap \
\( +clone -distort SRT 2,45 \) +swap \
\( +clone -distort SRT 2,75 \) +swap +delete \
-compose Overlay -layers composite -set colorspace CMYK -combine \
"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. 总的来说，它的作用是：将图像宽度调整为 800px（谁需要更大的呢？），将颜色设置为 CMYK，应用背景填充旋转后留下的空白区域（并设置高斯模糊来过滤噪点），将颜色拆分，稍微放大它们（为了得到更大的点），对它们进行扭曲（在本例中是旋转），最后将这 4 张图像重新合并为一张。

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. 这设置了青色（C）在 0°，品红（M）在 15° 等等。但无所谓了。放大和缩小后没有出现明显的奇怪伪影，所以这就足够好了。如果我们把点的大小增加到夸张的程度（8x8），你可以更清楚地看到发生了什么。

Edit: The perfect route to CMYK

编辑：通往 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. 睡了一觉并重读了这篇文章后，对于一张在调幅网格中仅限于真正 CMYK 颜色的图片，解决方案显而易见。出于我稍后会提到的原因，这不是减小文件大小的好方法（除了限制颜色和将图像宽度调整为 800 确实能减小体积外，其他操作几乎都与该目标背道而驰）。不过，它看起来确实很酷。

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 see some of the squares are just darker than others. For a true immitation this will not do! All we need to do is to limit each channel’s colors to 2 before combining them again. This is very obvious in hindsight. Idk why the person I got the original command from didn’t do this. 使用上述方法，点的大小不会变化。为什么要变化呢？正如我们之前讨论的，数字图像（除非是 GIF 或 PNG-8）可以为每个像素提供不同强度的红、绿、蓝光。所以当我们看上面的大图时，可以清楚地看到一些方块比其他的更暗。对于真正的模仿来说，这还不够！我们所要做的就是在合并之前将每个通道的颜色限制为 2 种。事后看来这非常明显。我不知道我从哪里得到的原始命令的那个人为什么没这样做。

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

This will produce an image that looks like this: 这将生成一张看起来像这样的图片：

In retrospect I wonder if I might try out images like this instead of pink. If all I want is the general vibe of the grid then pink is fine. Though it does have more colors (shades of pink) for less colors (actually useful distinct ones). Who said blogging about your stupid idea 回想起来，我在想是否可以尝试像这样的图片而不是粉色的。如果我想要的只是网格的大致氛围，那么粉色就足够了。虽然它确实有更多的颜色（粉色的深浅），但实际有用的区分颜色却更少。谁说写博客记录你的愚蠢想法……