Ακολουθήστε αυτό το παράδειγμα εργασίας και, στη συνέχεια, προσαρμόστε τα ίδια στοιχεία ελέγχου στη δική σας εικόνα. Άνοιγμα Μετατροπέας εικόνας σε Base64.
Επιλέξτε μια εικόνα και κάντε προεπισκόπηση της ταυτότητάς της
Ανοίξτε τον Μετατροπέα Εικόνας σε Base64. Επιλέξτε μια εικόνα ή Δοκιμάστε ένα δείγμα. Το παράδειγμα χρησιμοποιεί το favicon-orbit.png 512 × 512 pixel, το οποίο περιέχει 202,491 byte. Το πρόγραμμα επεξεργασίας εμφανίζει την εικόνα πάνω από τον κώδικά της, ώστε να μπορείτε να επιβεβαιώσετε ότι επιλέξατε το επιδιωκόμενο στοιχείο.
Τα PNG, JPG, WebP, GIF, BMP και AVIF υποστηρίζονται όταν το πρόγραμμα περιήγησής σας μπορεί να τα αποκωδικοποιήσει για προεπισκόπηση. Το μέγιστο μέγεθος αρχείου είναι 25 MB, με όρια 60 megapixel και 16,000 pixel ανά πλευρά. Η σήμανση SVG δεν γίνεται δεκτή από αυτόν τον μετατροπέα ράστερ.
Το εργαλείο διαβάζει τα byte του αρχικού αρχείου. Δεν χρησιμοποιεί την προεπισκόπηση για την αναδόμηση της εικόνας, την αλλαγή μεγέθους ή την επανασυμπίεσή της. Τα υπάρχοντα μεταδεδομένα και το κινούμενο σχέδιο GIF διατηρούνται επομένως στα κωδικοποιημένα δεδομένα.
Πριν από την κωδικοποίηση, χρησιμοποιήστε το Resize Image ή το Image Compressor εάν χρειάζεστε ένα μικρότερο στοιχείο. Το ίδιο το Base64 δεν μειώνει το μέγεθος της εικόνας.
Επιλέξτε την αναπαράσταση που αναμένει το έργο σας
Ανοίξτε τις Ρυθμίσεις και επιλέξτε εικόνα HTML στην ενότητα Μορφή κώδικα για αυτό το παράδειγμα. Το αποτέλεσμα είναι μια ετικέτα img που περιέχει ένα data URL Base64. Το χαρακτηριστικό alt είναι αρχικά κενό· γράψτε χρήσιμο εναλλακτικό κείμενο όταν η εικόνα μεταδίδει πληροφορίες.
Το Data URL ξεκινά με ένα πρόθεμα όπως data:image/png;base64, ακολουθούμενο από τα κωδικοποιημένα δεδομένα. Το Plain Base64 περιέχει μόνο τα δεδομένα. Το φόντο CSS αναδιπλώνει το data URL σε μια δήλωση background-image. Αυτές οι αναπαραστάσεις εξυπηρετούν διαφορετικούς προορισμούς, επομένως αντιγράψτε τη μορφή που ζητά η εφαρμογή σας αντί να αλλάξετε μόνο το όνομα αρχείου.
Ο πίνακας κώδικα ενημερώνεται αμέσως αφού αλλάξετε τη Μορφή κώδικα. Το εικονίδιο αντιγραφής αντιγράφει την τρέχουσα αναπαράσταση και δίνει την κοινόχρηστη επιβεβαίωση αντιγραφής. Όταν η πρόσβαση στο πρόχειρο είναι αποκλεισμένη, ο κώδικας επιλέγεται για χειροκίνητη αντιγραφή.
Μια πλήρης ετικέτα HTML img δεν είναι το ίδιο πράγμα με ένα data URL. Χρησιμοποιήστε μόνο την τιμή src όταν ένα πεδίο ζητά ένα URL.
Το παράδειγμα σε αυτόν τον οδηγό
Δοκιμάστε ένα δείγμα: favicon-orbit.png, 512 × 512 px, 202,491 byte. Επιλέξτε HTML εικόνα στη μορφή Κώδικα. Επιλέξτε Έναρξη και κατεβάστε το favicon-orbit-base64.txt.
- Αρχικό PNG
- 512 × 512 px · 202,491 byte
- Έξοδος κειμένου HTML
- 270,029 byte
- Κωδικοποίηση
- Αρχικά byte· χωρίς επανασυμπίεση
Κατεβάστε τον κώδικα και κατανοήστε το μέγεθός του
Επιλέξτε Έναρξη και μετά Λήψη. Το παράδειγμα αποθηκεύει favicon-orbit-base64.txt που περιέχει HTML κώδικα εικόνας. Τα 270,029 bytes του είναι μεγαλύτερα από την πηγή των 202,491 bytes. Η σύγκριση στο άρθρο δείχνει την πραγματική αρχή του κειμένου λήψης, συντομευμένη μόνο για αναγνωσιμότητα.
Το Base64 μετατρέπει συνήθως τρία bytes πηγής σε τέσσερις χαρακτήρες κειμένου, προσθέτοντας περίπου το ένα τρίτο πριν από το μικρό περίβλημα. Η ενσωμάτωση ενός μικρού εικονιδίου μπορεί να κάνει ένα έγγραφο αυτόνομο, αλλά η τοποθέτηση μεγάλων συμβολοσειρών εικόνας μέσα σε HTML ή CSS επίσης μεγαλώνει αυτό το έγγραφο και εμποδίζει την εικόνα να αποθηκευτεί στην προσωρινή μνήμη ως ξεχωριστό αρχείο.
Η κωδικοποίηση δεν είναι κρυπτογράφηση. Οποιοσδήποτε έχει την πλήρη συμβολοσειρά Base64 μπορεί να ανακτήσει την υποκείμενη εικόνα. Αντιμετωπίστε τον κώδικα με την ίδια προσοχή όπως την πηγή εάν περιέχει προσωπικές πληροφορίες.
Το περικομμένο απόσπασμα σε αυτό το άρθρο είναι επεξηγηματικό. Χρησιμοποιήστε το πλήρες αρχείο TXT που κατεβάσατε ή αντιγράψτε τον πλήρη κώδικα από το εργαλείο.
Συχνές ερωτήσεις
Θα μειώσει η κωδικοποίηση την ποιότητα της εικόνας;
Όχι. Η κωδικοποίηση διατηρεί τα αρχικά byte. Δεν αλλάζει το μέγεθος, δεν συμπιέζει και δεν σχεδιάζει ξανά την εικόνα.
Γιατί η συμβολοσειρά Base64 είναι μεγαλύτερη από την εικόνα;
Το Base64 αντιπροσωπεύει τρία byte εισόδου χρησιμοποιώντας τέσσερις χαρακτήρες κειμένου, επομένως συνήθως προσθέτει περίπου το ένα τρίτο πριν από ένα περιτύλιγμα ή πρόθεμα.
Διατηρούνται τα κινούμενα σχέδια GIF;
Η κωδικοποίηση διατηρεί τα αρχικά bytes GIF, συμπεριλαμβανομένης της κίνησης. Μια προεπισκόπηση μπορεί να δείχνει ένα ακίνητο καρέ, ενώ τα κωδικοποιημένα δεδομένα διατηρούν όλα τα καρέ.
Είναι το Base64 ασφαλές για μυστικές εικόνες;
Το Base64 δεν είναι κρυπτογράφηση. Κρατήστε τη συμβολοσειρά ιδιωτική εάν η υποκείμενη εικόνα είναι ιδιωτική. Ο ίδιος ο μετατροπέας την επεξεργάζεται τοπικά στο πρόγραμμα περιήγησής σας.
Μετατρέψτε τη σωστή εικόνα στον σωστό κώδικα.
Δοκιμάστε ένα δείγμα ή χρησιμοποιήστε το δικό σας αρχείο και ελέγξτε το αποτέλεσμα πριν από την κοινή χρήση.
