Kostenloser Base64-Datei-Encoder
Konvertieren Sie jede Datei in eine Base64-Daten-URL · alles bleibt in Ihrem Browser.
Datei hierher ziehen & ablegen
oder
Wählen oder legen Sie eine Datei zum Codieren ab.
So funktioniert es
- Laden Sie Ihre Datei hoch: Legen Sie eine beliebige Datei (Bild, PDF, Schriftart, Audio oder Binärdatei) in die Ablagezone oder klicken Sie zum Durchsuchen.
- Base64-Zeichenkette erhalten: Die Datei wird sofort in Ihrem Browser gelesen und in Base64 codiert.
- Kopieren und verwenden: Kopieren Sie die Base64-Zeichenkette zum Einbetten in HTML, CSS, JSON-Payloads, Daten-URIs oder jedes textbasierte Format.
Warum den Base64-Datei-Encoder verwenden?
Binärdateien können nicht direkt in textbasierte Formate wie HTML, CSS, JSON oder XML eingebettet werden. Die Base64-Codierung wandelt jede Binärdatei in eine sichere ASCII-Zeichenkette um, die überall dort eingebettet werden kann, wo Text erlaubt ist. Dies ist unerlässlich für das direkte Einbetten von Bildern in HTML (Daten-URIs), das Einbinden von Schriftarten in CSS, das Senden von Dateien über E-Mail- oder JSON-APIs ohne Datei-Upload-Endpunkte und das Erstellen eigenständiger HTML-Dokumente.
Funktionen
- Jeder Dateityp: Codiert Bilder, PDFs, Schriftarten, Audio, Video und alle Binärdateien.
- Daten-URI-Ausgabe: Aktivieren Sie diese Option, um eine sofort verwendbare Daten-URI zur direkten Einbettung zu erhalten.
- Dateigrößenanzeige: Zeigt die Original- und die codierte Größe an, damit Sie den Overhead kennen.
- Lokale Verarbeitung: Dateien werden vollständig in Ihrem Browser gelesen und codiert, nichts wird hochgeladen.
Häufig gestellte Fragen
Wie viel größer ist Base64 im Vergleich zur Originaldatei?
Die Base64-Codierung erhöht die Dateigröße um etwa 33 %. Ein 100-KB-Bild wird bei Base64-Codierung etwa 133 KB groß. Dieser Overhead ist der Kompromiss dafür, dass binäre Inhalte in Text eingebettet werden können.
Kann ich Base64-Bilder in HTML verwenden?
Ja. Verwenden Sie eine Daten-URI wie <img src="data:image/png;base64,[Ihr-Base64]">. Dies bettet das Bild direkt in das HTML ein, ohne externe HTTP-Anfrage, erhöht jedoch die Seitengröße.
Gibt es eine Dateigrößenbegrenzung?
Das Tool hat keine feste Begrenzung, aber sehr große Dateien (über 10 MB) können langsam zu codieren sein und die resultierende Zeichenkette wird extrem lang. Für große Dateien empfiehlt sich eine serverseitige Lösung.
Woher Base64 kommt, und warum wir es noch verwenden
Base64 wurde entwickelt, um 8-Bit-Binärdaten durch 7-Bit-ASCII-Kanäle zu transportieren. Die erste formale Spezifikation war RFC 989 (Februar 1987) für Privacy-Enhanced Mail. RFC 1341 (Juni 1992) und insbesondere RFC 2045 «MIME Teil Eins» (November 1996) machten es zum Standardweg, binäre Dateien an E-Mails anzuhängen. Das aktuelle kanonische Dokument ist RFC 4648 (Oktober 2006), das auch die URL-sichere Variante definierte. Die Mechanik ist einfach: Nehmen Sie 3 Bytes Eingabe (24 Bits), teilen Sie in vier 6-Bit-Gruppen, schlagen Sie jede im 64-Zeichen-Alphabet A-Z a-z 0-9 + / nach, hängen Sie =-Padding an, damit die Ausgabelänge ein Vielfaches von 4 wird. Die Ausgabegröße ist genau 4 ÷ 3 ≈ 133 % der Eingabe. Für die Einbettung in URLs (JWT, OAuth, S3 vorgezeichnete URLs) ersetzt die URL-sichere Variante aus RFC 4648 §5 - für + und _ für /; Padding wird typischerweise weggelassen.
Die data:-URL: Base64 in Ihrem HTML und CSS
Das data:-URL-Schema wurde in RFC 2397 (August 1998) spezifiziert. Format: data:[<mediatype>][;base64],<data>. Beispiel: <img src="data:image/png;base64,iVBORw0KGgo..."> bettet ein PNG inline ohne zusätzliche HTTP-Anfrage ein. Der WHATWG URL Living Standard regelt, wie moderne Browser diese URLs interpretieren, und der HTML Living Standard bestätigt, dass sie überall gültig sind, wo eine URL erlaubt ist, einschließlich <img>, <link>, <iframe> und der CSS-Funktion url(). Praktische Anleitung: Verwenden Sie Data-URLs für Assets unter etwa 4 KB, wo das Einsparen einer HTTP-Anfrage die 33 Prozent Nutzlast-Blähung übertrifft. Über 10 KB gewinnen reguläre Dateireferenzen mit Browser-Caching fast immer, besonders über HTTP/2-Multiplexing.
Browser-APIs, die dieses Tool antreiben
Diese Seite verwendet die FileReader-API aus dem HTML Living Standard (ursprünglich W3C File API First Public Working Draft November 2009; ausgeliefert in Chrome 13 / Firefox 3.6 / Safari 6 / Internet Explorer 10). FileReader.readAsDataURL(blob) gibt den vollständigen String data:<mime>;base64,<...> mit einem Aufruf zurück. Die alte Alternative ist btoa() (benannt nach dem historischen Unix-Befehl «binary-to-ASCII» und ein JavaScript-DOM-Level-0-Überbleibsel), aber sie wirft bei Nicht-Latin-1-Eingaben, es sei denn, Sie transkodieren zuerst durch UTF-8. Der moderne Ersatz ist Uint8Array.prototype.toBase64(), hinzugefügt zu ECMAScript 2025 in TC39 Stage 4. Er wurde in Chrome 132 (Januar 2025), Firefox 133 (November 2024) und Safari 18.2 (Dezember 2024) ausgeliefert. Verwenden Sie die neue API für jeden neuen Code; reservieren Sie btoa für Kompatibilität mit älteren Browsern.
Wohin die Ausgabe dieses Tools tatsächlich geht
- Inline-Icons und kleine Bilder in HTML / CSS für eigenständige oder offline-first Dokumente.
- JSON-Datei-Upload-Nutzlasten, wenn das Backend einen Base64-String in einem JSON-Feld anstelle von
multipart/form-dataerwartet. - MIME-E-Mail-Anhänge: RFC 2045 erfordert Base64 (oder quoted-printable) für jeden Nicht-7-Bit-Körper, was jeden PDF-, Bild- oder Dokumentanhang bedeutet.
- JWT- / OAuth-Tokens: jedes JWT besteht aus drei URL-sicheren Base64-Segmenten, die durch
.verbunden sind. - Test-Fixtures, die in Git committet werden, damit Testbilder / Beispieldokumente mit der Testdatei mitreisen.
- Web-Push-Nutzlasten bei der Auslieferung eines binären Blobs durch die Push-API.
- Kritisch-Pfad-Webfonts, eingebettet in CSS, um FOIT (Flash of Invisible Text) beim ersten Rendern zu vermeiden, akzeptierter Kompromiss.
Häufige Fehler
- Base64 als Verschlüsselung behandeln. Base64 ist Kodierung, keine Sicherheit. Jeder mit dem String kann ihn in seinem Browser dekodieren. Verwenden Sie Base64 nie, um Anmeldedaten, API-Schlüssel oder PII zu «verstecken».
- Den
data:<mime>;base64,-Präfix vergessen. Ein nackter Base64-String ist keine Data-URL. Ein<img>benötigt die vollständige Formdata:image/png;base64,<Ihr-base64>zum Rendern. - URL-sicheres und Standard-Base64 mischen. JWT und S3 vorgezeichnete URLs verwenden URL-sicher (
-und_). Standard-Base64 (+und/) in diese Kontexte einzufügen, führt zu stillen Decodierfehlern. - Die CSP
data:-Direktive vergessen. Eine Seite mitimg-src 'self'in ihrer Content Security Policy weigert sich, jededata:image/...-URL zu laden. Sie müssen explizitimg-src 'self' data:erlauben (und ähnlich fürfont-src,media-srcusw.). - 100-MB-Dateien synchron auf dem Hauptthread kodieren.
FileReader.readAsDataURLblockiert die UI mehrere Sekunden lang bei einer 200-MB-Datei. Für alles über ~20 MB verwenden Sie einen Web Worker oder Stream-Chunks. btoa("é")direkt aufrufen. Es wirftInvalidCharacterError, weilbtoaLatin-1 erwartet, nicht UTF-8. Verwenden Sie entwederbtoa(unescape(encodeURIComponent(text)))(Legacy), oder übergeben Sie einUint8Arraydurch die modernetoBase64()-Methode.- Ein 500-KB-Logo als Data-URL einbetten. Die 33-Prozent-Blähung plus der Verlust des Browser-Cachings bedeutet, dass jeder Seitenaufruf 665 KB lädt statt 500 KB-einmal. Verwenden Sie eine reguläre Asset-Referenz.
Weitere häufig gestellte Fragen
Was ist der genaue Größen-Overhead von Base64?
Genau 4 ÷ 3 ≈ 1,333× die Eingabe, plus 1-2 Bytes =-Padding. Eine 999-Byte-Eingabe wird zu 1332 Base64-Zeichen (kein Padding, weil 999 ÷ 3 = 333 genau). Eine 1000-Byte-Eingabe wird zu 1336 (ein Byte Padding). Für eine Data-URL fügen Sie die Präfix-Bytes hinzu (z. B. data:image/png;base64, sind 23 Zeichen).
Wie erhalte ich URL-sicheres Base64 für JWT oder S3 vorgezeichnete URLs?
Nehmen Sie die Standard-Base64-Ausgabe dieses Tools und wenden Sie zwei Ersetzungen an: + → -, / → _. JWT entfernt speziell das nachgestellte =-Padding; S3 behält es. RFC 4648 §5 dokumentiert die Variante.
Kann ich eine Datei durch Base64 round-trippen, ohne Korruption?
Ja. Base64 ist eine verlustfreie Kodierung. Zu Base64 kodieren und dann wieder dekodieren erzeugt ein byte-identisches Original. Die einzige Möglichkeit, Daten zu verlieren, ist, den Base64-String abzuschneiden (z. B. Zeichenbegrenzung Ihres Speichers) oder Standard- vs URL-sichere Alphabete beim Dekodieren zu verwechseln.
Was ist die maximale Dateigröße, die dieses Tool verarbeiten kann?
Keine harte Grenze; in der Praxis ist der Browser-Speicher die Obergrenze. Das Kodieren einer 100-MB-Datei erfordert etwa 100 MB Eingabe plus 133 MB Ausgabe, plus DOM-Overhead für den Ergebnis-String, vielleicht 400 MB insgesamt. Auf Mobilgeräten erwarten Sie Fehler über etwa 30 MB. Die Kodierung läuft auf dem Hauptthread, also friert die UI während der Verarbeitung ein; für Dateien über 20 MB ist eine serverseitige oder Web-Worker-Lösung bequemer.
Wird meine Datei irgendwo hochgeladen?
Nein. Die Datei wird mit der FileReader.readAsDataURL-API des Browsers gelesen, die vollständig in Ihrem Browser läuft. Es wird keine Netzwerkanfrage gestellt und keine Kopie Ihrer Datei wird auf einem Server gespeichert. Öffnen Sie den Netzwerk-Tab in DevTools und legen Sie eine Datei ab: Sie sehen null ausgehende Anfragen während der Kodierung.