Skip to content

Bild zu Base64 (und zurück)

Kodiere beliebige Bilder zu einer Daten-URI, oder füge eine URI ein und sieh das Bild.

Base64-Daten-URIs lassen dich Bilder direkt in HTML, CSS oder JSON einbetten, ohne eine separate Datei. Nützlich für kleine SVG-Symbole, eingebettete E-Mail-Signaturen, JWT-Payloads, die einen Avatar enthalten, oder überall, wo eine Netzwerkabfrage mehr Ärger als Vorteil bringt. Das Werkzeug unten kodiert oder dekodiert Bilder vollständig in deinem Browser unter Verwendung der Standard-FileReader und atob/btoa APIs.

Everything happens locally — the FileReader API runs entirely in your browser. No upload, no analytics on the file contents.

How to use

  1. Wähle eine Richtung

    „Bild → Base64“ kodiert eine Datei, die du ablägst. „Base64 → Bild“ dekodiert eine Daten-URI, die du einfügst.

  2. Ablegen oder einfügen

    Ziehe eine Datei auf die Dropzone (kodieren), oder füge die Daten-URI in das Textfeld ein (dekodieren). Dateien bis zu 8 MB sind akzeptiert.

  3. Kopiere oder speichere das Ergebnis

    Die kodierte Ausgabe ist eine vollständige Daten-URI, bereit, in <img src="…">, CSS-background-image: url(…), oder JSON zu gehen. Die dekodierte Vorschau wird unter dem Einfügungs-Feld gerendert.

Frequently asked questions

Wird das Bild irgendwohin hochgeladen?
Nein. Die Umrechnung passiert in deinem Browser über die FileReader API — Bytes verlassen nie die Seite. Es gibt auch kein Analytics-Event, das die Datei-Inhalte umfasst.
Warum ist die Daten-URI größer als die Datei?
Base64-Kodierung bläht binäre Daten um etwa 33% auf (alle 3 Bytes werden 4 Zeichen). Für ein 100 KB Bild, erwarte ~133 KB Text. Das ist der Preis der Einbettung von binären Daten in ein Text-Container.
Wann sollte ich ein Bild einbetten, statt es zu verlinken?
Wenn das Bild klein ist (< 10 KB), einmal verwendet wird und eine separate HTTP-Anfrage würde kritisches Rendering verlangsamen. Beispiele: Hero-Abschnitt SVG, eingebettete E-Mail-Logos, JWT-eingebettete Avatare. Over ~10 KB, ist eine separate Datei normalerweise insgesamt schneller, weil sie separat gecacht werden kann.
Was ist der MIME-Type für SVG?
`image/svg+xml`. Der Encoder liest ihn aus des Datei-`type`-Attribut, das der Browser korrekt für Standard-Bildformate setzt.
Kann ich nicht-Bild-Dateien kodieren?
Dieses Werkzeug ist nur für Bilder konzipiert (und validiert das Daten-URI-Präfix beim Dekodieren). Für beliebige binäre → Base64 sieh /code/base64/, das direkt UTF-8-Text verarbeitet.

About

Was ist eine Daten-URI?

Ein URI-Schema, das in RFC 2397 definiert ist, das die Ressource eingebettet. `data:image/png;base64,iVBORw0KGgo...` erklärt den MIME-Type, sagt, dass die Payload Base64-kodiert ist, und umfasst die Bytes nach dem Komma. Browser und die meisten Parser akzeptieren sie überall, wo eine http(s)-URL in Bild-Kontexten erwartet würde.

Kodierungs-Geschwindigkeit

FileReaders `readAsDataURL` ist asynchron und nutzt die native Base64-Implementierung des Browsers. Erwarte unter 100 ms auch für mehrere-MB-Dateien; der Engpass ist das Lesen der Datei vom Datenträger, nicht die Kodierung selbst.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.