ตัวตรวจสอบความแตกต่างของรูปภาพ

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

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

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

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