CodeKitHubΤι είναι αυτό το εργαλείο;
Το Base64 είναι ένας τρόπος αναπαράστασης δυαδικών δεδομένων — όπως τα ακατέργαστα bytes μιας εικόνας — ως απλό κείμενο, χρησιμοποιώντας μόνο γράμματα, ψηφία και λίγα σύμβολα. Επειδή είναι απλό κείμενο, μια εικόνα κωδικοποιημένη σε Base64 μπορεί να ενσωματωθεί απευθείας μέσα σε HTML, CSS ή JSON αντί να αναφέρεται ως ξεχωριστό αρχείο.
Ένα «data URL» τυλίγει αυτό το κείμενο Base64 με ένα μικρό πρόθεμα (data:image/png;base64,) που λέει στο πρόγραμμα περιήγησης τι είδους αρχείο είναι, ώστε να μπορεί να αφεθεί απευθείας σε ένα src ή γνώρισμα url() και να αποδοθεί χωρίς κανένα επιπλέον αίτημα.
Γιατί να το χρησιμοποιήσετε;
- Λάβετε και τις δύο μορφές ταυτόχρονα — το πλήρες data URL για HTML/CSS, και το ακατέργαστο Base64 (χωρίς πρόθεμα) για ενσωμάτωση σε αρχεία JSON ή config.
- Χωρίς μετάβαση σε διακομιστή: εξαλείφει ένα αίτημα HTTP για μικρά εικονίδια, avatar ή ενσωματωμένες εικόνες.
- Διατηρεί τα αρχικά bytes του αρχείου ακριβώς — χωρίς επανακωδικοποίηση ή απώλεια ποιότητας, σε αντίθεση με εργαλεία που αποκωδικοποιούν και αποθηκεύουν ξανά την εικόνα.
- Δείχνει τη διαφορά μεγέθους ώστε να γνωρίζετε τι ανταλλάσσετε για την ευκολία.
- Ιδιωτικό: το αρχείο διαβάζεται τοπικά με το FileReader API του προγράμματος περιήγησης και δεν φεύγει ποτέ από τη συσκευή σας.
Πώς χρησιμοποιείται
- Κάντε κλικ στην περιοχή μεταφόρτωσης ή σύρετε ένα αρχείο εικόνας πάνω της.
- Αντιγράψτε το πλήρες data URL αν το επικολλάτε σε ένα <img src> ή background-image CSS.
- Αντιγράψτε το ακατέργαστο Base64 (χωρίς το πρόθεμα data:) αν το ενσωματώνετε μέσα σε JSON, YAML ή άλλη μορφή config που ήδη γνωρίζει τον τύπο αρχείου.
- Ελέγξτε τη σημείωση μεγέθους — το κείμενο Base64 είναι περίπου κατά ένα τρίτο μεγαλύτερο από το αρχικό δυαδικό αρχείο.
Παράδειγμα
Είσοδος
Ένα αρχείο εικονιδίου PNG 12 KB.Έξοδος
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB κειμένου) συν την ίδια συμβολοσειρά χωρίς το πρόθεμα data:.Η αύξηση μεγέθους ~33% είναι εγγενής στην κωδικοποίηση Base64 (3 bytes δυαδικών γίνονται 4 χαρακτήρες κειμένου) — δεν είναι σφάλμα του εργαλείου.
Πού χρησιμοποιείται κάθε μορφή
| Μορφή | Τυπική χρήση |
|---|---|
| Πλήρες data URL | HTML <img src="...">, CSS background-image: url(...), ενσωματωμένες εικόνες email |
| Ακατέργαστο Base64 | Payloads API JSON, αρχεία YAML/config, πεδία BLOB βάσης δεδομένων, προσαρμοσμένα δυαδικά πρωτόκολλα |
Base64 και μέγεθος εικόνας — ο συμβιβασμός στην πράξη
Το πρόσθετο κόστος ~33% σημαίνει ότι η ενσωμάτωση Base64 είναι καλύτερα να κρατιέται για μικρά στοιχεία: ένα εικονίδιο 2 KB γίνεται ένα αβλαβές ~2,7 KB ενσωματωμένου κειμένου, αλλά μια φωτογραφία 500 KB γίνεται ~665 KB κειμένου που κάθεται ενσωματωμένο στο HTML σας, το οποίο επιβραδύνει την ανάλυση και δεν μπορεί να αποθηκευτεί προσωρινά ξεχωριστά από τη σελίδα.
Αν ενσωματώνετε πολλές εικόνες ή μεγαλύτερες, ζυγίστε το όφελος ενός αιτήματος-λιγότερο έναντι του κόστους βάρους σελίδας — και εξετάστε το ενδεχόμενο πρώτα να συμπιέσετε.
→ Κωδικοποιητής / Αποκωδικοποιητής Base64 · Συμπιεστής Εικόνων
Συχνές ερωτήσεις
Γιατί η συμβολοσειρά Base64 είναι τόσο μεγαλύτερη από το αρχείο εικόνας μου;
Το Base64 κωδικοποιεί κάθε 3 bytes δυαδικών δεδομένων ως 4 χαρακτήρες κειμένου, κάτι που είναι σταθερό ~33% πρόσθετο κόστος μεγέθους. Για μια εικόνα 100 KB, περιμένετε περίπου 133 KB κειμένου Base64. Αυτό είναι φυσιολογικό και αναπόφευκτο — είναι το κόστος της αναπαράστασης δυαδικών δεδομένων ως ασφαλές, φορητό κείμενο.
Ποια είναι η διαφορά μεταξύ του data URL και της ακατέργαστης συμβολοσειράς Base64;
Το data URL περιλαμβάνει ένα πρόθεμα data:image/png;base64, που λέει σε ένα πρόγραμμα περιήγησης ή renderer σε τι τύπο MIME αποκωδικοποιείται το ακόλουθο κείμενο. Επικολλήστε το πλήρες data URL σε ένα HTML src ή CSS url(). Το ακατέργαστο Base64 (όλα μετά το κόμμα) είναι αυτό που θέλετε όταν ένα σύστημα ήδη γνωρίζει τον τύπο αρχείου ξεχωριστά — για παράδειγμα ένα πεδίο JSON όπως { "format": "png", "data": "<ακατέργαστο base64>" }.
Πότε πρέπει να ενσωματώσω μια εικόνα ως Base64 αντί να συνδέσω ένα αρχείο;
Η ενσωμάτωση Base64 είναι χρήσιμη για μικρές, συχνά επαναχρησιμοποιούμενες εικόνες (εικονίδια, λογότυπα, μικρά γραφικά UI) όπου η εξοικονόμηση ενός αιτήματος HTTP υπερτερεί της ποινής μεγέθους ~33%, ή σε πλαίσια όπου ένα ξεχωριστό αρχείο δεν είναι πρακτικό, όπως ενσωματωμένα emails ή εξαγωγές HTML ενός αρχείου. Για μεγάλες φωτογραφίες ή οτιδήποτε επαναχρησιμοποιείται σε πολλές σελίδες, ένα κανονικό συνδεδεμένο αρχείο με προσωρινή αποθήκευση προγράμματος περιήγησης είναι σχεδόν πάντα καλύτερο.
Αλλάζει ή συμπιέζει η μετατροπή σε Base64 την εικόνα μου;
Όχι. Το Base64 είναι μια κωδικοποίηση κειμένου χωρίς απώλειες των ακριβώς αρχικών bytes — δεν αγγίζει pixel, ανάλυση ή συμπίεση. Αν θέλετε μικρότερο αρχείο, συμπιέστε πρώτα την εικόνα με έναν συμπιεστή εικόνας, μετά μετατρέψτε το συμπιεσμένο αποτέλεσμα σε Base64.
Ανεβαίνει η εικόνα μου κάπου;
Όχι. Το αρχείο διαβάζεται απευθείας στο πρόγραμμα περιήγησής σας χρησιμοποιώντας το FileReader API και κωδικοποιείται τοπικά — δεν στέλνεται ποτέ μέσω δικτύου.