Συγκριτής Εικόνων
Ανεβάστε δύο εικόνες και δείτε μια οπτική διαφορά με ακρίβεια pixel, με αντιληπτική σύγκριση YIQ και επισήμανση με επίγνωση anti-aliasing — 100% τοπικά στον browser σας.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Κάνατε μια μικροαλλαγή στο CSS και θέλετε να μάθετε ακριβώς τι μετακινήθηκε; Συγκρίνετε δύο στιγμιότυπα οθόνης για οπτικό έλεγχο παλινδρόμησης στο QA; Αναρωτιέστε τι πραγματικά άλλαξε ανάμεσα σε δύο εξαγόμενες εκδόσεις της ίδιας φωτογραφίας; Το να πηγαίνετε μπρος-πίσω ανάμεσα σε δύο εικόνες προσπαθώντας να εντοπίσετε διαφορές είναι αργό και αναξιόπιστο — αυτό το εργαλείο επικαλύπτει τις δύο εικόνες και σας δείχνει κάθε αλλαγμένο pixel σε μία εικόνα.
Η σύγκριση βασίζεται σε πραγματικά μαθηματικά σύγκρισης pixel, την ίδια οικογένεια αλγορίθμων που χρησιμοποιούν εργαλεία όπως το pixelmatch: κάθε pixel και των δύο εικόνων μετατρέπεται από RGB στον χρωματικό χώρο YIQ (Y = φωτεινότητα, I και Q = οι χρωματικοί άξονες του NTSC) και υπολογίζεται η Ευκλείδεια απόσταση ανάμεσα στα δύο σημεία YIQ. Αυτή η απόσταση συγκρίνεται με ένα κατώφλι που ορίζεται από το slider ευαισθησίας — αυξήστε την ευαισθησία για να εντοπίσετε ανεπαίσθητες χρωματικές αλλαγές, μειώστε την για να αγνοήσετε τον θόρυβο συμπίεσης και να εστιάσετε μόνο στις εμφανείς αλλαγές.
Μια απλοϊκή σύγκριση pixel προς pixel θα φώτιζε κάθε ακμή με anti-aliasing ως «διαφορετική» ακόμα κι όταν δεν άλλαξε τίποτα ουσιαστικό, επειδή η εξομάλυνση μετατοπίζει μια χούφτα συνοριακά pixel κατά μερικές αποχρώσεις. Αυτό το εργαλείο εφαρμόζει έναν πραγματικό ευρετικό αλγόριθμο anti-aliasing και στις δύο εικόνες: ένα pixel αντιμετωπίζεται ως γνήσια διαφορά μόνο αν ΔΕΝ βρίσκεται μέσα σε μια ντεγκραντέ εξομάλυνσης — συγκεκριμένα, αν η γειτονιά 3×3 γύρω του σε οποιαδήποτε από τις δύο αρχικές εικόνες δεν περιέχει ήδη και ένα φωτεινότερο και ένα σκοτεινότερο pixel από το ίδιο, πράγμα που είναι το αποτύπωμα μιας εξομαλυμένης ακμής και όχι πραγματικού περιεχομένου.
Ανεβάστε την Εικόνα Α και την Εικόνα Β, ρυθμίστε την ευαισθησία αν χρειάζεται και πατήστε Εκτέλεση. Λαμβάνετε ένα ακριβές ποσοστό των pixel που διαφέρουν συν μια εικόνα διαφοράς με κάθε πραγματική αλλαγή επισημασμένη σε έντονο magenta πάνω σε μια μειωμένης φωτεινότητας έκδοση της αρχικής — κατεβάστε την και επισυνάψτε την απευθείας στην αναφορά σφαλμάτων ή στις σημειώσεις QA σας. Και οι δύο εικόνες πρέπει να έχουν τις ίδιες διαστάσεις· αν δεν έχουν, το εργαλείο σας ενημερώνει ξεκάθαρα αντί να κόψει ή να τεντώσει σιωπηλά κάποια από αυτές. Τίποτα δεν εγκαταλείπει τον browser σας σε κανένα σημείο.