इमेज डिफ़ चेकर

CSS में कोई बदलाव किया और जानना चाहते हैं कि असल में क्या हिला? QA विज़ुअल-रिग्रेशन जाँच के लिए दो स्क्रीनशॉट की तुलना कर रहे हैं? सोच रहे हैं कि एक ही फ़ोटो के दो एक्सपोर्टेड वर्ज़न के बीच वास्तव में क्या बदला? दो इमेज के बीच बार-बार स्क्रॉल करके अंतर ढूँढना धीमा और अविश्वसनीय है — यह टूल दोनों को ओवरले करके हर बदले हुए पिक्सेल को एक ही इमेज में दिखाता है।

तुलना वास्तविक पिक्सेल-डिफ़िंग गणित है, वही एल्गोरिदम परिवार जो pixelmatch जैसे टूल इस्तेमाल करते हैं: दोनों इमेज का हर पिक्सेल RGB से YIQ कलर स्पेस में बदला जाता है (Y = लूमा, I और Q = NTSC क्रोमिनेंस अक्ष), और दोनों YIQ बिंदुओं के बीच यूक्लिडियन दूरी की गणना होती है। उस दूरी की तुलना सेंसिटिविटी स्लाइडर द्वारा तय थ्रेशोल्ड से की जाती है — सूक्ष्म रंग-परिवर्तन पकड़ने के लिए सेंसिटिविटी बढ़ाएँ, कम्प्रेशन शोर को अनदेखा कर केवल स्पष्ट बदलावों पर ध्यान देने के लिए घटाएँ।

एक सामान्य प्रति-पिक्सेल तुलना हर एंटी-एलियास्ड किनारे को "अलग" दिखा देती, भले ही असल में कुछ सार्थक न बदला हो, क्योंकि चिकनाई कुछ ही बॉर्डर पिक्सेल को हल्के शेड्स से बदल देती है। यह टूल दोनों इमेज पर एक वास्तविक एंटी-एलियासिंग ह्यूरिस्टिक चलाता है: कोई पिक्सेल तभी वास्तविक अंतर माना जाता है जब वह किसी स्मूदिंग ग्रेडिएंट के अंदर न हो — स्पष्ट रूप से, यदि किसी भी स्रोत इमेज में उसके अपने 3×3 पड़ोस में पहले से ही उससे हल्का और गहरा दोनों पिक्सेल मौजूद न हों, जो वास्तविक सामग्री के बजाय AA-स्मूद किनारे की पहचान है।

इमेज A और इमेज B अपलोड करें, ज़रूरत हो तो सेंसिटिविटी एडजस्ट करें और Execute दबाएँ। आपको भिन्न पिक्सेल का सटीक प्रतिशत और एक डिफ़ इमेज मिलती है जिसमें हर वास्तविक परिवर्तन चमकीले मैजेंटा में, मूल इमेज के धुँधले संस्करण के ऊपर हाइलाइट होता है — इसे डाउनलोड करें और सीधे अपनी बग रिपोर्ट या QA नोट्स में संलग्न करें। दोनों इमेज के आयाम समान होने चाहिए; यदि नहीं हैं, तो टूल किसी एक को चुपचाप क्रॉप या स्ट्रेच करने के बजाय साफ़ बता देता है। किसी भी समय कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।