CDRN

Κωδικοποίηση εικόνας σε Base64 / Data URI

  • Πίνακας ελέγχου
  • Τεκμηρίωση
  • API
μετατρέπει τις εικόνες σας σε αρχεία base64, ιδανικό για ενσωμάτωση εικόνων απευθείας σε κώδικα HTML ή CSS
Μορφή αρχείου

Μπορείτε να ανεβάσετε απεριόριστο αριθμό εικόνων με μέγιστο βάρος 20M.

Ασφάλεια

Τα δεδομένα σας δεν αποθηκεύονται στους διακομιστές μας.

Υποστηριζόμενα προγράμματα περιήγησης

Υποστηρίζονται όλα τα πρόσφατα προγράμματα περιήγησης. Ωστόσο, εάν αντιμετωπίσετε κάποιο σφάλμα, ενημερώστε μας για διόρθωση.

Τι είναι το URI δεδομένων;

Το URI δεδομένων είναι μια διεύθυνση URL που περιέχει απευθείας τα δεδομένα ενός πόρου αντί για τοποθετήστε το δείκτη σε ένα απομακρυσμένο αρχείο. Η γενική του μορφή είναι δεδομένα:[][;base64],. Για μια εικόνα, έχουμε συνήθως data:image/png;base64,iVBORw0KGgo…. Ο πόρος είναι ενσωματωμένος σε HTML, CSS ή JSON και φορτώθηκε χωρίς πρόσθετο αίτημα HTTP.

Γιατί να κωδικοποιήσω μια εικόνα στο Base64;

Κοινά κίνητρα:

  • Μείωση αιτημάτων HTTP: ενσωματώστε ένα εικονίδιο απευθείας στο CSS αντί να το φορτώσετε εκτός από το έγγραφο
  • Υπογραφή email με ενσωματωμένη εικόνα: δεν υπάρχει κίνδυνος αποκλεισμού της εικόνας ως απομακρυσμένου περιεχομένου
  • Στοιχεία Ιστού / Εργάτες Ιστού: όπου η φόρτωση ενός εξωτερικού πόρου δημιουργεί συχνά πρόβλημα εύρους ή CORS
  • Τοπικός χώρος αποθήκευσης (LocalStorage, IndexedDB, βάση δεδομένων): σειριοποίηση μιας μικρογραφίας avatar σε συμβολοσειρά
  • Αυτοτελή αποσπάσματα: ένα αυτόνομο αρχείο HTML, χωρίς εξωτερικές εξαρτήσεις

Τυπικές περιπτώσεις χρήσης

Ορισμένα συγκεκριμένα περιβάλλοντα όπου δικαιολογείται η κωδικοποίηση εικόνας Base64:

  • Ενσωματωμένα εικονίδια SVG σε CSS (εικόνα φόντου: url("data:image/svg+xml;base64,…"))
  • Εξατομικευμένες υπογραφές email με λογότυπο
  • Ταχεία δημιουργία πρωτοτύπων μιας αυτόνομης σελίδας που μοιράζεται μέσω email
  • Ανεξάρτητα στοιχεία ιστού (ένα μεμονωμένο αρχείο με δυνατότητα ανάπτυξης)
  • Δημιουργία PDF από την πλευρά του προγράμματος περιήγησης (jsPDF) με ενσωματωμένες μικρογραφίες
  • Δεδομένα δοκιμής (εικόνες) που περιέχουν εικόνες

Πώς να το χρησιμοποιήσετε

Τρία βήματα:

  1. Μεταφορτώστε την εικόνα σας (PNG, JPG, SVG, WebP, GIF) μέσω της ζώνης πτώσης
  2. Κάντε κλικ στο "Κωδικοποίηση"
  3. Αντιγράψτε το URI δεδομένων που προκύπτει με το ειδικό κουμπί και επικολλήστε το στο HTML, CSS ή JSON σας

Όρια και βέλτιστες πρακτικές

