Εικόνα σε Base64 – Data URI, CSS και HTML

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

Μετατρέψτε εικόνα σε Base64 ή data URI με έτοιμο CSS και HTML ή αποκωδικοποιήστε Base64 σε εικόνα με προεπισκόπηση. Δωρεάν, ιδιωτικά, χωρίς μεταφόρτωση.

Εικόνα → Base64

Σύρετε μια εικόνα εδώ ή κάντε κλικ για να την επιλέξετε Τα αρχεία σας μένουν στη συσκευή σας: δεν μεταφορτώνονται ποτέ.

Έξοδος Αποτέλεσμα

Base64 → εικόνα

Κείμενο Base64 ή data URI

Πώς να μετατρέψετε μια εικόνα σε Base64

Στην ενότητα Εικόνα → Base64, σύρετε μια εικόνα στην περιοχή απόθεσης ή κάντε κλικ σε αυτήν για να την επιλέξετε (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
Διαλέξτε την Έξοδος: Data URI (data:image/png;base64,…), Μόνο Base64, CSS background-image ή Ετικέτα HTML , που περιλαμβάνει και το πλάτος και το ύψος της εικόνας.
Πατήστε Αντιγραφή ή Λήψη ως .txt για μεγάλα αποτελέσματα.

Η γραμμή κάτω από την περιοχή απόθεσης δείχνει την πραγματική μορφή (διαβασμένη από τα byte του αρχείου, όχι από το όνομά του), τις διαστάσεις, το μέγεθος του αρχείου και το μήκος του data URI.

Πώς να μετατρέψετε Base64 ξανά σε εικόνα

Στην ενότητα Base64 → εικόνα, επικολλήστε το κείμενο στο Κείμενο Base64 ή data URI. Μπορείτε να επικολλήσετε μια γυμνή συμβολοσειρά Base64, ένα πλήρες data URI ή ακόμη και ολόκληρο κανόνα CSS ή ετικέτα <img>: το data URI εντοπίζεται μέσα σε αυτά. Οι αλλαγές γραμμής και τα κενά αγνοούνται και λειτουργεί και το Base64 ασφαλές για URL (με - και _).
Πατήστε Αποκωδικοποίηση εικόνας. Εμφανίζονται η προεπισκόπηση, ο τύπος, οι διαστάσεις και το μέγεθος.
Πατήστε Λήψη εικόνας για να την αποθηκεύσετε με τη σωστή επέκταση αρχείου.

Ο τύπος ελέγχεται με τα «μαγικά byte» του αρχείου, την υπογραφή στην αρχή κάθε μορφής εικόνας (για παράδειγμα 89 50 4E 47 για PNG ή FF D8 FF για JPEG). Αν ένα data URI δηλώνει image/jpeg αλλά περιέχει PNG, το εργαλείο σας ενημερώνει και χρησιμοποιεί τον πραγματικό τύπο. Ό,τι δεν είναι αναγνωρισμένη εικόνα απορρίπτεται και το όριο είναι 20 MB δεδομένων εικόνας.

Πώς λειτουργεί το Base64

Το Base64 μετατρέπει κάθε 3 byte ενός αρχείου σε 4 εκτυπώσιμους χαρακτήρες από τα A–Z, a–z, 0–9, + και /, με το = ως συμπλήρωμα στο τέλος. Γι’ αυτό το κωδικοποιημένο κείμενο είναι περίπου 33% μεγαλύτερο από το αρχείο: ένα εικονίδιο 30 KB γίνεται περίπου 40 KB κειμένου. Ένα data URI προσθέτει μια σύντομη κεφαλίδα, data:<type>;base64,, ώστε το πρόγραμμα περιήγησης να ξέρει πώς να το διαβάσει.

Πότε να ενσωματώνετε εικόνες ως data URI

Τα data URI είναι χρήσιμα για:

μικρά εικονίδια, λογότυπα και φόντα στο CSS, ώστε να γλιτώσετε ένα αίτημα·
email HTML και έγγραφα HTML ενός αρχείου που πρέπει να λειτουργούν χωρίς εξωτερικά αρχεία·
API JSON και αρχεία ρυθμίσεων που μπορούν να μεταφέρουν μόνο κείμενο.

Δεν ταιριάζουν σε μεγάλες φωτογραφίες. Το κείμενο είναι κατά ένα τρίτο μεγαλύτερο από το αρχείο, δεν μπορεί να αποθηκευτεί στην κρυφή μνήμη ξεχωριστά από τη σελίδα ή το φύλλο στυλ που το περιέχει και καθυστερεί την απόδοση. Πάνω από περίπου 10 έως 100 KB, ένα κανονικό αρχείο εικόνας με καλή χρήση κρυφής μνήμης συνήθως υπερτερεί, γι’ αυτό το εργαλείο εμφανίζει υπενθύμιση για εικόνες άνω των 100 KB.

Όλα λειτουργούν στο πρόγραμμα περιήγησής σας: οι εικόνες και το κείμενο που επικολλάτε δεν μεταφορτώνονται ποτέ.

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

Είναι το Base64 τρόπος συμπίεσης ή προστασίας μιας εικόνας;

Όχι. Το Base64 κάνει τα δεδομένα περίπου 33% μεγαλύτερα και οποιοσδήποτε μπορεί να τα αποκωδικοποιήσει. Απλώς μετατρέπει δυαδικά δεδομένα σε κείμενο που μπορεί να ταξιδέψει εκεί όπου τα δυαδικά δεδομένα δεν μπορούν.

Γιατί δεν εμφανίζεται το data URI μου;

Οι συχνότερες αιτίες είναι ένας τύπος που λείπει ή είναι λάθος στην κεφαλίδα, κενά ή εισαγωγικά που επικολλήθηκαν στη μέση της συμβολοσειράς ή κείμενο που κόπηκε. Επικολλήστε το στο Base64 → εικόνα: το εργαλείο αναφέρει τους μη έγκυρους χαρακτήρες και ελέγχει τον πραγματικό τύπο.

Μπορώ να χρησιμοποιήσω SVG ως data URI;

Ναι. Το SVG μπορεί να κωδικοποιηθεί σε Base64 όπως κάθε εικόνα. Για SVG, ένα data URI με κωδικοποίηση URL (data:image/svg+xml,%3Csvg…) είναι συχνά συντομότερο· αυτό το εργαλείο αποκωδικοποιεί και τις δύο μορφές.

Λειτουργεί με εικόνες HEIC ή AVIF;

Η κωδικοποίηση λειτουργεί με οποιοδήποτε αρχείο εικόνας. Η προεπισκόπηση εμφανίζεται μόνο αν το πρόγραμμα περιήγησής σας μπορεί να εμφανίσει τη μορφή, αλλά το κείμενο Base64 και η λήψη είναι πάντα σωστά.

Υπάρχει όριο μεγέθους;

Ναι, 20 MB δεδομένων εικόνας, και προς τις δύο κατευθύνσεις. Οι μεγαλύτερες συμβολοσειρές κάνουν τα προγράμματα περιήγησης αργά και σπάνια είναι καλή ιδέα σε μια ιστοσελίδα.