🔀 截圖比對工具

上傳兩張圖片,即時比對像素差異、高亮標示不同處。支援差異熱圖、左右分割滑桿對比模式,顯示差異百分比與像素統計,適合 QA 測試與設計審查。

什麼是圖片差異比對工具?

圖片差異比對工具讓你上傳兩張圖片,即時比對像素差異並高亮標示不同處。它支援差異熱圖與左右分割滑桿兩種對比模式,並顯示差異百分比與像素統計,特別適合 QA 測試、UI 回歸檢查與設計審查。

只要把「修改前」與「修改後」的圖丟進來,就能快速看出哪裡變了、變了多少,不必靠肉眼一一比對。

適用情境

如何使用

  1. 上傳兩張要比對的圖片。
  2. 選擇比對模式:差異熱圖或分割滑桿。
  3. 查看高亮的差異區域與差異百分比。
  4. 依結果判斷變動是否符合預期。

使用技巧

名詞解釋

像素差異
兩張圖在相同位置像素顏色的不同。
差異熱圖
用顏色標示差異位置與強度的視覺化圖。
視覺回歸測試
比對改版前後畫面,找出非預期視覺變動的測試。

常見問題 FAQ

這個工具適合什麼使用場景?

主要適用於:QA 測試比對 UI 截圖是否符合設計稿、設計師確認改版前後視覺差異、開發者驗證 CSS 修改是否造成非預期的版面變化,以及任何需要比較兩張圖片差異的情況。

靈敏度設定如何影響比對結果?

靈敏度越高,越細微的顏色差異也會被標示出來;靈敏度越低,只有顯著的差異才會被標記。建議一般比對使用 70%,若圖片有輕微 JPEG 壓縮失真可降低至 40-50%。

兩張圖片尺寸不同可以比對嗎?

可以。工具會自動將兩張圖片縮放至相同尺寸進行比對。但為取得最準確的結果,建議使用相同解析度的截圖。

圖片資料安全嗎?

完全安全。所有圖片比對運算都在您的瀏覽器本地執行,圖片不會上傳至任何伺服器,保護您的隱私。

兩張圖尺寸不同可以比嗎?

可以上傳,但尺寸不一致會讓對齊困難、差異被放大。建議比對相同尺寸的圖,結果才準確。

差異百分比代表什麼?

代表兩張圖中有多少比例的像素不同。可作為「是否有變動」的客觀指標,數值越大差異越大。

圖片會上傳嗎?

不會。比對完全在你的瀏覽器本機運算,圖片不會上傳或儲存,適合內部設計稿與截圖。

適合用在自動化測試嗎?

適合作為視覺回歸檢查的輔助:把改版前後截圖比對,快速看出非預期的視覺變動。