仔细观察一张报纸照片,它会分解成不同大小的黑点。看看第一张 Macintosh 的屏幕截图和灰色的天空原来是一片黑白像素的散落。看看 Game Boy 精灵和四种绿色的深浅以某种方式画出一张脸。那些显示器或按压器都无法显示出光滑的渐变,所有这些都以同样的方式伪造:通过将几种可用的颜色排列成图案,眼睛平均回到色调。
That technology is dithering。本指南解释了为什么它存在,主要算法在使用的算术方面有何不同,抖动工具中的设置发生了什么变化,以及如何获得干净的输出以进行屏幕或打印。工作示例使用 Toolz 图像抖动工具的,而数字来自它运行的相同公式。
TL;博士: Dithering通过将点放置在眼睛混合成中间色调的图案中,再现了一个小调色板的连续色调图像,通常只有两种颜色有序抖动(Bayer)将每个像素与固定的阈值矩阵进行比较,并给出规则的交叉点扩散(Floyd-Steinberg,Atkinson)将每个像素's舍入误差推到其邻居上,以获得更有机的颗粒半色调沿着旋转屏幕改变点大小,就像打印一样。 图像抖动工具 提供六种模式、复古调色板、高达 8 倍的 PNG 导出和真正的矢量 SVG、所有客户端、免费、无注册。
什么是图像抖动?
图像抖动是一种显示调色板无法直接表示的色调的方式,通过将调色板可以表示的颜色混合成小图案。黑白打印机无法打印 50% 灰色,但可以打印从正常观看距离看起来呈灰色的黑白点棋盘。
化(quantization),它解决的问题叫做量化,每个像素都要在可用调色板中取整到最接近的颜色,没有抖动,一张缩减为黑白的照片只保留硬质轮廓:所有比中间灰色浅的都变白,所有深色的都变黑,渐变没有抖动,取整仍然逐像素发生,但误差被一个图案分散或偏移,因此每个区域暗点的密度跟踪原始区域中该区域的暗度。
不同的算法以不同的方式传播该错误,每个错误留下的图案就是它的视觉签名。这就是为什么"抖动"可以意味着旧PC游戏的整齐交叉、MacPaint的颗粒纹理或丝网印刷海报的圆点。
抖动算法有何不同?
有两个家庭。 有序抖动 通过将每个像素与固定阈值模式中的位置进行比较来独立决定每个像素。 错误扩散 依次决定像素,并将每个舍入误差向前转发到尚未处理的像素。半色调是一种打印导出的相对关系,它会改变点大小而不是点位置。
| 工具中的模式 | 家庭 | 它如何决定 | 看看 | 好 |
|---|---|---|---|---|
| 拜耳 4x4 | 订购 | 4x4阈值矩阵比较音调 | 规则交叉线,可见图案 | 复古游戏和早期PC风格、海报 |
| 阿特金森 | 错误扩散 | 3/4的误差推到六个邻居 | 高对比度、夸张的亮点 | 1984 年的 Macintosh 外观,带有冲击力的肖像 |
| 弗洛伊德-斯坦伯格 | 错误扩散 | 将所有错误推送到四个邻居 | 细腻的有机谷物,最忠实的色调 | 细节重要的照片 |
| 半色调 | 调幅屏幕 | 点半径随着黑暗而生长在旋转的网格上 | 圆点成一定角度 | 印刷风格的海报、漫画和波普艺术 |
| 网络故障 | 调色板卡扣加位移 | 每个块最近的调色板颜色,移动扫描线 | 彩色块,带有水平泪水 | 风格化的多色艺术 |
| 硬1位 | 阈值 | 如果音调低于 128,则为深色 | 没有抖动,纯粹的轮廓 | 标志、线条艺术、模板 |
接下来的部分将用实数进行算术,从每个模式共享的音值开始。
抖动前如何计算像素'的音调?
在应用任何模式之前,每个像素都会转换为从 0(黑色)到 255(白色)的单个亮度值。该工具使用 的亮度权重为 ITU-R 建议 BT。601的, 绿的重量最大, 因为人类的视觉对它最敏感:
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
Brightness滑块将每个像素移动-100到 + 100对比度曲线滑块,0.5到3默认值为1.4,将色调从中灰色拉伸开。
工作示例:默认设置下的中灰色像素 RGB(100、100、100)。
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
所以默认对比度会将这个灰色颜色推得更深,从 100 推到 89 左右。恰好在 128 处的像素几乎不移动,而在 180 处的像素移动得更轻。提高对比度会扩大,从而传播开来,这意味着更少的中音和更大胆的点图案。
拜耳订购抖动是如何工作的?
Bayer抖动图块在图像上放置一个小的阈值矩阵,并在其色调低于阈值时在其位置标记一个像素暗,该矩阵的排列使得阈值尽可能均匀地分布在图块上,该排列由Bryce Bayer在1973年发布的工具使用4x4版本,缩放到0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
89的曲调的每个像素的平面区域从上面的例子中取一个单元格在89低于其阈值时是暗的,89以上的阈值是96,112,128,144,160,176,192,208,224和240:十六个中的十个,所以每16个单元格中有10个获得墨水,即62.5%的覆盖率,接近色调's的1 - 89/255 = 65%的黑暗。
每个具有相同色调的区域都会得到完全相同的图案,而这种重复就是拜耳的外观。它从不产生随机纹理,它平铺干净,并且压缩得很好,就像 PNG 一样。它的弱点是带状:缓慢的梯度最多穿过 17 个不同的图案。
弗洛伊德-斯坦伯格误差扩散如何工作?
Floyd-Steinberg从左到右,从上到下处理图像。每个像素都四舍五入为黑色或白色,其色调和四舍五入的值之间的差异被分割为四个尚未处理的邻居,使用加到16/16的权重。罗伯特 · 弗洛伊德和路易斯 · 斯坦伯格在1976年发表。
current 7/16
3/16 5/16 1/16
89的色调的工作示例, 它在128截止线以下, 因此像素变黑(0),误差为89 - 0 = 89, 交上:
| 邻居 | 分享 | 添加了它的语气 |
|---|---|---|
| 对 | 7/16 | 38.9 |
| 左下 | 3/16 | 16.7 |
| 下面 | 5/16 | 27.8 |
| 右下 | 1/16 | 5.6 |
| 总计 | 16/16 | 89.0 |
像素到现在有 89 + 38.9 = 127.9,就在截止线下方,所以它可能也会变黑并传递其自身较小的误差。再往前走一点,累积的误差使像素超过 128,它变成白色。在一个区域内,黑白像素的比例与原始色调相匹配,并且由于选择取决于邻居,因此纹理看起来不规则而不是平铺。
由于保留了全部错误,弗洛伊德-斯坦伯格最好地保留了整体色调,这就是为什么它是摄影忠实度的选择。
为什么阿特金森抖动看起来如此对比鲜明?
Atkinson抖动, 由比尔 · 阿特金森为原版苹果麦金塔编写, 将错误传播得更广, 但故意丢失一些, 六个邻居每个收到1/8的错误, 所以只有6/8(四分之三)被传递:
current 1/8 1/8
1/8 1/8 1/8
1/8
89的相同音调,误差89,每个邻居得到11.125,总共66.75传递,22.25简单地下降,下降误差将近白区推向纯白,近黑区推向纯黑,因此高光吹出,阴影遮挡,中音保持清脆开放的质感,不如弗洛伊德-斯坦伯格准确,通常更具吸引力,尤其是在面孔和小屏幕上。
半色调模式如何工作?
Halftoning 改变点的大小而不是它们的位置, 工具放置一个网格样本点旋转到屏幕角度, 读取每个点的色调, 并绘制一个圆, 其半径随着色调变暗而增长:
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
4px 像素标度默认情况下:
| 音调 | 半径 | 结果 |
|---|---|---|
| 0(黑色) | 2.6,上限为2.0 px | 触摸点,纯色深色 |
| 89绔 涔诲芥澶澧 | (0.651) x 2 x 1.3 = 1.69 px | 中点 |
| 200 | (0.216) x 2 x 1.3 = 0.56 px | 小点 |
| 230绔 涔诲芥澶澧 | (0.098) x 2 x 1.3 = 0.25 px | 跳过,读成纸 |
45度的默认角度,这是单色屏幕的惯例,因为对角网格比与页面边缘对齐的行更不易被眼睛注意到,0或90附近的角度会产生可见的水平或垂直线,角度滑块只会影响这种模式。
像素比例、调色板和反转设置会发生什么变化?
像素比例 (2 到 32px,默认 4)设置每个块或点单元的大小,该工具对每个单元采样一个像素,而不是对单元进行平均,因此比单元更小的非常精细的细节可能会消失或在织物和格栅上产生莫尔图案,较大的单元会给出更厚实、更图形的海报;较小的单元可以容纳更多细节并产生更大的 SVG 文件。
调色板 set颜色, 包含五个预设: 残酷的纸张(纸莎草纸, 危险的黄色, 木炭), Mac OS 1984(白色, 灰色,黑色), Gameboy经典(四种绿色), 赛博朋克霓虹灯和合成波80s, 加上自定义颜色与自己的背景和前景。六种模式中有五种是双色调, 仅使用第一个和最后一个调色板颜色。这就是为什么Gameboy经典只显示其最浅和最深的绿色在拜耳或弗洛伊德-斯坦伯格。Cyber Glitch是映射到调色板中每种颜色的模式之一。
反转 交换背景和前景,以获得暗场上的光点。
您可以导出什么尺寸?何时使用 SVG?
照片首先被盖上固定舞台,因此 6000px 的相机文件渲染速度就像小文件一样。拖动画布内部以重新定位裁剪。
| 纵横比 | 阶段(1x) | 2倍(默认值) | 4x | 8x |
|---|---|---|---|---|
| 原本 | 840 像素宽 | 1680 宽 | 3360 宽 | 6720 宽 |
| 1:1的正方形 | 840×840×成人电影网840另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 1680×1680×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 3360×3360×快播电影大全, 苍井空电影3360另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 6720×6720×快播电影大全, 苍井空电影6720另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 |
| 16:9的风景线 | 1120×630×成人电影网800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 2240×1260×快播电影大全20180另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 4480×2520×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 8960×5040×成人电影网站8960mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
| 9:16 垂直 | 630×1120×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 1260×2240×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 2520×4480×快播电影大全20180另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 5040×8960×成人电影网站8040mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
| 4:3的经典之作 | 1040×780×成人电影网800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 2080×1560×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 4160×3120×快播电影大全, 苍井空电影下载4160mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | 8320×6240×快播电影大全8320mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
PNG 导出不会放大预览,它会在目标大小重绘源,并再次运行抖动,像素刻度乘以导出刻度,因此在 4 倍时,一个 4px 点变成一个清晰的 16px 点,而不是模糊的放大渲染,这是用 HTML 画布 API的,它在内存中保存了大位图;如果 8x 导出失败,"导出失败。尝试较小的导出规模。",那就做。
SVG导出将每个点写为实数 <rect> 或 <circle> 元素,跟随 W3C SVG 规范(so),所以海报缩放到任何打印大小而不重采样,并在矢量编辑器中打开,海报卡文本保持为可编辑文本,权衡是文件大小,在840 x 1120阶段的4px缩放有210 x 280 = 58,800个单元格,暗直模图像可以将其中大部分写为每个大约55个字符的单独元素,接近3 MB,将像素缩放加倍到8将单元格数量削减到四分之一,使用SVG进行打印和编辑,PNG用于web。
CRT扫描线效果永远不会到达导出;它只是一个预览覆盖。海报卡覆盖, 另一方面, 是导出的一部分, 默认打开与占位符标头"DITHERED // 2026";取消勾选"显示海报卡覆盖"如果你想要单独图像。
我的图片上传了吗？
No。文件打开为本地对象URL,绘制到画布上并抖动在同一个浏览器选项卡中。没有请求携带图像数据,因此未发布的照片或客户端资产留在您的设备上,并且该工具在加载后会一直关闭与网络的粘贴从剪贴板与Ctrl + V或Cmd + V也有效。
内置样本(地球上升号、蓝色大理石号和月球行李箱打印)是美国宇航局的照片。美国联邦政府的作品不受版权保护 17 美国法典第 105 章的,这就是为什么他们可以作为样本发货。对于您自己的上传,该工具添加了无水印,并且声称没有权利;通常的限制是您在源图像中持有的任何权利。
你会遇到什么错误?
| 消息或症状 | 原因 | 修复 |
|---|---|---|
| "那个文件不是图片。" | 件's类型不是图像 | 首先将其转换,例如使用图像格式转换器 |
| "那个图像无法解码。" | 浏览器无法读取该格式,例如 Safari 之外的 HEIC | 转换为 JPG 或 PNG |
| "出口失败 尝试较小的出口规模。" | 浏览器无法分配大画布 | 4倍或2倍选择 |
| "剪贴板读取被屏蔽..." | 浏览器拒绝剪贴板访问该按钮 | 在页面上按 Ctrl+V 或 Cmd+V |
| 调色板仅显示两种颜色 | 双色调模式使用第一种颜色和最后一种颜色 | 切换到网络故障或设置自定义颜色 |
| 莫尔或闪闪发光的图案 | 精细的规则细节小于像素比例 | 首先提高像素比例或稍微模糊源 |
| SVG 比 PNG 大得多 | 每个点一个元素 | 提高像素比例或导出 PNG |
PNG中的透明区域在抖动之前被放置在白色上,因此它们读作纸。
抖动图像的替代方案
| 工具 | 怎麼樣 | 注释 |
|---|---|---|
| 噱头 | 图像、模式、索引,弗洛伊德-斯坦伯格抖动 | 基于调色板,无半色调屏幕角度 |
| 照片商店 | 灰度,然后是带有半色调屏幕或扩散抖动的位图模式 | 面向印刷、付费 |
| 图片马吉克 | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
可编写脚本,许多阈值映射 |
| 图片马吉克 | magick in.jpg -dither FloydSteinberg -monochrome out.png |
错误扩散为黑白 |
| Toolz 图像抖动 | 六种模式、调色板、矢量 SVG | 客户端,拖动时预览 |
Command-line 工具批量获胜,当外观取决于在观看结果时轻推对比度和点大小时,交互式工具获胜。
如果抛弃的 PNG 正在前往网站,则 图像压缩指南 涵盖了如何进一步缩小它;只有两种颜色的图像与 PNG 一样压缩得非常好。为了将输出转换为另一种格式, 图像格式转换器指南 解释 PNG、WebP 或 GIF 何时适合。全套都生活在 图像工具中心并且你可以 尝试抖动工具 NASA样本之一,然后再加载自己的照片。
