이미지 비교

이미지 비교 사용법

비슷해 보이는 두 이미지에서 어디가 얼마나 다른지 찾아 주는 도구입니다. 눈으로 번갈아 보는 방식뿐 아니라 픽셀을 하나하나 비교해 다른 곳을 색으로 칠하고, 다른 픽셀이 전체의 몇 %인지와 차이가 모여 있는 영역의 좌표를 숫자로 알려 줍니다. 디자인 시안의 수정 전후 확인, 웹사이트 화면 캡처를 업데이트 전후로 비교하는 검수, 압축 전후 화질 확인, 인쇄 원고의 바뀐 글자 찾기, 틀린 그림 찾기 문제 풀이에 씁니다.

쓰는 순서

1. 왼쪽 칸 A에 기준이 되는 원본, 오른쪽 칸 B에 비교할 이미지를 넣습니다.
2. 두 칸에 이미지가 들어가면 바로 비교하고, 숫자 카드에 다른 픽셀 비율, 다른 픽셀 수, 평균 색 차이, 차이 영역이 나옵니다.
3. 보는 방식 다섯 가지 가운데 편한 것으로 확인합니다. 세밀한 곳은 실제 크기로 보기를 켜고 상자 안을 움직여 봅니다.
4. 차이 강조 이미지 저장, 나란히 이미지 저장으로 결과를 남기거나 결과 글 복사로 숫자를 메신저에 붙여 넣습니다.

보는 방식 다섯 가지

예시로 확인한 값

예시 두 장 넣기는 600×400 크기의 배너 두 장을 넣습니다. B에서는 제목의 "20%"가 "30%"로, 사각형 색이, 배송비 문구가 바뀌어 있습니다. 기준을 16으로 두면 다른 픽셀은 240,000개 가운데 36,986개, 15.41%이고 평균 색 차이는 28.84, 차이 영역은 "x 60, y 62, 379×278"로 나옵니다. 차이 강조로 보면 바뀐 숫자, 사각형, 문구 세 곳만 색이 칠해집니다. 기준을 0으로 바꾸면 글자 가장자리의 아주 작은 차이까지 세어 15.48%가 됩니다.

차이로 볼 기준

픽셀마다 빨강, 초록, 파랑, 투명도 네 값의 차이 가운데 가장 큰 값을 재고, 그 값이 기준보다 크면 다른 픽셀로 셉니다. 0이면 조금이라도 다른 픽셀을 모두 세고, 값을 올릴수록 눈에 띄는 변화만 남습니다.

• PNG 캡처끼리 정확히 같은지 확인: 0
• JPG로 다시 저장한 이미지의 내용 변화만 보기: 16~32. JPG는 저장할 때마다 미세한 잡음이 생겨 0으로 두면 거의 전부 다르다고 나옵니다.
• 사진의 큰 변화만 보기: 48 이상

평균 색 차이는 모든 픽셀의 차이를 평균 낸 값이라서 두 이미지가 전체적으로 얼마나 비슷한지 하나의 숫자로 볼 때 씁니다. 0이면 완전히 같습니다.

여러 쌍을 한 번에 비교하기

A 칸과 B 칸에 이미지를 여러 장씩 넣으면 파일 이름이 같은 것끼리 짝을 짓고, 이름이 겹치지 않는 나머지는 넣은 순서대로 짝을 짓습니다. 예를 들어 A에 x.png, y.png를, B에 y.png, x.png 순서로 넣어도 x는 x와, y는 y와 비교됩니다. 결과는 표로 나오고 보기를 누르면 그 쌍을 화면에 띄웁니다. 비교표 CSV는 모든 쌍의 크기, 다른 픽셀 수와 비율, 평균 색 차이, 차이 영역을 표로 저장하고, 모든 차이 이미지 ZIP은 쌍마다 차이 강조 이미지를 묶어 줍니다. 웹 화면 수십 장을 업데이트 전후로 캡처해 한 번에 검수할 때 편합니다.

크기가 다른 두 이미지

A와 B의 크기가 다르면 숫자 카드에 두 크기가 함께 표시됩니다. B를 A 크기로 늘이거나 줄이기는 같은 그림을 다른 해상도로 저장한 경우에 맞고, 왼쪽 위에 맞춰 겹치기는 캡처 범위가 조금 다른 화면처럼 위치를 그대로 두고 비교할 때 맞습니다. 이때 B가 덮지 못하는 곳은 다른 픽셀로 셉니다.

주의할 점

• 사진이 한 픽셀만 밀려도 거의 모든 곳이 다르다고 나옵니다. 같은 위치에서 같은 범위로 캡처한 이미지끼리 비교해야 의미가 있습니다.
• 4천만 화소가 넘는 이미지는 비교하지 않습니다. 휴대폰에서는 그보다 작은 이미지도 메모리가 모자랄 수 있습니다.
• 이미지는 서버로 보내지 않고 이 브라우저 안에서 비교합니다.