Χωρίς μεταφόρτωση, 100% τοπικά, χωρίς λογαριασμό

Σύγκριση Εικόνων

Φορτώστε δύο εικόνες και συγκρίνετέ τες με ρυθμιστικό σύρσης ή προβολή δίπλα-δίπλα. Ιδανικό για επεξεργασίες πριν/μετά. Χωρίς μεταφόρτωση.

Πώς λειτουργεί το Ρυθμιστικό σύγκρισης εικόνων

Το Image Comparison Slider σας επιτρέπει να φορτώσετε δύο εικόνες δίπλα δίπλα και να σύρετε έναν κάθετο διαχωριστή για να αποκαλύψετε περισσότερο από τη μία εικόνα και λιγότερο από την άλλη. Αυτή η διάταξη πριν και μετά είναι ένας άμεσος τρόπος με χαμηλή τριβή να δείξετε τη διαφορά μεταξύ δύο εκδόσεων μιας εικόνας. Και οι δύο εικόνες φορτώνονται από τον τοπικό σας δίσκο μέσω του File API και αποδίδονται στην οθόνη από το πρόγραμμα περιήγησης, τίποτα δεν ανεβαίνει σε διακομιστή.

Ο διαχωριστής χρησιμοποιεί μια προσέγγιση CSS clip-path ώστε η μετάβαση μεταξύ των δύο εικόνων να είναι πάντα ευθυγραμμισμένη στα εικονοστοιχεία και να μην υπάρχει ανάμειξη ή παρεμβολή στο όριο. Μπορείτε επίσης να αλλάξετε σε προβολή διαχωρισμένης οθόνης που δείχνει τις δύο εικόνες σε σταθερούς αριστερούς και δεξιούς πίνακες. Το εργαλείο είναι χρήσιμο για τη σύγκριση επεξεργασιών φωτογραφιών, αποτελεσμάτων συμπίεσης, επαναλήψεων σχεδίασης ή οποιωνδήποτε δύο εικόνων όπου χρειάζεται να δείτε τις διαφορές καθαρά.

Συγγραφή από Bastien Sulyan

Ρυθμιστικό σύγκρισης εικόνων: οδηγός βήμα προς βήμα

  1. Ρίξτε την πρώτη εικόνα (την έκδοση «πριν») στην αριστερή περιοχή μεταφόρτωσης.
  2. Ρίξτε τη δεύτερη εικόνα (την έκδοση «μετά») στη δεξιά περιοχή μεταφόρτωσης.
  3. Σύρετε τον διαχωριστή αριστερά και δεξιά για να αποκαλύψετε περισσότερο από τη μία εικόνα κάθε φορά.
  4. Αλλάξτε σε προβολή διαχωρισμού για να δείτε και τις δύο εικόνες σε σταθερούς πίνακες αν προτιμάτε μια στατική σύγκριση.
  5. Χρησιμοποιήστε το κουμπί πλήρους οθόνης για να μεγιστοποιήσετε τη σύγκριση για λεπτομερή επιθεώρηση.

Συνήθεις περιπτώσεις χρήσης

  • Ένας φωτογράφος συγκρίνει την αρχική εξαγωγή RAW με μια ρετουσαρισμένη έκδοση για να αξιολογήσει πόσο άλλαξε η επεξεργασία την εικόνα.
  • Ένας προγραμματιστής ελέγχει ένα ζεύγος συμπιεσμένων εικόνων πριν και μετά για να εκτιμήσει αν η απώλεια ποιότητας σε δεδομένο επίπεδο συμπίεσης είναι αποδεκτή.
  • Ένας σχεδιαστής UX παρουσιάζει έναν επανασχεδιασμό διεπαφής τοποθετώντας το στιγμιότυπο της παλιάς διεπαφής αριστερά και τη νέα δεξιά για αξιολόγηση από ενδιαφερόμενους.
  • Ένας επιμελητής περιεχομένου επαληθεύει ότι μια επεξεργασία εικόνας (διαβάθμιση χρώματος, περικοπή) είναι συνεπής μεταξύ μιας μικρογραφίας και μιας έκδοσης πλήρους μεγέθους.

Συχνές ερωτήσεις

Χρειάζεται οι δύο εικόνες να έχουν το ίδιο μέγεθος;

Το εργαλείο λειτουργεί καλύτερα όταν και οι δύο εικόνες έχουν τις ίδιες διαστάσεις, επειδή ο διαχωριστής τις επικαλύπτει ακριβώς. Αν οι εικόνες διαφέρουν σε μέγεθος, το εργαλείο τις κλιμακώνει σε ένα κοινό μέγεθος προβολής. Κάποια κακή ευθυγράμμιση μπορεί να εμφανιστεί στα άκρα αν οι αναλογίες διαστάσεων είναι διαφορετικές.

Στέλνονται οι εικόνες κάπου για να λειτουργήσει η σύγκριση;

Όχι. Και οι δύο εικόνες φορτώνονται από το σύστημα αρχείων σας μέσω του File API και σχεδιάζονται σε στοιχεία Canvas στο πρόγραμμα περιήγησής σας. Η σύγκριση είναι μια λειτουργία απόδοσης από την πλευρά του πελάτη. Καμία εικόνα δεν φεύγει από τη συσκευή σας.

Μπορώ να συγκρίνω εικόνες από δύο διαφορετικές διευθύνσεις URL αντί για τοπικά αρχεία;

Το τρέχον εργαλείο δέχεται μόνο τοπικά αρχεία. Η φόρτωση εικόνων από απομακρυσμένες διευθύνσεις URL θα απαιτούσε από το πρόγραμμα περιήγησης να τις ανακτήσει και θα υπόκειτο σε περιορισμούς CORS που πολλοί κεντρικοί υπολογιστές εικόνων δεν επιτρέπουν.

Υπάρχει μέγιστο μέγεθος εικόνας που μπορεί να χειριστεί η σύγκριση;

Το όριο είναι η μνήμη Canvas του προγράμματος περιήγησής σας. Εικόνες έως περίπου 20 megapixel η καθεμία χειρίζονται χωρίς πρόβλημα στις περισσότερες επιτραπέζιες συσκευές. Πολύ μεγάλες εικόνες μπορεί να επιβραδύνουν την απόδοση ή να προκαλέσουν σφάλμα μνήμης σε υλικό χαμηλών δυνατοτήτων.

Μπορώ να αποθηκεύσω ένα στιγμιότυπο μιας συγκεκριμένης θέσης του διαχωριστή;

Το εργαλείο στιγμιότυπων του λειτουργικού σας συστήματος (ή η λειτουργία στιγμιότυπου του προγράμματος περιήγησης στα DevTools) είναι ο απλός τρόπος να αποτυπώσετε μια συγκεκριμένη θέση του διαχωριστή. Η ίδια η προβολή σύγκρισης δεν διαθέτει ενσωματωμένο κουμπί εξαγωγής για μια συγχωνευμένη εικόνα.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία εικόνας