이미지 비교

Image Diff

두 이미지를 픽셀 단위로 비교해 달라진 부분을 표시하고 체감 차이 점수를 계산합니다.

같아야 할 스크린숏 두 장, 그리고 정말로 같은지에 대한 질문입니다. 달라진 픽셀 수만으로는 답할 수 없습니다. 계단 방지 처리 하나로도 수천 픽셀이 달라지고 그것은 아무 의미가 없기 때문입니다. 그래서 SSIM과 DSSIM을 함께 내고, 차이를 보는 방법을 네 가지 제공합니다.

🔒 브라우저 안에서만 처리diffcompareqavisual

“변경 전” 이미지를 놓으세요

브라우저가 디코딩할 수 있는 형식이면 됩니다.

“변경 후” 이미지를 놓으세요

브라우저가 디코딩할 수 있는 형식이면 됩니다.

허용 오차 0.05YIQ에서 잽니다. 그래서 같은 크기라면 밝기 변화가 색조 변화의 약 2.5배로 계산되는데, 사람 눈이 그렇게 받아들입니다. 0으로 두면 코드값이 한 곳에서 1만 달라도 차이로 봅니다.

표시 방식

뒤에 원본 깔기채도를 낮추고 밝게 깔아, 분홍색 위에서도 강조가 묻히지 않습니다.알파 채널도 비교끄면 두 이미지를 먼저 흰 배경에 얹어 비교합니다 — ‘페이지에 올렸을 때 달라 보이는가’에 답하는 방식입니다. 켜면 알파 채널 자체를 비교합니다.

사용 방법

변경 전후를 놓습니다
크기가 달라도 됩니다. 양쪽을 합집합 크기에 투명하게 채우므로 겹치는 부분은 제대로 비교되고, 겹치지 않는 부분은 차이로 나타납니다. 실제로 차이가 맞습니다.
허용 오차를 정합니다
YIQ에서 잽니다. 같은 크기라면 밝기 변화가 색조 변화의 약 2.5배로 계산되는데, 사람 눈이 그렇게 받아들입니다. 0으로 두면 코드값이 한 곳에서 1만 달라도 실패로 봅니다.
두 종류의 수치를 함께 읽습니다
달라진 픽셀 2%에 SSIM 0.999면 계단 방지 처리 차이입니다. 2%에 SSIM 0.94면 무언가가 움직인 것입니다.
작은 어긋남은 가리개로 봅니다
두 버전을 눈의 같은 위치에 놓습니다. 1픽셀 미만의 어긋남이 보이게 되는 유일한 방법입니다. 나란히 놓고 보려면 시선을 옮겨야 하는데, 그 사이에 그만큼의 디테일을 눈이 붙들지 못합니다.