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

วิธีใช้ตัวตรวจสอบความแตกต่างของรูปภาพ

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

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

เริ่มต้นด้วยการจับคู่ไฟล์พื้นฐานและไฟล์ที่เปลี่ยนแปลงจากฉาก เค้าโครง วิวพอร์ต หรือเวิร์กโฟลว์การส่งออกเดียวกัน

02

เรียกใช้ ไฮไลต์ความต่าง เพื่อการตรวจจับพื้นที่ที่เปลี่ยนแปลง จากนั้นยืนยันผลลัพธ์ในแถบเลื่อน เคียงข้างกัน หรือมุมมองโอเวอร์เลย์

03

ใช้เกณฑ์ พิกเซลที่เปลี่ยนแปลง RMSE และ PSNR เป็นสัญญาณการตรวจสอบ การตัดสินขั้นสุดท้ายยังคงมาจากผลลัพธ์ที่มองเห็นได้

การตรวจสอบพิกเซลสำหรับพื้นที่ที่เปลี่ยนแปลงอย่างแน่นอน

ตัวตรวจสอบความแตกต่างของรูปภาพจะค้นหาความแตกต่างระหว่างรูปภาพสองรูปที่เกี่ยวข้องกัน เหมาะกับการตรวจสอบภาพหน้าจอ UI การตรวจสอบการตกแต่งผลิตภัณฑ์ การตรวจสอบการส่งออกการบีบอัด และการเปลี่ยนแปลงภาพเล็กๆ น้อยๆ ที่อาจพลาดได้ง่ายในแถบเลื่อน

เครื่องมือนี้จะเปรียบเทียบพิกเซลที่ถอดรหัสโดยเบราว์เซอร์บนพื้นที่ทำงานที่ใช้ร่วมกัน พิกเซลจะนับการเปลี่ยนแปลงเมื่อส่วนต่างของช่องสีแดง เขียว น้ำเงิน หรืออัลฟ่าที่ใหญ่ที่สุดเกินเกณฑ์ที่เลือก

ขั้นตอนการทำงาน

ลำดับการตรวจสอบความแตกต่าง

โหลดรูปภาพพื้นฐานก่อน

ใช้ภาพหน้าจอต้นฉบับ ก่อนหน้า หรือการส่งออกข้อมูลอ้างอิงเป็นภาพพื้นฐาน เส้นฐานที่ชัดเจนทำให้มองเห็นการเปลี่ยนแปลงจำนวนพิกเซลได้ง่ายขึ้น

โหลดภาพที่เปลี่ยนแปลงครั้งที่สอง

ใช้ภาพหน้าจอใหม่ รูปภาพที่แก้ไข รูปภาพที่ปรับให้เหมาะสม หรือรูปแบบที่ส่งออกเป็นรูปภาพที่เปลี่ยนแปลง มิติข้อมูลที่ไม่ตรงกันต้องมีการตรวจสอบความสอดคล้องก่อนตรวจสอบเมตริก

เรียกใช้ส่วนต่างไฮไลท์

โหมดไฮไลต์ความต่างจะทำเครื่องหมายบริเวณที่เปลี่ยนไปและเติมการ์ดเมตริก มุมมองแถบเลื่อน เคียงข้างกัน และซ้อนทับช่วยตรวจสอบผลลัพธ์ที่ไฮไลต์ในบริบทของภาพ

จงใจปรับเกณฑ์

เกณฑ์ขั้นต่ำจะทำให้เกิดการเปลี่ยนแปลงเล็กน้อย เกณฑ์ที่สูงกว่าจะไม่สนใจสัญญาณรบกวนจากการบีบอัด การเปลี่ยนแปลงของแสงเล็กน้อย และการลดรอยหยัก อัปเดตส่วนต่างหลังจากเปลี่ยนเกณฑ์

เกณฑ์

วิธีเลือกเกณฑ์ส่วนต่าง

เกณฑ์จะกำหนดจุดตัดความแตกต่างของช่องสัญญาณสำหรับพิกเซลที่เปลี่ยนแปลง ไม่มีคุณค่าที่ดีที่สุดที่เป็นสากล จับคู่ค่ากับงานการตรวจทาน

