Αποκωδικοποιητής Base64 Εικόνων | Αποκωδικοποίηση & Προεπισκόπηση Εικόνων Online

Τι είναι ένας αποκωδικοποιητής εικόνων base64;

Ένας αποκωδικοποιητής εικόνων base64 είναι ένα εργαλείο που μετατρέπει μια συμβολοσειρά κειμένου με κωδικοποίηση base64 ξανά σε εικόνα. Το Base64 είναι ένας τρόπος γραφής δυαδικών δεδομένων, όπως τα byte ενός αρχείου εικόνας, χρησιμοποιώντας μόνο 64 απλούς χαρακτήρες κειμένου (γράμματα, ψηφία, +, / και = για συμπλήρωση). Τα προγράμματα περιήγησης, τα email και πολλά API αποθηκεύουν τις εικόνες με αυτόν τον τρόπο, ώστε μια εικόνα να μπορεί να μεταφερθεί μέσα σε απλό κείμενο αντί ως ξεχωριστό αρχείο. Ο αποκωδικοποιητής αντιστρέφει αυτή τη διαδικασία: επικολλάτε τη συμβολοσειρά και εμφανίζεται η αρχική εικόνα.

Η μορφή URL δεδομένων

Στον ιστό, μια εικόνα base64 γράφεται συνήθως ως URL δεδομένων. Το μοτίβο είναι:

Για παράδειγμα:

Κάθε μέρος έχει έναν ρόλο:

• Το data: δηλώνει ότι πρόκειται για URL δεδομένων και όχι για κανονική διεύθυνση ιστού.
• Το image/png είναι ο τύπος MIME, ο οποίος ενημερώνει το πρόγραμμα περιήγησης για το είδος του αρχείου.
• Το ;base64 δηλώνει ότι τα δεδομένα μετά το κόμμα έχουν κωδικοποίηση base64.
• Ό,τι βρίσκεται μετά το κόμμα είναι η ίδια η κωδικοποιημένη εικόνα.

Πώς λειτουργεί ο αποκωδικοποιητής

Η αποκωδικοποίηση γίνεται σε τέσσερα βήματα.

1. Το εργαλείο ελέγχει αν η συμβολοσειρά αρχίζει με data:. Ένα URL δεδομένων που δηλώνει τύπο μέσου διαφορετικό από εικόνα, όπως data:text/plain, απορρίπτεται αμέσως, επειδή δεν μπορεί να εμφανιστεί ως εικόνα.
2. Αφαιρεί τυχόν κενά, στηλοθέτες ή αλλαγές γραμμής, καθώς οι μεγάλες συμβολοσειρές base64 μερικές φορές εκτείνονται σε πολλές γραμμές. Ένα φορτίο που χρησιμοποιεί κωδικοποίηση ποσοστού αντί για base64, την οποία επιτρέπει επίσης το RFC 2397, μεταβιβάζεται χωρίς αλλαγές.
3. Αποκωδικοποιεί το κείμενο base64 ξανά σε ακατέργαστα byte.
4. Εξετάζει τα πρώτα byte του αποτελέσματος. Κάθε συνηθισμένη μορφή εικόνας αρχίζει με μια σταθερή ακολουθία byte, που ονομάζεται υπογραφή ή «μαγικός αριθμός». Τα αρχεία PNG αρχίζουν με 89 50 4E 47, τα αρχεία JPEG με FF D8 FF κ.ο.κ. Ο αποκωδικοποιητής αντιστοιχίζει αυτές τις υπογραφές και αποδίδει στην εικόνα τον τύπο που προσδιορίζουν.

Τα byte υπερισχύουν της ετικέτας. Αν ένα URL δεδομένων δηλώνει data:image/png αλλά τα byte αρχίζουν με FF D8 FF, ο αποκωδικοποιητής αναδημιουργεί το URL ως data:image/jpeg, ώστε η συμβολοσειρά που παρέχει το κουμπί «Αντιγραφή URL εικόνας» να μην περιγράφει ποτέ εσφαλμένα το ίδιο το περιεχόμενό της.

Αν η συμβολοσειρά δεν έχει πρόθεμα data:, ο αποκωδικοποιητής τη θεωρεί ακατέργαστα δεδομένα base64, την αποκωδικοποιεί και διαβάζει την υπογραφή με τον ίδιο τρόπο. Αν τα byte δεν αντιστοιχούν σε καμία γνωστή υπογραφή εικόνας και δεν μοιάζουν με κείμενο SVG, ο αποκωδικοποιητής αναφέρει ότι η συμβολοσειρά δεν φαίνεται να είναι εικόνα. Δεν μαντεύει τη μορφή ούτε χρησιμοποιεί κάποιον προεπιλεγμένο τύπο.

