圖片對比工具

免費線上圖片對比工具。支援並排、拖動滑塊、洋蔥皮疊加、逐畫素高亮四種模式比較兩張圖片。完全在瀏覽器本地執行，不上傳。

四種方式對比兩張圖片：並排、拖動滑塊、洋蔥皮疊加、逐畫素高亮。 拖入兩張圖片，立刻看出改動之處。UI 迴歸、設計改稿、截圖審查的利器。 🔒 完全在你的瀏覽器本地執行，圖片不會上傳到任何伺服器。

拖入圖片到此處，或點選選擇
拖入圖片到此處，或點選選擇
在兩側各載入一張圖片即可開始對比。

圖片對比是如何工作的

四種對比方式

  • 並排對比 —— 最簡單的檢查：兩張圖原尺寸並列顯示。
  • 滑塊對比 —— 可拖動的分割線，一側顯示舊圖、一側顯示新圖，最適合 UI 改版前後對比。
  • 洋蔥皮疊加 —— 將第二張圖以可調透明度疊加在第一張上，便於發現位移和對齊偏差。
  • 畫素高亮 —— 逐畫素比較，將變化的畫素標紅，即使一個畫素的改動也無所遁形。

畫素對比的度量方式

畫素高亮模式並非簡單的 RGB 相減，而是採用 YIQ 色差 度量——與流行的 pixelmatch 庫相同的思路。YIQ 將亮度（Y）與色度（I、Q）分離，更貼近人眼對差異的感知。一個 閾值 滑塊控制差異多大才會標記一個畫素。

常見場景

  1. UI 迴歸測試 —— 對比程式碼改動前後的截圖。
  2. 設計走查 —— 核對開發實現是否與設計稿一致。
  3. 圖片壓縮質檢 —— 精確檢視編碼器改動了哪些區域。
  4. 照片修圖 —— 確認修圖觸及了哪些畫素。

一切都在你瀏覽器的 Canvas API 上執行——不上傳、不等待。

常見問題

我的圖片會被上傳到伺服器嗎？
不會。所有對比都通過 Canvas API 在你的瀏覽器本地完成，圖片永遠不會離開你的裝置。
兩張圖片尺寸不同怎麼辦？
工具仍會對比，方式是對齊到左上角並使用較大的畫布，同時會提示兩張圖的尺寸。若需要畫素級精確結果，請使用相同尺寸的圖片。
支援哪些格式？
瀏覽器能解碼的都支援：PNG、JPG、WebP、GIF（首幀）、BMP、SVG。
閾值滑塊有什麼作用？
它設定兩個畫素相差多大才算作變化，採用 YIQ 色差度量。值越低越嚴格，值越高越能容忍細微色差。
如何儲存畫素對比結果？
切換到「畫素高亮」模式，點選「下載差異圖」即可把高亮結果匯出為 PNG。