8

การตรวจสอบ UI ที่เข้มงวด

ลองใช้ 8 สำหรับการเปลี่ยนแปลงภาพหน้าจอเล็กๆ ที่ควรจับได้ชัดเจน

  • ป้ายชื่อปุ่มเปลี่ยนจากบันทึกเป็นนำไปใช้

  • ไอคอนขยับเล็กน้อย ขอบบางหายไป หรือระยะห่างระหว่างข้อความเปลี่ยนไป

ค่านี้ยังสามารถดักจับสัญญาณรบกวนการแสดงผลเล็กๆ น้อยๆ รอบข้อความและขอบได้อีกด้วย

18

รายละเอียดภาพถ่ายที่ดี

ลองใช้ 18 สำหรับการแก้ไขภาพที่มองเห็นได้หลังจากมองอย่างใกล้ชิดเท่านั้น

  • เงาของผลิตภัณฑ์ดูนุ่มนวลขึ้น การรีทัชใบหน้าทำให้มีรอยเล็กๆ น้อยๆ หรือพื้นผิวผ้าเปลี่ยนไป

  • ภาพถ่ายดูเกือบจะเหมือนกัน แต่มีการแก้ไขไฮไลต์ การสะท้อน หรือส่วนสี

ดีสำหรับการทบทวนอย่างใกล้ชิด

32

ค่าเริ่มต้นที่สมดุล

เริ่มต้นด้วย 32 สำหรับการเปรียบเทียบส่วนใหญ่

  • ภาพหน้าจอของหน้า Landing Page มีทั้งข้อความและรูปถ่าย

  • รูปภาพผลิตภัณฑ์ถูกส่งออกอีกครั้ง หรือการดูตัวอย่างจากเครื่องมืออื่นจำเป็นต้องได้รับการตรวจสอบอย่างรวดเร็ว

เลื่อนลงเพื่อการตรวจสอบที่เข้มงวดยิ่งขึ้น และเลื่อนให้สูงขึ้นสำหรับไฟล์ที่มีสัญญาณรบกวนมากขึ้น

64

การเปลี่ยนแปลงที่สำคัญที่มองเห็นได้

ลอง 64 เพื่อมุ่งเน้นไปที่การเปลี่ยนแปลงที่ชัดเจน

  • พื้นหลังถูกแทนที่ วัตถุถูกย้าย การครอบตัดเปลี่ยนไป หรือการเปลี่ยนสีที่รุนแรงปรากฏขึ้น

  • การส่งออก JPEG หรือ WebP มีสัญญาณรบกวนเล็กน้อย แต่การตรวจสอบจะสนใจเฉพาะการเปลี่ยนแปลงที่ผู้คนสังเกตเห็นอย่างรวดเร็วเท่านั้น

ข้อความขนาดเล็ก ไอคอนขนาดเล็ก และเส้นขอบเส้นผมอาจไม่โดดเด่นอีกต่อไป

เมตริก

วิธีอ่านเมตริกความแตกต่างของรูปภาพ

พิกเซลที่เปลี่ยนแปลง

จำนวนพิกเซลแคนวาสที่เทียบเคียงได้ซึ่งสูงกว่าเกณฑ์ปัจจุบัน ค่าขึ้นอยู่กับเกณฑ์และการจัดตำแหน่งเป็นอย่างมาก

เปอร์เซ็นต์พิกเซลที่เปลี่ยนแปลง

พิกเซลที่เปลี่ยนแปลงหารด้วยพิกเซลที่เทียบเคียงทั้งหมด ช่วยเปรียบเทียบการเปรียบเทียบสองครั้งที่มีขนาดรูปภาพหรือพื้นที่ครอบตัดต่างกัน

เดลต้า RGB เฉลี่ย

ความแตกต่างของช่อง RGB สัมบูรณ์โดยเฉลี่ย การเปลี่ยนสีหรือความสว่างแบบกว้างสามารถแสดงได้ที่นี่แม้ว่าจะมีเปอร์เซ็นต์พื้นที่เปลี่ยนแปลงเพียงเล็กน้อยก็ตาม

RMSE