Το SVG αντιμετωπίζεται διαφορετικά, επειδή είναι μορφή κειμένου (XML) και όχι δυαδική, επομένως δεν έχει σταθερή υπογραφή byte. Ο αποκωδικοποιητής ελέγχει τα πρώτα 1024 byte του αποκωδικοποιημένου κειμένου για ετικέτα <svg, για δήλωση XML όπως η <?xml version="1.0"?> που ακολουθείται από μία, ή για δήλωση τύπου εγγράφου SVG που ακολουθείται από μία. Ένα σημάδι σειράς byte στην αρχή, το οποίο ορισμένοι επεξεργαστές προσθέτουν σε αρχεία UTF-8, αγνοείται. Επειδή το SVG δεν μπορεί να αναγνωριστεί από υπογραφή byte, ένα URL δεδομένων που δηλώνει image/svg+xml διατηρεί τον τύπο που δηλώνει.

Τύπος μεγέθους εικόνας base64

Το Base64 μετατρέπει κάθε 3 byte δυαδικών δεδομένων σε 4 χαρακτήρες κειμένου. Ο τύπος υπολογισμού του κωδικοποιημένου μήκους είναι:

Τα σύμβολα ⌈ ⌉ σημαίνουν «στρογγυλοποίηση προς τα πάνω στον επόμενο ακέραιο», επειδή το base64 λειτουργεί πάντα σε ομάδες των 4 χαρακτήρων και συμπληρώνει μια εναπομείνασα ομάδα με σύμβολα =.

Για μεγάλα αρχεία αυτό αντιστοιχεί περίπου σε αύξηση μεγέθους 33%, επειδή 4 ÷ 3 ≈ 1,33. Τα μικρά αρχεία μπορεί να εμφανίζουν μεγαλύτερη ποσοστιαία αύξηση, επειδή η στρογγυλοποίηση προς τα πάνω στην επόμενη ομάδα των 4 χαρακτήρων έχει μεγαλύτερη επίδραση όταν τα αρχικά δεδομένα είναι λίγα.

Λυμένο παράδειγμα

Το παραπάνω παράδειγμα PNG αποκωδικοποιείται σε 85 byte δεδομένων εικόνας. Χρησιμοποιώντας τον τύπο:

Η συμβολοσειρά base64 έχει πράγματι μήκος 116 χαρακτήρων, όπως αναμένεται. Αυτό είναι αύξηση 36% σε σχέση με τα αρχικά 85 byte (116 ÷ 85 ≈ 1,36), λίγο πάνω από το ποσοστό 33%, επειδή το αρχείο είναι τόσο μικρό.

Υποστηριζόμενες μορφές εικόνας

Ο αποκωδικοποιητής διαβάζει την υπογραφή byte των αποκωδικοποιημένων δεδομένων για να αναγνωρίσει τη μορφή. Αναγνωρίζει τους εξής τύπους:

Πώς αποκωδικοποιείται μια εικόνα base64

1. Αντιγράψτε τη συμβολοσειρά base64, με ή χωρίς το πρόθεμα data:image/..., από HTML, CSS, μια απόκριση API ή ένα email.
2. Επικολλήστε τη στο πλαίσιο εισόδου.
3. Η εικόνα αποκωδικοποιείται αυτόματα λίγο μετά τη διακοπή της πληκτρολόγησης ή με το πάτημα του κουμπιού αποκωδικοποίησης.
4. Η αποκωδικοποιημένη εικόνα εμφανίζεται στην περιοχή προεπισκόπησης. Το URL δεδομένων της μπορεί να αντιγραφεί με το κουμπί «Αντιγραφή URL εικόνας», ενώ η ίδια η εικόνα μπορεί να αποθηκευτεί με δεξί κλικ πάνω της στην προεπισκόπηση και επιλογή αποθήκευσης, καθώς αποδίδεται ως κανονικό στοιχείο εικόνας στο πρόγραμμα περιήγησης.

Συνήθεις χρήσεις των εικόνων base64

• Ενσωμάτωση σε HTML, CSS ή JavaScript: η τοποθέτηση των δεδομένων της εικόνας απευθείας στον κώδικα αποφεύγει ένα ξεχωριστό αίτημα αρχείου.
• Πρότυπα email: ορισμένα προγράμματα email αποκλείουν από προεπιλογή εικόνες με εξωτερικούς συνδέσμους, αλλά μια ενσωματωμένη εικόνα base64 εξακολουθεί να εμφανίζεται.
• Εργαλεία HTML σε ένα μόνο αρχείο: μια ολόκληρη σελίδα, μαζί με τις εικόνες της, μπορεί να διανεμηθεί ως ένα αυτοτελές αρχείο.
• Αποκρίσεις API: μια εικόνα μπορεί να μεταφερθεί μέσα σε ένα φορτίο JSON αντί να χρειάζεται δικό της endpoint.
• Φόντα και εικονίδια CSS: μικρά εικονίδια γράφονται μερικές φορές απευθείας σε ένα φύλλο στυλ ως URL δεδομένων.

Αντισταθμίσεις των εικόνων base64

Η κωδικοποίηση base64 είναι πρακτική, αλλά έχει κόστος:

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

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

Τι είναι ένας αποκωδικοποιητής εικόνων base64;

