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

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

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

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

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