이미지 차이 검사기
두 이미지를 업로드하고 감각적 YIQ 비교와 안티앨리어싱 인식 강조 기능을 통해 픽셀 수준의 시각적 차이를 확인하세요. 모든 과정은 브라우저 내에서 로컬로 처리됩니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
CSS를 수정하고 정확히 무엇이 이동했는지 알고 싶나요? QA 시각 회귀 검증을 위해 스크린샷 두 장을 비교하고 있나요? 같은 사진의 두 버전을 내보낸 후 실제로 변경된 점이 궁금하신가요? 두 이미지를 왔다갔다하며 눈을 가늘게 뜨고 차이를 찾는 것은 느리고 부정확합니다. 이 도구는 두 이미지를 겹쳐서 변경된 모든 픽셀을 하나의 이미지로 보여줍니다.
비교는 pixelmatch 같은 도구가 사용하는 것과 동일한 원리의 실제 픽셀 차이 계산 방식을 사용합니다. 각 이미지의 모든 픽셀을 RGB에서 YIQ 색 공간(Y = 밝기, I 및 Q는 NTSC 색차 축)으로 변환하고, 두 YIQ 지점 간 유클리드 거리를 계산합니다. 그 거리를 감도 슬라이더로 설정된 임계값과 비교합니다. 민감도를 높이면 미세한 색상 변화까지 감지하고, 낮추면 압축 노이즈를 무시하고 명백한 변경 사항만 신경 씁니다.
순진한 픽셀 단위 비교는 안티앨리어싱이 적용된 모든 가장자리를 의미 있는 변경이 없는데도 '다르다'고 표시합니다. 스무딩으로 인해 경계 픽셀 몇 개의 색조가 약간 변하기 때문입니다. 이 도구는 두 이미지 모두에 실제 안티앨리어싱 추론 알고리즘을 적용합니다. 특정 픽셀은 스무딩 그라데이션 내에 위치하지 않은 경우에만 실제 차이로 간주됩니다. 구체적으로, 해당 픽셀의 원본 이미지 3x3 영역 내에 이미 해당 픽셀보다 밝은 픽셀과 어두운 픽셀이 모두 존재하지 않는 경우에만 실제 콘텐츠 변경으로 간주합니다. 이는 안티앨리어싱이 적용된 가장자리의 특징입니다.
이미지 A와 이미지 B를 업로드하고, 필요시 감도를 조절한 다음 실행을 누르세요. 서로 다른 픽셀의 정확한 비율과 모든 실제 변경 사항을 원본 위에 밝은 자홍색으로 강조한 차이 이미지를 받게 됩니다. 이를 다운로드하여 버그 보고서나 QA 노트에 바로 첨부하세요. 두 이미지는 동일한 해상도여야 합니다. 그렇지 않으면 도구가 이미지를 임의로 자르거나 늘이지 않고 명확하게 알려줍니다. 어떤 데이터도 브라우저를 떠나지 않습니다.