# Image Pixel Diff

> 在瀏覽器中逐像素比較兩張圖片：差異標示、差值混合、滑動、洋蔥皮和閃爍模式。取得變更像素數量與範圍框 — 檔案絕不上傳。

- URL: https://bytescope.dev/zh-Hant/image-diff/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/image-diff.md) · [ja](https://bytescope.dev/ja/image-diff.md)
- Runs: 檔案不會離開你的瀏覽器 — 全部在本機處理。
- Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile.
- Updated: 2026-09-08

## What it does

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

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

## Limits

Does not compare PDFs, text or folders; it compares exactly two raster images of the same size.

## FAQ

### 這個圖片比對工具提供哪些比較模式？

五種，而且同一組圖片可以即時切換：「差異標示」在調暗的底圖上以橘色標出變更的像素；「差值混合」顯示放大後的 |A−B| 差值影像；「滑動」在兩張圖之間拖曳分隔線；「洋蔥皮」用不透明度滑桿讓 B 疊在 A 上淡入淡出；「閃爍」以大約每秒兩次的頻率交替顯示 A 和 B。大多數線上工具只給你一種模式 — 能在五種模式間切換，逐像素比較兩張圖片會容易得多。

### 兩張圖片尺寸不同時要怎麼比較？

當兩張圖片大小不同時，工具會提出警告，並提供兩種方式在比對前先對齊：「對齊左上角」用透明像素填補較小的圖片，讓兩者共用同一張畫布；「將 B 縮放至 A」則把第二張圖重新取樣成第一張圖的尺寸。依你要檢查的內容選擇適合的方式即可。

### 容差滑桿是做什麼的？

容差（0–255）設定兩個像素要相差多少才算是變更。調高它可以忽略 JPEG 或 WebP 有損壓縮帶來的細微色偏，只看到真正的差異。工具也會偵測反鋸齒邊緣並可將其忽略，在比較重新編碼過的圖片時能進一步減少誤判。

### 我的圖片會被上傳到伺服器嗎？

不會。所有解碼與比較都完全在你的瀏覽器中的 Web Worker 裡執行 — 圖片不會離開你的裝置，沒有上傳步驟，檔案大小也只受限於你電腦的記憶體。頁面載入後甚至可以離線使用。

### 可以看到變更的位置並匯出結果嗎？

可以。統計面板會回報不同像素的數量與百分比、單一色版的最大差值，以及有多少個獨立區域發生變更。開啟「框出變更區域」會在差異處畫出範圍框，並可用「下載 diff.png」把目前的檢視存成 PNG。

### 差異標示和差值混合有什麼不同？

差異標示是二元檢視：每個像素不是變更（橘色）就是未變更，由容差閾值控制。差值混合則是連續檢視：它顯示每個色版的 |A−B| 乘上增益係數，所以把增益調高後，低於閾值的微弱差異（漸層、壓縮痕跡、浮水印）也會變得可見。

## Related tools

- [Image Inspector](https://bytescope.dev/zh-Hant/image-inspector.md) — 用放大鏡點顏色，順便讀出像素座標。
- [Image Format Converter](https://bytescope.dev/zh-Hant/image-convert.md) — PNG、JPEG、WebP、GIF 之間可以整批互轉，檔案大小立刻看得到。
- [Image ↔ Base64 Converter](https://bytescope.dev/zh-Hant/image-base64.md) — 把圖片轉成 Base64 data URI，也能轉回來，一次可以處理很多張。