Πώς λειτουργεί η μετατροπή εικόνας σε Base64
Ολόκληρη η μετατροπή εκτελείται στο πρόγραμμα περιήγησής σας χρησιμοποιώντας το File API και την ενσωματωμένη συνάρτηση btoa.
- Ρίχνετε ή επιλέγετε μια εικόνα. Το πρόγραμμα περιήγησης τη διαβάζει ως Blob.
- Το αρχείο διαβάζεται σε τμήματα 1 MB και τα bytes προστίθενται σε μια δυαδική συμβολοσειρά.
- Η δυαδική συμβολοσειρά περνά στο btoa, το οποίο αντιστοιχίζει κάθε τρία bytes σε τέσσερις χαρακτήρες Base64.
- Ο τύπος MIME διαβάζεται από το αντικείμενο Αρχείου και προστίθεται ως πρόθεμα.
- Η σελίδα συναρμολογεί τέσσερις εξόδους από αυτό το URI.
Γιατί να κωδικοποιήσετε μια εικόνα ως data URI;
- Η ενσωμάτωση μικρού λογότυπου αφαιρεί μια ξεχωριστή HTTP μετάδοση.
- Μια σελίδα με ενσωματωμένες εικόνες είναι αυτόνομη.
- Πολλά προγράμματα email αποκλείουν συνδεδεμένες απομακρυσμένες εικόνες.
- Η κωδικοποίηση γίνεται εξ ολοκλήρου στο πρόγραμμα περιήγησης.
Κοινές χρήσεις για Base64 εικόνες
Τα data URIs εμφανίζονται όπου μια εικόνα είναι αρκετά μικρή:
- Inline εικονίδια CSS: sprite ή εικονίδιο 1-2 KB σε φύλλο στυλ.
- Υπογραφές email και newsletters.
- Ενσωμάτωση build-tool.
Πώς μοιάζει μια Base64 εικόνα;
Μια μικρή διάφανη PNG 1×1. Τα ακατέργαστα bytes είναι μόλις 67 bytes, αλλά κωδικοποιημένη γίνεται μια μεγαλύτερη συμβολοσειρά.
Η εικόνα μου μεταφορτώνεται κάπου;
Όχι. Η μετατροπή χρησιμοποιεί το File API και την btoa στη συσκευή σας.
Γιατί η έξοδος Base64 είναι μεγαλύτερη από την αρχική εικόνα;
Το Base64 αντιπροσωπεύει κάθε τρία bytes με τέσσερις χαρακτήρες ASCII, περίπου 33% μεγαλύτερο.
Ποιες μορφές εικόνας μπορώ να μετατρέψω;
Οποιαδήποτε μορφή αναγνωρίζει το πρόγραμμα περιήγησης: PNG, JPEG, GIF, WebP, SVG, BMP.
Ρίξτε μια εικόνα, αντιγράψτε το data URI ή το απόσπασμα που χρειάζεστε και επικολλήστε το σε HTML, CSS ή email.