從相同場景、佈局、視窗或匯出工作流程中的配對基準和變更檔案開始。
精確更改區域的像素檢查
影像差異檢查器可以定位兩個相關影像之間的差異。它適合 UI 螢幕截圖檢查、產品潤飾檢查、壓縮匯出檢查以及滑桿中容易錯過的微小視覺變化。
該工具比較共享畫布上瀏覽器解碼的像素。一旦最大的紅色、綠色、藍色或 Alpha 通道增量超過所選閾值，像素就會被視為已更改。
工作流程
差異檢查順序
首先載入基線影像
使用原始的、先前的螢幕截圖或參考匯出作為基線影像。清晰的基線使像素數的變化更容易被發現。
第二次載入更改後的圖片
使用新的螢幕截圖、編輯的照片、優化的圖片或匯出的變體作為更改後的圖片。不匹配的尺寸需要在度量檢查之前進行對齊檢查。
運行突出顯示差異
突出顯示差異標記更改的區域並填入度量卡。滑桿、並排和疊加視圖可驗證視覺上下文中突出顯示的結果。
刻意調整閾值
較低的閾值可以捕捉微妙的變化。較高的閾值會忽略壓縮雜訊、微小的光照變化和抗鋸齒。更改閾值後更新差異。
閾值
如何選擇差異閾值
此閾值設定更改像素的通道差異截止值。不存在普遍的最佳數值；將數值與檢查任務相符。
8
嚴格的使用者介面檢查
嘗試使用 8 來獲得應該清晰可見的小螢幕截圖更改。
按鈕標籤從“儲存”變更為“應用”。
圖示輕微移動、細邊框消失或文字間距發生變化。
該值還可以捕獲文字和邊緣周圍的微小渲染雜訊。
18
照片細節精美
嘗試使用 18 進行影像編輯，只有仔細觀察才能看到。
產品陰影變得更柔和，臉部修飾去除了小痕跡，或者織物紋理發生了變化。
照片看起來幾乎相同，但高光、反射或色塊經過編輯。
適合仔細檢查。
32
平衡預設
大多數比較都從 32 開始。
著陸頁螢幕截圖包含文字和照片。
再次匯出產品影像，或需要快速檢查其他工具的預覽。
數值調低可獲得更嚴格的檢查；檔案本身雜訊較多時可調高。
64
主要可見變化
嘗試 64 以關註明顯的變化。
更換背景、移動物件、更改裁切或出現強烈的顏色變化。
JPEG 或 WebP 匯出的雜訊很小，但檢查只關心人們快速注意到的變化。
小文字、精細圖示和細線邊框可能不再引人注目。
指標
如何讀取影像差異指標
改變像素
高於目前閾值的可比較畫布像素數。該值在很大程度上取決於閾值和對齊。
更改的像素百分比
更改的像素除以所有可比較的像素。它有助於比較具有不同影像尺寸或裁剪區域的兩次運行。
平均 RGB 增量
RGB 通道的平均絕對差。即使變化面積百分比很小，這裡也會顯示出廣泛的顏色或亮度變化。
RMSE
RGB 均方根誤差。較大的局部差異比微小的分散差異對 RMSE 的影響更大。
PSNR
峰值信噪比。 PSNR 越高，通常意味著 RGB 訊號中的影像越接近； PSNR 越低意味著誤差越明顯或可測量。
常見陷阱
需要再次查看的差異結果
影像略有偏移
1 像素的偏移可以照亮許多區域，即使圖片看起來幾乎相同。打開 疊加 並檢查主邊緣是否對齊。
影像尺寸不匹配
不同的寬度或高度使得比較不那麼直接。使用視覺視圖找到可見的變化，然後裁剪或匯出匹配的尺寸以獲得更清晰的指標。
出現壓縮雜訊
JPEG 和 WebP 匯出通常會在平面顏色和邊緣上添加微小的斑點。如果檢查是關於可見編輯的，則提高閾值。
渲染期間文字邊緣發生變化
瀏覽器、字體或匯出變更後，字體、圖示和向量邊緣可能會出現略有不同的像素。使用較低的閾值進行螢幕截圖品質檢查，然後透過眼睛確認突出顯示的區域。
使用案例
查看本指南的任務
UI截圖迴歸檢查
影像壓縮品質對比
商品照片修飾檢查
編輯檢查前後
佈局或匯出差異較小
試用
閱讀指南後開啟工具
載入基線影像和變更的影像，運行突出顯示差異，然後調整閾值，直到突出顯示的區域與檢查任務相符。
常見問題
使用圖片差異檢查器
我應該在影像差異檢查器中使用什麼閾值？
從 32 開始進行一般檢查。使用 8 進行嚴格的同尺寸螢幕截圖檢查，使用 18 進行精細的照片細節，使用 64 進行較大的可見更改。
是什麼在相似的影像中產生了許多變化的像素？
小的對齊偏移、抗鋸齒、壓縮雜訊、顏色配置差異和微小的照明變化都可以算作更改的像素。使用疊加視圖和閾值調整來了解結果。
RMSE 和 PSNR 是否比更改像素百分比更好？
他們回答了不同的問題。更改的像素百分比顯示有多少區域超過了閾值，而 RMSE 和 PSNR 總結了可比較畫布上的 RGB 誤差。
我的影像資料安全嗎？
是的。圖片預覽和像素比較在瀏覽器本機運行。差異不需要伺服器上傳，因此您的圖片資料保留在活動瀏覽器工作階段中。