בודק הבדל תמונה

נשלח תיקון CSS ורוצה לדעת בדיוק מה זז? משווה שני צילומי מסך לבדיקת רגרסיה ויזואלית של QA? תוהה מה בעצם השתנה בין שתי גרסאות מיוצאות של אותה תמונה? גלילה קדימה ואחורה בין שתי תמונות ופזילה להבדלים היא איטית ולא אמינה - כלי זה מכסה את השתיים ומראה לך כל פיקסל שהשתנה בתמונה אחת.

ההשוואה היא מתמטיקה אמיתית בעלת הבדל פיקסלים, אותה משפחת אלגוריתמים המשמשת כלים כמו pixelmatch: כל פיקסל של שתי התמונות מומר מ-RGB למרחב צבעוני YIQ (Y = luma, I ו-Q = צירי הכרומינציה של NTSC), והמרחק האוקלידי בין שתי נקודות ה-YIQ מחושב. המרחק הזה מושווה לסף שנקבע על ידי מחוון הרגישות - העלה את הרגישות כדי לתפוס שינויי צבע עדינים, הורד אותה כדי להתעלם מרעשי דחיסה ודאג רק לשינויים ברורים.

השוואה נאיבית לפיקסל תאיר כל קצה מנוגד כ"שונה" גם כאשר שום דבר משמעותי לא השתנה, מכיוון שהחלקה מזיזה קומץ פיקסלים גבול בכמה גוונים. הכלי הזה מפעיל היוריסטיקה אמיתית נגד היווצרות בשתי התמונות: פיקסל מטופל רק כהבדל אמיתי אם הוא לא יושב בתוך שיפוע החלקה - באופן קונקרטי, אם שכונת 3x3 משלו בשתי תמונת המקור אינה מכילה כבר פיקסל בהיר יותר וכהה יותר ממנו, שהיא טביעת האצבע של קצה מוחלק AA ולא תוכן בפועל.

העלה תמונה א' ותמונה ב', התאם את הרגישות במידת הצורך ולחץ על ביצוע. אתה מקבל אחוז מדויק של פיקסלים שונים בתוספת תמונת הבדל, כאשר כל שינוי אמיתי מודגש במגנטה בהיר על פני גרסה מעומעמת של המקור - הורד אותו וצרף אותו ישר לדוח הבאגים שלך או להערות QA. שתי התמונות חייבות לחלוק את אותם ממדים; אם לא, הכלי אומר לך בפשטות במקום לחתוך או למתוח בשקט אחד מהם. שום דבר לא יוצא מהדפדפן שלך בשום שלב.