仔細觀察報紙照片,它會分解成不同大小的黑點。看第一張麥金塔電腦的螢幕截圖,灰色的天空是一小片黑白像素。看看 Game Boy 精靈和四種綠色以某種方式畫出一張臉。這些顯示器或印刷機都無法顯示平滑的漸變,而且它們都以同樣的方式偽造:透過將一些可用的顏色排列成圖案,眼睛平均回到色調。
該技術是抖動的。本指南解釋了它存在的原因、主要演算法在使用的算術方面有何不同、抖動工具中的設定會發生什麼變化以及如何獲得螢幕或列印的乾淨輸出。工作範例使用 Toolz 影像抖動工具,這些數字來自它運行的相同公式。
TL;DR: 抖動透過在眼睛混合成中間色調的圖案中放置點來再現具有小調色板的連續色調圖像,通常只有兩種顏色。有序抖動(拜耳)將每個像素與固定閾值矩陣進行比較,並給出規則的交叉影線。誤差擴散(Floyd-Steinberg、Atkinson)將每個像素'將舍入誤差推到其鄰居上以獲得更有機的顆粒。半色調沿著旋轉螢幕改變點大小,就像列印一樣。這 圖像抖動工具 提供六種模式、復古調色板、高達 8x 的 PNG 匯出和真正的向量 SVG,全部為客戶端,免費,無註冊。
什麼是圖像抖動?
影像抖動是一種顯示調色板無法直接表示的色調的方式,方法是混合調色板可以表示的小圖案顏色。黑白印表機無法列印 50% 的灰色,但它可以列印黑白點的棋盤,從正常觀看距離看去呈現灰色。
它解決的問題稱為量化。每個像素都必須四捨五入到可用調色板中最接近的顏色。在不抖動的情況下,縮減為黑白的照片僅保留硬輪廓:所有比中間灰色淺的都變成白色,所有較暗的都變成黑色。梯度消失了。隨著抖動,四捨五入仍然逐像素發生,但誤差會分散或被圖案抵消,因此每個區域中暗點的密度追蹤原始區域中的暗程度。
不同的演算法以不同的方式傳播錯誤,每種演算法留下的模式就是它的視覺特徵。這就是為什麼&引用;抖動&引用;可能意味著舊 PC 遊戲的整齊交叉影線、MacPaint 的顆粒狀紋理或絲網印刷海報的圓點。
抖動演算法有何不同?
有兩個家庭。 有序抖動 透過將每個像素與固定閾值模式中的位置進行比較來獨立決定每個像素。 誤差擴散 按順序決定像素並將每個舍入誤差轉發到尚未處理的像素。半色調是一種源自列印的相對值,它改變點大小而不是點位置。
| 工具中的模式 | 家庭 | 它如何決定 | 看 | 好 |
|---|---|---|---|---|
| 拜耳 4x4 | 已訂購 | 將音調與 4x4 閾值矩陣進行比較 | 規則的交叉影線,可見的圖案 | 復古遊戲和早期 PC 風格、海報 |
| 阿特金森 | 誤差擴散 | 將 3/4 的錯誤推給六個鄰居 | 高對比度,誇張的亮點 | 1984 年 Macintosh 外觀,帶沖頭的肖像 |
| 佛洛伊德-斯坦伯格 | 誤差擴散 | 將所有錯誤推送到四個鄰居 | 細膩的有機穀物,最忠實的色調 | 細節重要的照片 |
| 半色調 | 調幅螢幕 | 點半徑隨著黑暗而在旋轉網格上增長 | 成角度的圓點 | 印刷風格的海報、漫畫和普普藝術 |
| 網路故障 | 調色板按扣加位移 | 每個區塊最近的調色板顏色,移動掃描線 | 帶有水平撕裂的彩色塊 | 風格化的多色藝術 |
| 硬1位 | 閾值 | 如果音調低於 128,則為暗 | 沒有抖動,純粹的輪廓 | 標誌、線條藝術、模板 |
接下來的部分將介紹實數的算術,從每種模式共享的音調值開始。
Pixel' 的音調在抖動之前是如何計算的?
在應用任何圖案之前,每個像素都會轉換為從 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
亮度滑桿將每個像素移動 -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 的像素會變得更淺。提高對比度會擴大傳播範圍,這意味著更少的中間色調和更大膽的點圖案。
拜耳如何訂購抖動工作?
拜耳抖動在影像上平鋪一個小的閾值矩陣,當其色調低於其位置的閾值時,標記像素為暗。矩陣的排列方式使得閾值盡可能均勻地分佈在圖塊上,該排列由 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%,接近音調' 1 - 89/255 的黑暗度 = 65%。
每個具有相同色調的區域都會得到完全相同的圖案,這種重複就是拜耳的外觀。它從不產生隨機紋理,它乾淨地平鋪,並且壓縮得很好。它的弱點是條帶:緩慢的梯度最多可以穿過 17 種不同的圖案。
Floyd-Steinberg 誤差擴散如何發揮作用?
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,然後它變成白色。在一個區域上,黑白像素的比例與原始色調相匹配,並且由於選擇取決於鄰居,因此紋理看起來不規則而不是平鋪。
由於保留了完整的錯誤,弗洛伊德-斯坦伯格最好地保留了整體色調,這就是為什麼它是攝影忠實性的選擇。
為什麼阿特金森的猶豫看起來如此對比?
比爾·阿特金森 (Bill Atkinson) 為最初的 Apple Macintosh 編寫的阿特金森抖動將錯誤傳播得更廣,但故意丟失了一些。六個鄰居中的每一個都收到 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 被簡單地丟棄。掉落錯誤將近白色區域推至純白色,將近黑色區域推至純黑色,因此高光會散發出來,陰影會遮擋,中間色調會保持清晰、開放的紋理。它不如弗洛伊德-斯坦伯格準確,而且通常更具吸引力,尤其是在臉部和小螢幕上。
半色調模式如何運作?
半色調會改變點的大小而不是它們的位置。該工具放置一個旋轉到螢幕角度的樣本點網格,讀取每個點的音調,並繪製一個圓圈,其半徑隨著音調變暗而增加:
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 檔案。
調色板 設定顏色。包括五個預設:brutal Paper(紙莎草紙、危險黃、木炭)、Mac OS 1984(白色、灰色、黑色)、Gameboy Classic(四種綠色)、Cyberpunk Neon 和 Synthwave 80s,以及帶有您自己的背景和前景的客製化顏色。六種模式中有五種是雙色調的,僅使用第一個和最後一個調色板顏色。這就是為什麼 Gameboy Classic 在拜耳或 Floyd-Steinberg 中僅顯示最淺和最深的綠色。 Cyber Glitch 是映射到調色板中每種顏色的唯一模式。
反轉 交換背景和前景,以獲得暗場上的光點。
您可以匯出什麼尺寸?何時應該使用 SVG?
照片首先被蓋在固定舞台上,因此 6000px 相機檔案的渲染速度與小檔案一樣快。拖曳畫布以重新定位裁剪。
| 縱橫比 | 階段(1x) | 2x(預設) | 4x | 8x |
|---|---|---|---|---|
| 原創 | 840 像素寬 | 1680寬 | 3360寬 | 6720寬 |
| 1:1 平方 | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16:9 風景 | 1120 x 630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9:16 垂直 | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4:3 經典 | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
PNG 匯出不會放大預覽。它以目標大小重新繪製來源,並再次運行抖動,像素比例乘以導出比例,因此在 4x 時,4px 點變成清晰的 16px 點,而不是模糊的放大。渲染是用完成的 HTML 畫布 API,它在記憶體中保存著大位圖;如果 8x 匯出失敗且 "匯出失敗。嘗試較小的匯出規模。",就這麼做吧。
SVG 匯出將每個點寫成實數 <rect> 或者 <circle> 元素,跟隨 W3C SVG 規格1,因此海報可以縮放到任何列印尺寸,無需重新採樣,並在向量編輯器中開啟。海報卡文字保持可編輯文字。權衡是文件大小。 840 x 1120 階段上的 4px 刻度有 210 x 280 = 58,800 個單元格,深色直模影像可以將其中大部分寫入每個約 55 個字元的獨立元素,接近 3 MB。將像素比例加倍至 8 會將儲存格數削減至四分之一。使用 SVG 進行列印和編輯,使用 PNG 進行網頁編輯。
CRT 掃描線效果永遠不會達到匯出;它只是預覽疊加層。另一方面,海報卡疊加是匯出的一部分,預設使用佔位符標題 "抖動//2026";取消勾選&引用;顯示海報卡疊加&引用;如果您只想要圖像。
我的圖片上傳了嗎？
不。該文件作為本地物件 URL 開啟,繪製在畫布上並在同一瀏覽器標籤中抖動。沒有請求攜帶圖像數據,因此未發布的照片或客戶端資產保留在您的裝置上,並且該工具在加載後將繼續關閉網路。使用 Ctrl+V 或 Cmd+V 從剪貼簿貼上也可以。
內建樣本(地出、藍色大理石和月球引導印記)是美國太空總署的照片。美國聯邦政府的作品不受版權保護 17 美國標準 105,這就是為什麼它們可以作為樣品運輸。對於您自己的上傳,該工具不會添加浮水印,也不會主張任何權利;通常的限制是您在來源圖像中擁有的任何權利。
你會遇到哪些錯誤?
| 訊息或症狀 | 原因 | 修復 |
|---|---|---|
| &引用;該文件不是圖像。&引用; | 文件's 類型不是圖像 | 首先對其進行轉換,例如使用圖像格式轉換器 |
| &引用;該圖像無法解碼。&引用; | 瀏覽器無法讀取該格式,例如 Safari 之外的 HEIC | 轉換為 JPG 或 PNG |
| &報價;出口失敗。嘗試較小的出口規模。&報價; | 瀏覽器無法分配大畫布 | 選擇 4x 或 2x |
| &引用;剪貼簿讀取被阻止...&引用; | 瀏覽器拒絕剪貼簿存取該按鈕 | 改為在頁面上按 Ctrl+V 或 Cmd+V |
| 調色板僅顯示兩種顏色 | 雙色調模式使用第一種顏色和最後一種顏色 | 切換到 Cyber Glitch 或設定自訂顏色 |
| 莫爾或閃閃發光的圖案 | 小於像素比例的精細規則細節 | 首先稍微提高像素比例或模糊來源 |
| SVG 比 PNG 大得多 | 每個點一個元素 | 提高像素比例或匯出 PNG |
PNG 中的透明區域在抖動之前放置在白色上,因此它們讀作紙。
抖動影像的替代方案
| 工具 | 如何 | 筆記 |
|---|---|---|
| GIMP | 圖像、模式、索引,佛洛伊德-斯坦伯格猶豫不決 | 基於調色板,無半色調螢幕角度 |
| Photoshop | 灰階,然後是帶有半色調螢幕或擴散抖動的點陣圖模式 | 面向印刷,付費 |
| 圖像魔法 | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
可編寫腳本,許多閾值映射 |
| 圖像魔法 | magick in.jpg -dither FloydSteinberg -monochrome out.png |
誤差擴散到黑白 |
| Toolz 影像抖動 | 六種模式、調色板、向量 SVG | 客戶端,拖曳時預覽 |
命令列工具批次獲勝。當觀看結果時外觀取決於微不足道的對比度和點大小時,互動式工具獲勝。
如果猶豫不決的 PNG 正在前往網站,則 影像壓縮指南 涵蓋如何進一步縮小它;只有兩種顏色的圖像壓縮得非常好 PNG。用於將輸出轉換為另一種格式, 影像格式轉換器指南 解釋 PNG、WebP 或 GIF 何時適合。全套都有效 圖像工具集線器,你可以 嘗試抖動工具 在加載您自己的照片之前,先使用 NASA 樣本之一。