Είναι ένα εργαλείο που μετατρέπει μια συμβολοσειρά κειμένου με κωδικοποίηση base64 ξανά σε ορατή εικόνα, όπως αρχείο PNG, JPEG, GIF, WebP, BMP ή SVG.

Πώς αποκωδικοποιώ μια εικόνα base64;

Επικολλήστε τη συμβολοσειρά base64, με ή χωρίς πρόθεμα data:image/..., στον αποκωδικοποιητή. Θα διαβάσει τη συμβολοσειρά, θα την αποκωδικοποιήσει και θα εμφανίσει την εικόνα που προκύπτει.

Μπορεί να αποκωδικοποιηθεί μια συμβολοσειρά base64 χωρίς το πρόθεμα URL δεδομένων;

Ναι. Ο αποκωδικοποιητής τη θεωρεί ακατέργαστα δεδομένα base64, αποκωδικοποιεί τα byte και διαβάζει τα πρώτα byte για να αναγνωρίσει τη μορφή από την υπογραφή της, όπως PNG, JPEG, GIF, WebP, BMP ή ICO. Το SVG αναγνωρίζεται με αναζήτηση ετικέτας <svg στο αποκωδικοποιημένο κείμενο. Αν δεν ταιριάζει κανένα από αυτά, ο αποκωδικοποιητής αναφέρει ότι η συμβολοσειρά δεν φαίνεται να είναι εικόνα, αντί να μαντέψει τη μορφή.

Γιατί δεν αποκωδικοποιείται η εικόνα base64 μου;

Τρεις αιτίες καλύπτουν τις περισσότερες περιπτώσεις. Η συμβολοσειρά μπορεί να περιέχει χαρακτήρες εκτός του τυπικού αλφαβήτου base64, δηλαδή A–Z, a–z, 0–9, +, / και =· η παραλλαγή base64url που χρησιμοποιείται σε ορισμένα διακριτικά ιστού γράφει αντί γι’ αυτά - και _ και δεν γίνεται αποδεκτή. Η συμβολοσειρά μπορεί να έχει περικοπεί στη μέση, αφήνοντας μήκος κατά ένα μεγαλύτερο από πολλαπλάσιο του τέσσερα, κάτι που δεν έχει ποτέ μια έγκυρη συμβολοσειρά base64. Ή τα byte μπορεί απλώς να μην ανήκουν σε μία από τις υποστηριζόμενες μορφές εικόνας. Η απουσία συμπλήρωσης = από μόνη της δεν αποτελεί πρόβλημα, ενώ τα κενά και οι αλλαγές γραμμής αφαιρούνται πριν από την αποκωδικοποίηση.

Είναι η κωδικοποίηση base64 μορφή ασφάλειας ή κρυπτογράφησης;

Όχι. Το Base64 είναι απλώς ένας τρόπος αναπαράστασης byte ως κείμενο· δεν αποκρύπτει τίποτα. Οποιοσδήποτε μπορεί να αποκωδικοποιήσει μια συμβολοσειρά base64 σε λίγα δευτερόλεπτα με ένα δωρεάν εργαλείο, επομένως δεν πρέπει ποτέ να χρησιμοποιείται για την προστασία ιδιωτικών εικόνων ή άλλων δεδομένων.

Πόσο μεγαλύτερη είναι μια συμβολοσειρά base64 από την αρχική εικόνα;

Περίπου κατά ένα τρίτο μεγαλύτερη για μεγάλα αρχεία, καθώς κάθε 3 byte των αρχικών δεδομένων γίνεται 4 χαρακτήρες κειμένου. Μια εικόνα 100 KB γίνεται περίπου 133 KB μετά την κωδικοποίηση. Οι μικρές εικόνες μπορεί να εμφανίζουν κάπως μεγαλύτερη ποσοστιαία αύξηση λόγω της στρογγυλοποίησης.

Ιστορία

Το Base64 προήλθε από σχήματα κωδικοποίησης που αναπτύχθηκαν τις δεκαετίες του 1970 και του 1980 για την αποστολή δυαδικών δεδομένων μέσω συστημάτων αλληλογραφίας που χειρίζονταν μόνο απλό κείμενο. Τυποποιήθηκε για το email στο RFC 989 (1987) και αργότερα στο RFC 1421. Η χρήση του για την ενσωμάτωση εικόνων σε ιστοσελίδες έγινε δυνατή όταν το σχήμα URL data: ορίστηκε στο RFC 2397 (1998), και έγινε συχνότερη στα μέσα της δεκαετίας του 2000, καθώς οι προγραμματιστές αναζητούσαν τρόπους περιορισμού των ξεχωριστών αιτημάτων HTTP, ιδιαίτερα σε αργές συνδέσεις κινητής τηλεφωνίας.

Παραπομπές

1. RFC 4648: Οι κωδικοποιήσεις δεδομένων Base16, Base32 και Base64
2. RFC 2397: Το σχήμα URL «data»
3. Τεκμηρίωση MDN Web: URL δεδομένων
4. Πρότυπο WHATWG για την ανίχνευση τύπου MIME