Η Αντικατάσταση Εικόνας σάς επιτρέπει να κάνετε κλικ σε οποιαδήποτε εικόνα μιας ιστοσελίδας και να την αντικαταστήσετε με τη δική σας — είτε ανεβάζοντας τοπικό αρχείο είτε επικολλώντας URL εικόνας. Η αντικατάσταση ταιριάζει τέλεια στις διαστάσεις του αρχικού στοιχείου, διατηρώντας τη διάταξη σελίδας. Δοκιμάστε πώς φαίνονται νέα assets σε πλαίσια παραγωγής, δημιουργήστε mockups με πραγματικό περιεχόμενο ή λάβετε screenshots με προσαρμοσμένες εικόνες.
Οι σχεδιαστές και προγραμματιστές συχνά χρειάζονται να δουν πώς θα φαινόταν μια νέα εικόνα σε υπάρχουσα διάταξη. Θα λειτουργεί η νέα εικόνα hero με την τρέχουσα επικάλυψη κειμένου; Φαίνεται σωστά η νέα φωτογραφία προϊόντος στο υπάρχον grid καρτών; Είναι το λογότυπο του πελάτη το σωστό μέγεθος για την κεφαλίδα; Κανονικά, η απάντηση αυτών των ερωτήσεων απαιτεί επεξεργασία κώδικα, εναλλαγή αρχείων εικόνας, επανακατασκευή και προεπισκόπηση. Η Αντικατάσταση Εικόνας το κάνει άμεσο — κάντε κλικ στην εικόνα που θέλετε να αλλάξετε, ανεβάστε αντικατάσταση ή επικολλήστε URL, και η εικόνα αντικαθίσταται αμέσως διατηρώντας τις αρχικές διαστάσεις και στυλ του στοιχείου. Η διάταξη δεν μετακινείται, τα γειτονικά στοιχεία παραμένουν στη θέση τους.
Τοποθετήστε τον δείκτη πάνω από εικόνες στη σελίδα για να τις δείτε επισημασμένες. Κάντε κλικ για επιλογή της εικόνας που θέλετε να αντικαταστήσετε. Το εργαλείο αναγνωρίζει img elements, CSS background-image elements και picture/source elements.
Σύρετε και αποθέστε αρχείο εικόνας από τον υπολογιστή σας ή κάντε κλικ για άνοιγμα επιλογέα αρχείων. Υποστηρίζει μορφές PNG, JPG, WebP, SVG και GIF. Το αρχείο φορτώνεται τοπικά — ποτέ δεν ανεβαίνει σε κάποιον server.
Έχετε εικόνα hosted αλλού; Επικολλήστε το URL και εφαρμόζεται αμέσως. Λειτουργεί με οποιοδήποτε δημοσίως προσβάσιμο URL εικόνας — Unsplash, Imgur, το CDN σας, S3 buckets ή οποιοδήποτε άμεσο σύνδεσμο εικόνας.
Η εικόνα αντικατάστασης γεμίζει τις διαστάσεις του αρχικού στοιχείου χρησιμοποιώντας object-fit, οπότε η διάταξη σελίδας παραμένει ακριβώς η ίδια. Χωρίς μετατοπίσεις διάταξης, χωρίς αναδιατάξεις, χωρίς σπασμένα grids.
Ένας πλαϊνός πίνακας παρακολουθεί όλες τις εικόνες που έχετε αντικαταστήσει στην τρέχουσα συνεδρία. Δείτε αρχικό έναντι αντικατάστασης με μια ματιά, και κάντε κλικ σε οποιαδήποτε καταχώριση ιστορικού για αναίρεση αυτής της συγκεκριμένης αντικατάστασης.
Όλες οι αντικαταστάσεις υπάρχουν μόνο στη μνήμη browser. Τα πραγματικά αρχεία εικόνων και HTML της σελίδας δεν τροποποιούνται ποτέ. Ανανεώστε τη σελίδα για άμεση επαναφορά κάθε αρχικής εικόνας. Ασφαλές για χρήση σε οποιοδήποτε ιστότοπο.
Η ομάδα σας έχει τρεις υποψήφιες εικόνες hero για την αρχική σελίδα. Αντί να αναπτύσσετε την καθεμία, ανοίξτε τον ιστότοπο παραγωγής και αντικαταστήστε την εικόνα hero με κάθε υποψήφια. Δείτε πώς φαίνεται η καθεμία με την πραγματική επικάλυψη κειμένου και γραμμή πλοήγησης.
Κατά τη διάρκεια κλήσης με πελάτη, αντικαταστήστε τις placeholder εικόνες σε staging site με τις πραγματικές φωτογραφίες προϊόντων ή brand assets του πελάτη. Δείξτε τους ακριβώς πώς θα φαίνεται το περιεχόμενό τους στο τελικό σχεδίασμα — ζωντανά, στον browser.
Χρειάζεστε screenshots που δείχνουν διαφορετικό περιφερειακό περιεχόμενο; Αντικαταστήστε εικόνες προϊόντων, φωτογραφίες ομάδας ή γραφικά χαρακτηριστικών με εκδόσεις ειδικές για περιοχή και λάβετε screenshots για κάθε αγορά — χωρίς ξεχωριστές αναπτύξεις.
Εξερευνάτε πώς θα φαινόταν διαφορετικό στυλ εικονογράφησης ή φωτογραφική προσέγγιση σε υπάρχουσα σελίδα. Αντικαταστήστε εικόνες μία-μία για να δημιουργήσετε οπτικό πρωτότυπο της νέας κατεύθυνσης σχεδίασης χωρίς να αγγίξετε κώδικα.
Αντικαταστήστε ένα JPG με έκδοση WebP για οπτική επαλήθευση ότι η ποιότητα είναι αποδεκτή. Ή ανταλλάξτε με εικόνα υψηλότερης ανάλυσης για να ελέγξετε αν η διάταξη χειρίζεται σωστά εικόνες 2x. Δοκιμάστε οπτικά αλλαγές μορφής εικόνας πριν δεσμευτείτε σε μετατροπές αρχείων.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Αντικατάστασης Εικόνας. Το εργαλείο ενεργοποιείται και οι εικόνες στη σελίδα γίνονται κλικαριστοί στόχοι, επισημασμένοι στο hover.
Κάντε κλικ σε οποιαδήποτε εικόνα στη σελίδα. Εμφανίζεται διάλογος αντικατάστασης που δείχνει τις τρέχουσες πληροφορίες εικόνας (όνομα αρχείου, διαστάσεις, μέγεθος) και επιλογές για μεταφόρτωση ή επικόλληση URL.
Σύρετε και αποθέστε αρχείο από τον υπολογιστή σας, κάντε κλικ για αναζήτηση ή επικολλήστε URL εικόνας. Η αντικατάσταση εφαρμόζεται αμέσως και η εικόνα αντικαθίσταται στη θέση της.
Δείτε πώς φαίνεται η νέα εικόνα μέσα στην πραγματική διάταξη σελίδας. Ελέγξτε ότι λειτουργεί με επικαλύψεις κειμένου, ταιριάζει σωστά στο container και ταιριάζει με το γύρω περιεχόμενο.
Κάντε κλικ σε άλλες εικόνες για να συνεχίσετε αντικαταστάσεις. Το πλαϊνό ιστορικό παρακολουθεί όλες τις αλλαγές. Όταν τελειώσετε, ανανεώστε τη σελίδα για επαναφορά όλων των αρχικών εικόνων.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
