이미지 차이 검사기

CSS 조정을 적용했는데 정확히 무엇이 이동되었는지 알고 싶으십니까? QA 시각적 회귀 검사를 위해 두 개의 스크린샷을 비교하시나요? 동일한 사진을 내보낸 두 버전 사이에서 실제로 어떤 변화가 있었는지 궁금하십니까? 두 이미지 사이를 앞뒤로 스크롤하고 차이점을 찾기 위해 눈을 가늘게 뜨는 것은 느리고 신뢰할 수 없습니다. 이 도구는 두 이미지를 오버레이하여 하나의 이미지에서 변경된 모든 픽셀을 보여줍니다.

비교는 pixelmatch와 같은 도구에서 사용되는 것과 동일한 알고리즘 계열인 실제 픽셀 비교 수학입니다. 두 이미지의 모든 픽셀은 RGB에서 YIQ 색상 공간(Y = 루마, I 및 Q = NTSC 색차 축)으로 변환되고 두 YIQ 점 사이의 유클리드 거리가 계산됩니다. 이 거리는 민감도 슬라이더로 설정된 임계값과 비교됩니다. 미묘한 색상 변화를 포착하려면 민감도를 높이고, 압축 노이즈를 무시하고 눈에 띄는 변화에만 주의하려면 민감도를 낮추세요.

순진한 픽셀당 비교는 의미 있는 변경 사항이 없더라도 앤티앨리어싱된 모든 가장자리를 "다른" 것으로 밝힐 것입니다. 스무딩은 소수의 테두리 픽셀을 몇 가지 음영만큼 이동하기 때문입니다. 이 도구는 두 이미지 모두에 대해 실제 앤티앨리어싱 휴리스틱을 실행합니다. 픽셀은 스무딩 그라데이션 내부에 있지 않은 경우에만 실제 차이로 처리됩니다. 구체적으로 소스 이미지 중 하나의 자체 3x3 이웃에 자체보다 더 밝은 픽셀과 더 어두운 픽셀이 모두 포함되어 있지 않은 경우, 이는 실제 콘텐츠가 아닌 AA 스무딩된 가장자리의 지문입니다.

이미지 A와 이미지 B를 업로드하고 필요한 경우 감도를 조정한 후 실행을 누릅니다. 원본의 희미한 버전 위에 밝은 자홍색으로 강조된 모든 실제 변경 사항과 차이점이 있는 픽셀의 정확한 비율을 얻을 수 있습니다. 이를 다운로드하여 버그 보고서나 QA 노트에 바로 첨부하세요. 두 이미지 모두 동일한 크기를 공유해야 합니다. 그렇지 않은 경우 도구는 그 중 하나를 자동으로 자르거나 늘리는 대신 명확하게 알려줍니다. 어떤 시점에서도 브라우저를 떠나는 것은 없습니다.