ByteScope

Image Pixel Diff

逐像素比較兩張圖片 — 差異標示、混合、滑動、洋蔥皮與閃爍。

檔案不會離開你的瀏覽器 — 全部在本機處理。

Drop two images to compare

A then B · click to browse · paste (Ctrl+V) anywhere on this page

關於這個工具

這是一個線上圖片比對工具,給所有需要逐像素比較兩張圖片的人 — 設計師核對 redline 與實作、開發者驗證截圖回歸,或攝影師找出照片被動了哪裡。拖放或貼上圖片 A 與圖片 B,工具就會精確標示出變更之處,背後是成熟的像素比對引擎,內建反鋸齒偵測,不會讓有損壓縮的雜訊淹沒真正的差異。容差滑桿、逐色版差異放大與自動範圍框,把「這兩張看起來不太一樣」變成精準、可量測的數字。

這個領域的現有工具其實出乎意料地弱 — 大多要上傳你的檔案,而且只給一種固定的比較檢視。這個工具在你的瀏覽器本機提供五種比較模式(差異標示、差值混合、滑動、洋蔥皮與閃爍),任何東西都不上傳,並回報變更像素數量、百分比、最大色版差值與變更區域數。想快速又保有隱私地找出兩張圖的差異,用它就對了 — 尺寸不一致也能處理,比對前會先填補或縮放對齊。

常見問題

這個圖片比對工具提供哪些比較模式?
五種,而且同一組圖片可以即時切換:「差異標示」在調暗的底圖上以橘色標出變更的像素;「差值混合」顯示放大後的 |A−B| 差值影像;「滑動」在兩張圖之間拖曳分隔線;「洋蔥皮」用不透明度滑桿讓 B 疊在 A 上淡入淡出;「閃爍」以大約每秒兩次的頻率交替顯示 A 和 B。大多數線上工具只給你一種模式 — 能在五種模式間切換,逐像素比較兩張圖片會容易得多。
兩張圖片尺寸不同時要怎麼比較?
當兩張圖片大小不同時,工具會提出警告,並提供兩種方式在比對前先對齊:「對齊左上角」用透明像素填補較小的圖片,讓兩者共用同一張畫布;「將 B 縮放至 A」則把第二張圖重新取樣成第一張圖的尺寸。依你要檢查的內容選擇適合的方式即可。
容差滑桿是做什麼的?
容差(0–255)設定兩個像素要相差多少才算是變更。調高它可以忽略 JPEG 或 WebP 有損壓縮帶來的細微色偏,只看到真正的差異。工具也會偵測反鋸齒邊緣並可將其忽略,在比較重新編碼過的圖片時能進一步減少誤判。
我的圖片會被上傳到伺服器嗎?
不會。所有解碼與比較都完全在你的瀏覽器中的 Web Worker 裡執行 — 圖片不會離開你的裝置,沒有上傳步驟,檔案大小也只受限於你電腦的記憶體。頁面載入後甚至可以離線使用。
可以看到變更的位置並匯出結果嗎?
可以。統計面板會回報不同像素的數量與百分比、單一色版的最大差值,以及有多少個獨立區域發生變更。開啟「框出變更區域」會在差異處畫出範圍框,並可用「下載 diff.png」把目前的檢視存成 PNG。
差異標示和差值混合有什麼不同?
差異標示是二元檢視:每個像素不是變更(橘色)就是未變更,由容差閾值控制。差值混合則是連續檢視:它顯示每個色版的 |A−B| 乘上增益係數,所以把增益調高後,低於閾值的微弱差異(漸層、壓縮痕跡、浮水印)也會變得可見。