Το Base64 δεν είναι ασημένια σφαίρα. Μερικές προφυλάξεις:

  • Το Base64 αυξάνει το μέγεθος κατά ~33%: 4 χαρακτήρες ASCII για κάθε 3 δυαδικά byte
  • Οι κωδικοποιημένες εικόνες δεν αποθηκεύονται στην κρυφή μνήμη ξεχωριστά από το πρόγραμμα περιήγησης. φορτώνονται ξανά με το HTML/CSS που τα περιέχει
  • Προτιμάται για εικόνες μικρότερες από 10 KB. πέρα από αυτό, ένα εξωτερικό αρχείο είναι γενικά πιο αποτελεσματικό
  • Για SVG, προτιμήστε την κωδικοποίηση URL (μέσω encodeURIcomponent) αντί για το Base64: το αποτέλεσμα είναι πιο σύντομο και παραμένει αναλύσιμο όπως το κείμενο
  • Σύγχρονα εργαλεία κατασκευής (Webpack, Vite) αυτοματοποιούν την επιλογή Base64 έναντι Base64. εξωτερικό αρχείο μέσω ενός ρυθμιζόμενου μεγέθους κατωφλίου

Συγκεκριμένα παραδείγματα

HTML: 


        CSS:
    

    
.εικονίδιο {
  φόντο: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") χωρίς επανάληψη;
  πλάτος: 16 px;
  ύψος: 16px;
}

    

        JSON (πλαστικά δεδομένα):
    

    
{
  "χρήστης": {
    "όνομα": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

FAQ

Ποια είναι η διαφορά μεταξύ Base64 και binary;

Το δυαδικό αντιπροσωπεύει τα ακατέργαστα byte ενός αρχείου. Το Base64 είναι μια κωδικοποίηση που μετασχηματίζει αυτά τα byte σε 64 εκτυπώσιμους χαρακτήρες ASCII (A-Z, a-z, 0-9, +, /). Τα περιβάλλοντα κειμένου (HTML, JSON, email) όχι δεν μπορεί να φέρει δυαδικό? Το Base64 επιλύει αυτό το πρόβλημα με κόστος 33%.

Γιατί το URI δεδομένων μου είναι τόσο μεγάλο;

Μια εικόνα 30 KB σε δυαδικό σύστημα γίνεται ~40 KB στο Base64. Και κάθε χαρακτήρας είναι ένα byte ASCII, οπότε ναι, η αλυσίδα είναι μακριά. Αυτό είναι εγγενές στην κωδικοποίηση. Για μεγάλες εικόνες, κρατήστε ένα εξωτερικό αρχείο.

Υποστηρίζουν όλα τα προγράμματα περιήγησης URI δεδομένων;

Ναι, χωρίς εξαίρεση μεταξύ των σύγχρονων προγραμμάτων περιήγησης (Chrome, Firefox, Safari, Edge από IE8 ακόμη). Όρια ιστορικό: IE8 περιορισμένο στα 32 KB. Όχι άλλες ανησυχίες σήμερα στον Ιστό.

Πώς να αποκωδικοποιήσετε ένα URI δεδομένων;

Ο αποκωδικοποιητής εικόνων Base64 κάνει το αντίθετο: επικολλήστε το URI δεδομένων σας, ετοιμάστε το αρχείο εικόνας (PNG, JPG, SVG, WebP) για μεταφόρτωση ή αποθήκευση.

Base64 έναντι κωδικοποίησης URL για SVG;

Για SVG, η κωδικοποίηση URL (με encodeURIcomponent) παράγει μια μικρότερη συμβολοσειρά από Base64 και παραμένει αναγνώσιμο ως κείμενο. Αυτή είναι η προτεινόμενη επιλογή στο CSS κατά την ενσωμάτωση ενός SVG inline. Για δυαδικές μορφές (PNG, JPG), το Base64 παραμένει υποχρεωτικό.

Επηρεάζει η κωδικοποίηση Base64 την ποιότητα της εικόνας;

Όχι. Η κωδικοποίηση είναι χωρίς απώλειες: είναι ένα δυαδικό byte ↔ Bijection συμβολοσειράς Base64. Pixels πρωτότυπα διατηρούνται αυστηρά. Μόνο το μέγεθος του μεταφερόμενου αρχείου αυξάνεται κατά 33%.

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

Πότε είναι καλύτερο να αποφύγετε το URI δεδομένων;

Μόλις μια εικόνα ξεπεράσει τα δέκα kilobyte και είναι πιθανό να ξαναχρησιμοποιηθεί σε πολλές σελίδες, είναι προτιμότερο ένα εξωτερικό αρχείο. Το πρόγραμμα περιήγησης μπορεί στη συνέχεια να το τοποθετήσει cache χωριστά από το HTML που το αναφέρει. Ένα URI δεδομένων επεκτείνει το κύριο έγγραφο και απαιτεί για να κατεβάσετε ξανά την εικόνα σε κάθε φόρτωση σελίδας.

Η εικόνα μου αποστέλλεται σε διακομιστή;

Η εικόνα περνά από τον διακομιστή μας κατά την κωδικοποίηση και δεν διατηρείται μετά την επιστροφή του αποτελέσματος. Δεν ζητούνται υπηρεσίες τρίτων. Για ένα αυστηρά εμπιστευτικό αρχείο, το τοπικό ισοδύναμο είναι base64 -w 0 my-image.png σε Linux ή certutil -encode στα Windows.

Γιατί να επιλέξετε την κωδικοποίηση URL αντί για το base64 για ένα SVG;

Ένα SVG είναι κείμενο XML. Το Base64 κωδικοποιείται, γίνεται δυσανάγνωστο και περίπου 33% μεγαλύτερο. Στην κωδικοποίηση URL μέσω encodeURIcomponent, το αποτέλεσμα παραμένει ευανάγνωστο και πιο σύντομο. Στο CSS, γράψτε url("data:image/svg+xml;utf8,") με τους χαρακτήρες Οι ειδικές προσφορές διαφυγής καταλήγουν σε ένα τελικό αρχείο μικρότερο από μια έκδοση base64.

Ποιο μέγιστο μέγεθος μπορώ να κωδικοποιήσω;

Το μέγεθος αρχείου που γίνεται αποδεκτό από τη φόρμα περιορίζεται σε μερικά megabyte, επαρκές για η συντριπτική πλειοψηφία των εικονιδίων, μικρογραφιών και είδωλα. Από εκεί και πέρα αφήνεις την περίπτωση λογικής χρήσης ένα URI δεδομένων: ένα στατικό αρχείο που εξυπηρετείται από το CDN σας θα είναι πολύ πιο αποτελεσματικό για το πρόγραμμα περιήγησης όσον αφορά τις μετρήσεις σας Core Web Vitals.

Γιατί το πρόγραμμα περιήγησης δεν αποθηκεύει προσωρινά ένα URI δεδομένων;

Η κρυφή μνήμη HTTP λειτουργεί κατά διεύθυνση URL. Ένα URI δεδομένων είναι μέρος του εγγράφου που το περιέχει, άρα επαναφορτίζεται με αυτό. Ένα εξωτερικό εικονίδιο στο icon.png, αντίθετα, αποθηκεύεται στην κρυφή μνήμη μια για πάντα και επαναχρησιμοποιηθεί σε όλες τις σελίδες που το αναφέρουν. Αυτό είναι το κύριο Αυτός είναι ο λόγος για τον οποίο το Data URI παραμένει ένα εξειδικευμένο εργαλείο, όχι μια γενική αντικατάσταση.

Παράδειγμα αιτήματος

curl -X POST https://cdrn.fr/api/v1/tools/base64-image-encoder/execute \
  -F "file=@/path/to/file"

Σχήμα εισόδου

Πεδίο Τύπος Απαιτείται Προεπιλογή
file file ✓ –

αυτό το εργαλείο αναμένει αρχείο - χρησιμοποιήστε Content-Type multipart/form-data αντί για application/json

Σημεία πρόσβασης

  • GET https://cdrn.fr/api/v1/tools - εμφανίζει όλα τα διαθέσιμα εργαλεία
  • GET https://cdrn.fr/api/v1/tools/base64-image-encoder - ανακτά το σχήμα αυτού του εργαλείου
  • POST https://cdrn.fr/api/v1/tools/base64-image-encoder/execute - εκτελεί αυτό το εργαλείο με payload JSON

CDRN - δημιουργήθηκε από ARDNTECH