เครื่องมือเปรียบเทียบความแตกต่างของภาพ

ปรับแต่ง CSS แล้วอยากรู้แน่ชัดว่าอะไรขยับไปบ้าง? กำลังเปรียบเทียบภาพหน้าจอเพื่อตรวจสอบรีเกรสชันด้านภาพในงาน QA? สงสัยว่ามีอะไรเปลี่ยนไปบ้างระหว่างภาพถ่ายที่ส่งออกมาสองเวอร์ชัน? การเลื่อนกลับไปกลับมาระหว่างสองภาพแล้วเพ่งหาความแตกต่างนั้นช้าและไม่น่าเชื่อถือ — เครื่องมือนี้วางสองภาพซ้อนกันและแสดงทุกพิกเซลที่เปลี่ยนไปในภาพเดียว

การเปรียบเทียบใช้การคำนวณหาผลต่างระดับพิกเซลจริง ซึ่งเป็นอัลกอริทึมกลุ่มเดียวกับที่เครื่องมืออย่าง pixelmatch ใช้: ทุกพิกเซลของทั้งสองภาพจะถูกแปลงจาก RGB ไปเป็นปริภูมิสี YIQ (Y = ความสว่าง, I และ Q = แกนโครมินานซ์ของ NTSC) จากนั้นคำนวณระยะ Euclidean ระหว่างจุด YIQ ทั้งสอง แล้วนำระยะที่ได้ไปเทียบกับค่า threshold ที่ตั้งไว้ผ่านแถบเลื่อนความไว — เพิ่มความไวเพื่อตรวจจับการเปลี่ยนสีเพียงเล็กน้อย ลดความไวเพื่อไม่สนใจสัญญาณรบกวนจากการบีบอัดและสนใจเฉพาะการเปลี่ยนแปลงที่ชัดเจน

การเปรียบเทียบแบบทีละพิกเซลทั่วไปจะทำให้ขอบภาพที่ถูกลบรอยหยักสว่างขึ้นว่า "แตกต่าง" แม้จะไม่มีการเปลี่ยนแปลงที่มีความหมาย เพราะการเกลี่ยสีทำให้พิกเซลริมขอบจำนวนหนึ่งเปลี่ยนไปเพียงไม่กี่เฉด เครื่องมือนี้ใช้การวิเคราะห์แบบฮิวริสติกเพื่อตรวจจับการลบรอยหยักจริงบนทั้งสองภาพ: พิกเซลจะถูกนับว่าเป็นความแตกต่างแท้จริงก็ต่อเมื่อพิกเซลนั้นไม่ได้อยู่ในบริเวณที่มีการเกลี่ยสี — โดยรูปธรรมคือ ถ้าพื้นที่รอบข้างขนาด 3x3 ในภาพต้นฉบับภาพใดภาพหนึ่งไม่มีทั้งพิกเซลที่สว่างกว่าและมืดกว่าตัวมันเอง ซึ่งนั่นคือลักษณะเฉพาะของเส้นขอบที่ถูกลบรอยหยัก ไม่ใช่เนื้อหาจริง

อัปโหลดภาพ A และภาพ B ปรับความไวตามต้องการ แล้วกด Execute คุณจะได้รับเปอร์เซ็นต์ที่แน่นอนของพิกเซลที่แตกต่าง พร้อมภาพผลต่างที่เน้นทุกการเปลี่ยนแปลงที่แท้จริงด้วยสีม่วงแดงสว่างบนภาพต้นฉบับเวอร์ชันลดความสว่าง — ดาวน์โหลดและแนบไปกับรายงานบั๊กหรือบันทึก QA ได้ทันที ภาพทั้งสองต้องมีขนาดเท่ากัน หากไม่เท่ากัน เครื่องมือจะแจ้งให้ทราบตรง ๆ โดยไม่ครอปหรือยืดภาพให้โดยอัตโนมัติ ข้อมูลทุกอย่างไม่เคยออกจากเบราว์เซอร์ของคุณเลย