Εικόνα σε Base64
Μετατρέψτε μια εικόνα σε data URI Base64 για ενσωμάτωση σε HTML, CSS ή JSON, εξ ολοκλήρου στο πρόγραμμα περιήγησής σου.
Πώς να χρησιμοποιήσετε το Εικόνα σε Base64
- 01
Επιλέξτε μια εικόνα από τη συσκευή σου.
- 02
Αντιγράψτε το data URI, ή το έτοιμο απόσπασμα CSS.
- 03
Επικολλήστε το στο HTML, CSS ή JSON σου.
Τι κάνει
Μετατρέπει εικόνα σε Base64 data URI, μια μεγάλη συμβολοσειρά που ενσωματώνει την εικόνα, και δίνει έτοιμο απόσπασμα CSS background. Έτσι μπορείς να ενσωματώσεις εικόνα αντί να συνδέσεις ξεχωριστό αρχείο.
Εκτελείται τοπικά, οπότε η εικόνα διαβάζεται στη συσκευή και δεν μεταφορτώνεται.
Γιατί να ενσωματώσεις εικόνα
Ένα data URI περιέχει ολόκληρη την εικόνα μέσα στο markup, οπότε το πρόγραμμα περιήγησης δεν κάνει ξεχωριστό αίτημα δικτύου. Για μικρά στοιχεία όπως εικονίδια, αυτό μπορεί να επιταχύνει τη σελίδα.
Το τίμημα: μέγεθος και cache
Το Base64 προσθέτει περίπου 33 τοις εκατό επιβάρυνση και μια ενσωματωμένη εικόνα δεν αποθηκεύεται ξεχωριστά στην cache, οπότε κατεβαίνει ξανά με κάθε σελίδα που την περιέχει.
Ενσωμάτωσε μικρές εικόνες, εικονίδια, μικρά λογότυπα ή sprite όταν αξίζει να αποφύγεις ένα αίτημα. Κράτησε τις μεγάλες εικόνες ως κανονικά αρχεία που φορτώνονται παράλληλα και αποθηκεύονται στην cache.
Πού λειτουργούν τα data URI
Τα data URI λειτουργούν όπου γίνεται δεκτό URL: σε img src, CSS background, πεδίο JSON ή πρότυπο email. Είναι χρήσιμα για αυτοτελή αποσπάσματα.
Συχνές ερωτήσεις
Ανεβαίνει η εικόνα μου σε διακομιστή;
Όχι. Η εικόνα διαβάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σου, οπότε δεν φεύγει ποτέ από τη συσκευή σου.
Πότε να χρησιμοποιήσω data URI;
Για μικρές εικόνες όπως εικονίδια, όπου η αποφυγή ενός επιπλέον αιτήματος δικτύου αξίζει την αύξηση μεγέθους. Για μεγάλες εικόνες, ένα κανονικό αρχείο είναι καλύτερο.
Γιατί το Base64 είναι μεγαλύτερο από το αρχείο;
Η κωδικοποίηση Base64 προσθέτει περίπου 33 τοις εκατό επιβάρυνση επειδή αναπαριστά δυαδικά δεδομένα με ένα περιορισμένο αλφάβητο κειμένου.