Πώς να το χρησιμοποιήσετε
- Επιλέξτε Εικόνα → Base64 και διαλέξτε ένα αρχείο εικόνας ή επιλέξτε Base64 → Εικόνα για την αντίστροφη διαδικασία.
- Επιλέξτε την έξοδο που χρειάζεστε: data URL, απλό Base64, ετικέτα img HTML, κανόνα background-image CSS ή Markdown.
- Αντιγράψτε το αποτέλεσμα και επικολλήστε το στον κώδικά σας, σε πρότυπο email ή σε JSON.
- Για αποκωδικοποίηση, επικολλήστε ένα data URL ή απλό Base64. Η εικόνα εμφανίζεται σε προεπισκόπηση και μπορεί να ληφθεί.
Πώς λειτουργεί
Το Base64 αναπαριστά δυαδικά δεδομένα με 64 εκτυπώσιμους χαρακτήρες, έτσι ώστε μια εικόνα να μπορεί να γραφτεί απευθείας μέσα σε μορφές κειμένου. Ένα data URL προσθέτει τον τύπο μέσου στην αρχή, για παράδειγμα data:image/png;base64, ακολουθούμενο από τα κωδικοποιημένα byte. Τα προγράμματα περιήγησης δέχονται data URL οπουδήποτε επιτρέπεται ένα URL εικόνας: στο src μιας ετικέτας img, σε ένα CSS url() ή σε μια αναφορά εικόνας SVG.
Το κωδικοποιημένο κείμενο είναι πάντα περίπου κατά ένα τρίτο μεγαλύτερο από το αρχικό αρχείο (4 χαρακτήρες για κάθε 3 byte). Η ενσωμάτωση μικρών εικονιδίων και προσωρινών εικόνων μπορεί να εξοικονομήσει ένα ξεχωριστό αίτημα δικτύου, αλλά τα ενσωματωμένα δεδομένα δεν μπορούν να αποθηκευτούν προσωρινά μόνα τους και κατεβαίνουν ξανά με κάθε σελίδα ή φύλλο στυλ που τα περιέχει, επομένως σπάνια συμφέρει πάνω από μερικά kilobyte. Πολλά προγράμματα ηλεκτρονικού ταχυδρομείου μπλοκάρουν ή αφαιρούν τις εικόνες data URL, γι' αυτό δοκιμάστε το πριν τις χρησιμοποιήσετε σε ενημερωτικά δελτία.
Το αρχείο κωδικοποιείται byte προς byte: τίποτα δεν επανασυμπιέζεται και τα μεταδεδομένα μέσα στο αρχείο (όπως το EXIF) διατηρούνται. Κατά την αποκωδικοποίηση, το εργαλείο δέχεται ένα πλήρες data URL, απλό Base64, URL-safe Base64 και κείμενο που έχει αντιγραφεί μαζί με ένα περιτύλιγμα CSS url(…). Ο τύπος εικόνας ανιχνεύεται από τα αποκωδικοποιημένα byte και όχι από την ετικέτα.
Παραδείγματα
Μικρό εικονίδιο σε φύλλο στυλ
Ένα εικονίδιο PNG 600 byte γίνεται μια συμβολοσειρά Base64 800 χαρακτήρων. Χρησιμοποιώντας την έξοδο CSS παίρνετε έναν κανόνα background-image που μπορείτε να επικολλήσετε σε μια κλάση χωρίς να φιλοξενήσετε ξεχωριστό αρχείο.
Εικόνα από απάντηση API
Ένα API επιστρέφει ένα πεδίο JSON όπως "iVBORw0KGgoAAAANSUhEUg…". Επικολλήστε το στο Base64 → Image για να δείτε την εικόνα, να ελέγξετε το μέγεθός της και να την κατεβάσετε ως PNG.
Λογότυπο SVG σε HTML
Η κωδικοποίηση ενός SVG δίνει ένα URL data:image/svg+xml;base64 που λειτουργεί σε ετικέτα img. Για SVG, η μη συμπιεσμένη σήμανση SVG είναι συχνά συντομότερη από το Base64, οπότε εξετάστε την απευθείας ενσωμάτωση του SVG.
Συχνές ερωτήσεις
Γιατί η έκδοση Base64 είναι μεγαλύτερη από την εικόνα μου;
Το Base64 χρησιμοποιεί 4 χαρακτήρες κειμένου για την αποθήκευση 3 byte, προσθέτοντας περίπου 33% συν λίγο για το πρόθεμα data URL. Η συμπίεση Gzip ή Brotli σε διακομιστή web μειώνει τη διαφορά αλλά δεν την εξαλείφει.
Αλλάζει ή συμπιέζει η κωδικοποίηση την εικόνα;
Όχι. Κωδικοποιούνται τα ακριβή byte του αρχείου, συμπεριλαμβανομένων τυχόν μεταδεδομένων. Για να κάνετε τη συμβολοσειρά μικρότερη, συμπιέστε ή αλλάξτε πρώτα το μέγεθος της εικόνας.
Ποια είναι η διαφορά μεταξύ ενός data URL και του απλού Base64;
Το απλό Base64 είναι απλώς τα κωδικοποιημένα byte. Ένα data URL προσθέτει ένα πρόθεμα όπως data:image/jpeg;base64, το οποίο λέει στο πρόγραμμα περιήγησης τι είδους αρχείο είναι, ώστε να μπορεί να χρησιμοποιηθεί απευθείας ως πηγή εικόνας.
Υπάρχει όριο μεγέθους;
Εδώ μπορούν να κωδικοποιηθούν αρχεία έως 10 MB. Οι πολύ μεγάλες συμβολοσειρές μπορεί να επιβραδύνουν τα πεδία κειμένου και τους επεξεργαστές, και τόσο μεγάλα data URL δεν είναι πρακτικά σε ιστότοπους.
Απόρρητο
Η κωδικοποίηση και η αποκωδικοποίηση γίνονται στο πρόγραμμα περιήγησής σας. Η εικόνα σας και το κείμενο Base64 δεν μεταφορτώνονται, δεν αποθηκεύονται και δεν περιλαμβάνονται σε αναλυτικά στοιχεία.