Εικόνα → Μετατροπέας Base64

Κωδικοποιήστε οποιαδήποτε εικόνα σε data URI Base64, ή επικολλήστε ένα data URI για αποκωδικοποίησή του πίσω σε εικόνα. Αντιγράψτε το αποτέλεσμα ή πάρτε το απόσπασμα CSS url(). Τίποτα δεν εγκαταλείπει τη συσκευή σας.

Πώς λειτουργεί το Εικόνα σε Base64

Το Image to Base64 διαβάζει το αρχείο εικόνας σας και το κωδικοποιεί ως ένα URI δεδομένων Base64 που μπορείτε να ενσωματώσετε απευθείας σε HTML, CSS ή JSON χωρίς να χρειάζεται ξεχωριστό αίτημα αρχείου. Η μετατροπή χρησιμοποιεί το FileReader API στο πρόγραμμα περιήγησής σας, κανένα byte από την εικόνα σας δεν στέλνεται σε διακομιστή. Μπορείτε επίσης να επικολλήσετε πίσω μια συμβολοσειρά Base64 για να την αποκωδικοποιήσετε και να κάνετε προεπισκόπηση της εικόνας, όλα τοπικά.

Ένα URI δεδομένων Base64 είναι περίπου 33% μεγαλύτερο από το δυαδικό αρχικό επειδή κάθε ομάδα τριών bytes επεκτείνεται σε τέσσερις χαρακτήρες ASCII. Αυτή η αύξηση μεγέθους είναι το αναμενόμενο αντιστάθμισμα για την ευκολία της ενσωμάτωσης μιας εικόνας σε ένα έγγραφο ή φύλλο στυλ. Το εργαλείο σας δείχνει τόσο την ακατέργαστη συμβολοσειρά Base64 όσο και ένα έτοιμο προς χρήση απόσπασμα ετικέτας HTML img καθώς και ένα απόσπασμα CSS background-image για γρήγορη αντιγραφή και επικόλληση στο έργο σας.

Συγγραφή από Bastien Sulyan

Εικόνα σε Base64: οδηγός βήμα προς βήμα

Ρίξτε ένα αρχείο εικόνας στην περιοχή μεταφόρτωσης ή κάντε κλικ για αναζήτηση. Αποδεκτές μορφές: JPEG, PNG, WebP, GIF, SVG.
Το URI δεδομένων Base64 εμφανίζεται αμέσως στο πεδίο εξόδου.
Αντιγράψτε την ακατέργαστη συμβολοσειρά Base64, ή χρησιμοποιήστε την προμορφοποιημένη ετικέτα HTML img ή το απόσπασμα CSS background-image.
Για αποκωδικοποίηση, επικόλλησε μια συμβολοσειρά Base64 στο πεδίο εισόδου και άλλαξε σε λειτουργία αποκωδικοποίησης για προεπισκόπηση της εικόνας.
Κάντε κλικ στο κουμπί αντιγραφής δίπλα σε οποιοδήποτε απόσπασμα για να το αντιγράψετε στο πρόχειρο.

Συνήθεις περιπτώσεις χρήσης

Ένας προγραμματιστής front-end ενσωματώνει ένα μικρό εικονίδιο ως URI δεδομένων σε ένα αρχείο CSS για να εξαλείψει ένα επιπλέον αίτημα HTTP.
Ένας προγραμματιστής ενσωματώνει έναν μικροσκοπικό δείκτη φόρτωσης ως χαρακτηριστικό src Base64 ώστε η εικόνα κράτησης θέσης να είναι διαθέσιμη πριν φορτωθεί το πακέτο JavaScript.
Ένας μηχανικός QA αντιγράφει το Base64 μιας δοκιμαστικής εικόνας για να το επικολλήσει απευθείας σε ένα ωφέλιμο φορτίο JSON για μια δοκιμή API.
Ένας κατασκευαστής προτύπων email ενσωματώνει ένα λογότυπο υπογραφής ως URI δεδομένων Base64 επειδή ορισμένα προγράμματα email μπλοκάρουν τα εξωτερικά αιτήματα εικόνων.

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

Γιατί η έξοδος Base64 είναι περίπου ένα τρίτο μεγαλύτερη από το αρχικό μου αρχείο;

Η κωδικοποίηση Base64 αναπαριστά κάθε τρία δυαδικά bytes ως τέσσερις χαρακτήρες ASCII (αναλογία 4/3). Μια εικόνα που είναι 100 KB σε δυαδική μορφή γίνεται περίπου 133 KB ως συμβολοσειρά Base64. Αυτό είναι εγγενές στο σχήμα κωδικοποίησης, όχι περιορισμός του εργαλείου.

Μεταδίδεται το περιεχόμενο της εικόνας σε διακομιστή κατά την κωδικοποίηση;

Όχι. Το FileReader API διαβάζει το δυαδικό αρχείο από τον τοπικό σας δίσκο και περνά το αποτέλεσμα απευθείας στη συνάρτηση κωδικοποίησης JavaScript μέσα στην καρτέλα του προγράμματος περιήγησής σας. Τα δεδομένα της εικόνας δεν φεύγουν από τη συσκευή σας.

Μπορώ να χρησιμοποιήσω την έξοδο URI δεδομένων σε οποιοδήποτε πλαίσιο HTML ή CSS;

Ναι. Ένα URI δεδομένων που ξεκινά με data:image/jpeg;base64, ακολουθούμενο από την κωδικοποιημένη συμβολοσειρά μπορεί να χρησιμοποιηθεί ως χαρακτηριστικό src μιας ετικέτας img ή ως τιμή url() σε μια ιδιότητα CSS background-image. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν URI δεδομένων. Πολύ μεγάλα URI δεδομένων μπορούν να επιβραδύνουν την απόδοση της σελίδας, οπότε η ενσωμάτωση συνήθως προορίζεται για μικρές εικόνες κάτω από μερικά kilobytes.

Υποστηρίζει το εργαλείο κινούμενα GIF;

Το εργαλείο κωδικοποιεί το πλήρες δυαδικό περιεχόμενο οποιουδήποτε αρχείου παρέχεις, συμπεριλαμβανομένων των κινούμενων GIF. Το προκύπτον URI δεδομένων, όταν χρησιμοποιείται ως src μιας ετικέτας img, θα αναπαράγει το κινούμενο σχέδιο σε προγράμματα περιήγησης που υποστηρίζουν κινούμενα GIF.

Πώς πάω προς την άλλη κατεύθυνση και αποκωδικοποιώ μια συμβολοσειρά Base64 πίσω σε εικόνα;

Αλλάξτε το εργαλείο σε λειτουργία αποκωδικοποίησης, επικολλήστε τη συμβολοσειρά Base64 (με ή χωρίς το πρόθεμα data:), και το εργαλείο θα την αποκωδικοποιήσει και θα προσφέρει τη δυαδική εικόνα για λήψη καθώς και θα δείξει μια προεπισκόπηση.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία εικόνας