ข้อผิดพลาด RGB เฉลี่ยกำลังสองของรูท ความแตกต่างในท้องถิ่นที่ใหญ่กว่าส่งผลต่อ RMSE มากกว่าความแตกต่างที่กระจัดกระจายเล็กๆ น้อยๆ

PSNR

อัตราส่วนสัญญาณต่อนอยส์ภาพสูงสุด PSNR ที่สูงขึ้นมักจะหมายถึงภาพที่มีสัญญาณ RGB ใกล้เคียงกันมากขึ้น PSNR ที่ต่ำกว่าหมายถึงข้อผิดพลาดที่มองเห็นได้ชัดเจนยิ่งขึ้นหรือสามารถวัดได้

ข้อผิดพลาดทั่วไป

ผลลัพธ์ที่แตกต่างที่ต้องพิจารณาอีกครั้ง

ภาพมีการเลื่อนเล็กน้อย

การปรับค่า 1 พิกเซลอาจทำให้หลายพื้นที่สว่างขึ้น แม้ว่าภาพจะดูเกือบจะเหมือนกันก็ตาม เปิดภาพซ้อนทับและตรวจสอบว่าขอบหลักเรียงกันหรือไม่

ขนาดภาพไม่ตรงกัน

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

นอยส์จากการบีบอัดปรากฏขึ้น

การส่งออก JPEG และ WebP มักจะเพิ่มจุดเล็กๆ บนสีเรียบๆ และขอบ เพิ่มเกณฑ์หากการตรวจสอบเกี่ยวข้องกับการแก้ไขที่มองเห็นได้

ขอบข้อความเปลี่ยนไประหว่างการเรนเดอร์

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

กรณีการใช้งาน

ตรวจสอบงานสำหรับคำแนะนำนี้

การตรวจสอบการถดถอยภาพหน้าจอ UI

การเปรียบเทียบคุณภาพการบีบอัดภาพ

รีวิวรีทัชภาพสินค้า

ก่อนและหลังการตรวจสอบแก้ไข

รูปแบบขนาดเล็กหรือความแตกต่างในการส่งออก

ลองใช้

เปิดเครื่องมือหลังจากอ่านคำแนะนำแล้ว

โหลดรูปภาพพื้นฐานและรูปภาพที่เปลี่ยนแปลง เรียกใช้ ไฮไลต์ความต่าง จากนั้นปรับเกณฑ์จนกระทั่งพื้นที่ที่ไฮไลต์ตรงกับงานตรวจสอบ

เปิดเครื่องมือ

FAQ

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

ฉันควรใช้เกณฑ์ใดในตัวตรวจสอบความแตกต่างของรูปภาพ

เริ่มต้นด้วย 32 สำหรับรีวิวทั่วไป ใช้ 8 สำหรับการตรวจสอบภาพหน้าจอขนาดเดียวกันอย่างเคร่งครัด 18 สำหรับรายละเอียดภาพถ่ายอย่างละเอียด และ 64 สำหรับการเปลี่ยนแปลงที่มองเห็นได้ชัดเจนยิ่งขึ้น

อะไรทำให้เกิดการเปลี่ยนแปลงพิกเซลมากมายในภาพที่คล้ายกัน

การปรับแนวเล็กน้อย การลดรอยหยัก สัญญาณรบกวนจากการบีบอัด ความแตกต่างของโปรไฟล์สี และการเปลี่ยนแปลงแสงเล็กน้อย ทั้งหมดนี้นับเป็นพิกเซลที่เปลี่ยนแปลง ใช้มุมมองซ้อนทับและการปรับเกณฑ์เพื่อทำความเข้าใจผลลัพธ์

RMSE และ PSNR ดีกว่าเปอร์เซ็นต์พิกเซลที่เปลี่ยนแปลงหรือไม่

พวกเขาตอบคำถามอื่น เปอร์เซ็นต์พิกเซลที่เปลี่ยนแปลงจะแสดงจำนวนพื้นที่ที่เกินเกณฑ์ ในขณะที่ RMSE และ PSNR สรุปข้อผิดพลาด RGB ทั่วทั้งผืนผ้าใบที่เทียบเคียงได้

ข้อมูลรูปภาพของฉันปลอดภัยหรือไม่?

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