Bild in Base64 umwandeln
Bild zu Base64 macht aus einem Bild einen Textblock, den Sie direkt in Ihren Code einfügen können. Dieser Text ist eine Data-URI, gültig in CSS, HTML, JSON und Markdown, und er trägt das komplette Bild – die Seite braucht also keine separate Datei und stellt dafür keine zusätzliche Anfrage. Der Text wird rund 33% größer als die Datei, was die Seite Ihnen zeigt, denn genau diese Kosten sind der Grund, vorher zu überlegen.
Bild hierher ziehen
oder irgendwo auf der Seite ablegen · Datei auswählen · 100 MB
Unterstützt: JPG, JPEG, PNG, WebP, AVIF, GIF, SVG, ICO
Ziehen Sie ein PNG, JPG, SVG oder Icon hierher, um einen Daten-URI und fertige Codebeispiele zu erhalten.
Wie funktioniert Bild in Base64 umwandeln?
Eine Data-URI ist eine Datei, die direkt an der Stelle eingebettet ist, die auf sie verweist. Statt dass src="logo.png" auf etwas zeigt, das der Browser nachladen muss, werden die Bytes des Bildes in das Attribut selbst geschrieben. Keine Anfrage, keine zweite Datei, nichts, was einen 404 liefern kann.
Warum Base64 statt der rohen Bytes
Weil die Orte, an denen diese Strings landen – eine CSS-Datei, ein HTML-Attribut, ein JSON-Wert –, Text sind, und ein PNG nicht. Seine Bytes enthalten Anführungszeichen, Zeilenumbrüche, Null-Bytes und alles andere, was einen String vorzeitig beenden oder ein Dokument korrumpieren würde. Base64, definiert in RFC 4648, bildet je drei Bytes auf vier Zeichen aus einem 64-Symbol-Alphabet ab, das überall sicher ist, und polstert mit = auf, wenn sich die Eingabe nicht glatt teilen lässt.
Vier Zeichen für je drei Bytes – daher kommt die 33%. Das ist kein Overhead, den ein besserer Encoder vermeiden könnte; es ist Arithmetik.
Wann sich das Einbetten lohnt
Für kleine Assets, die sofort gebraucht werden: ein Icon in einer CSS-Regel, ein 1 × 1 Abstandhalter, ein Logo in einer HTML-E-Mail, in der externe Bilder standardmäßig blockiert werden, ein Platzhalter, der rendern muss, bevor irgendetwas anderes lädt. In all diesen Fällen ist die gesparte Anfrage mehr wert als die 33%, die Sie ausgeben – eine Anfrage bringt DNS, Verbindungsaufbau und Roundtrip-Latenz mit, und über eine Mobilverbindung sind das ein paar Dutzend Millisekunden für eine Datei, die in einem einzigen Paket übertragen worden wäre.
Wann es ein Fehler ist
Für alles Große oder Wiederverwendete. Eine Data-URI lässt sich nicht unabhängig cachen: Betten Sie ein 200 KB großes Hero-Bild in Ihr Stylesheet ein, lädt jeder Besucher es erneut herunter, sobald sich irgendeine Regel in dieser Datei ändert. Parallel abrufen lässt es sich ebenfalls nicht – es ist Teil des Dokuments, wird also heruntergeladen, bevor das Dokument fertig ist, und blockiert genau das Rendern, das es beschleunigen sollte. Und es kann nicht lazy geladen, von einem CDN in der Größe angepasst oder Browsern, die es unterstützen, als WebP ausgeliefert werden.
Die grobe Grenze liegt bei ein paar Kilobytes. Darunter gewinnt das Einbetten meist; über etwa 10 KB verliert es meist, und diese Seite sagt es Ihnen, wenn Sie die Grenze überschreiten.
Content Security Policy
Eine strenge CSP blockiert Data-URIs, sofern Sie sie nicht ausdrücklich erlauben. Bilder brauchen img-src 'self' data: ; eine Schrift, die genauso eingebettet wird, braucht font-src, um data: ebenfalls zu erlauben. Das zu wissen lohnt sich, bevor Sie etwas einbetten und es nur in Produktion vermissen – genau dort, wo die CSP durchgesetzt wird.
Base64 ist keine Verschlüsselung
Das sollte klar gesagt werden, weil die Verwechslung verbreitet ist: Base64 ist eine Kodierung, von jedem reversibel, ohne jeden Schlüssel. Alles, was so eingebettet ist, ist genauso lesbar wie zuvor. Es verbirgt nichts.
Wo das läuft
In Ihrem Browser. Die Datei wird mit einem FileReader gelesen und lokal kodiert – nichts wird hochgeladen, was für ein Bild, das Sie gleich in Ihren eigenen Quellcode einbetten, die einzige sinnvolle Lösung ist.
Eingabe
icon.png — 1.2 KB image/png
Ausgabe
data:image/png;base64,iVBORw0KGgo… 1.6 KB (+33%) no HTTP request
Welche Optionen und Sonderfälle unterstützt Bild in Base64 umwandeln?
| Parameter | Typ | Standard | Verhalten & Sonderfälle |
|---|---|---|---|
| Daten-URI | data:… | Standard | Die URI allein. Einfach an jeder Stelle einfügen, wo eine URL erwartet wird. |
| CSS | background-image | — | Eine Regel, die direkt in ein Stylesheet eingefügt werden kann. |
| HTML | <img> | — | Ein img-Element, bei dem das alt-Attribut für Sie zum Ausfüllen freigelassen wurde. |
| JSON | string | — | Richtig in Anführungszeichen gesetzt, für eine API-Nutzlast oder eine Fixture-Datei. |
| Markdown | ![]() | — | Bild-Syntax, für eine README, die selbstständig sein muss. |
| Nur Base64 | ohne Präfix | — | Die kodierten Bytes allein, für ein Feld, das seinen eigenen MIME-Typ hinzufügt. |
| Größenkosten | +33% | — | Vier Ausgabezeichen pro drei Eingabebytes. Arithmetisch, kein Overhead. |
| CSP | img-src data: | — | Eine strikte Richtlinie blockiert Data URIs, bis dies erlaubt ist. |
Häufig gestellte Fragen
Warum ist das Base64 größer als das Bild?
Weil Base64 drei Bytes mit vier Zeichen darstellt, was von der Konstruktion her 33% mehr sind. Das Alphabet hat 64 Symbole, jedes Zeichen trägt also sechs Bits; drei Bytes sind vierundzwanzig Bits, genau vier Zeichen. Kein Encoder kann es besser machen, solange er in einem texttauglichen Alphabet bleibt. Wenn die Größe zählt, komprimieren Sie das Bild, bevor Sie es kodieren – dort liegen die Einsparungen.
Soll ich Bilder als Data-URIs einbetten?
Kleine, ja: Icons, Abstandhalter, ein Logo in einer HTML-E-Mail, alles unter ein paar Kilobytes, das sofort gebraucht wird. Die gesparte Anfrage ist meist mehr wert als die 33%, die Sie ausgeben. Große, nein: Eine Data-URI lässt sich nicht separat cachen, nicht parallel herunterladen und blockiert das Dokument oder Stylesheet, in dem sie steckt – ein eingebettetes 200-KB-Hero-Bild wird also bei jeder Änderung der Datei, die es enthält, erneut heruntergeladen und verzögert genau das Rendern, das es beschleunigen sollte.
Schützt eine Base64-Verschlüsselung das Bild?
Base64 ist keine Verschlüsselung. Es ist eine reversible Textkodierung ohne Schlüssel, gedacht dafür, Binärdaten durch Kanäle zu transportieren, die nur Text akzeptieren. Jeder kann es in einer Zeile in der Browser-Konsole dekodieren. Es bietet keinerlei Vertraulichkeit, und es so zu behandeln, als wäre es so, ist eine wiederkehrende Quelle echter Sicherheitsvorfälle.
Warum wird meine Data-URI von Content Security Policy blockiert?
Weil eine strenge CSP data: als Quelle behandelt, die ausdrücklich erlaubt sein muss. Für Bilder brauchen Sie ein img-src, das data: enthält; für eine eingebettete Schrift braucht auch font-src das. Der Fehler ist in der Entwicklung leicht zu übersehen, wo CSP oft nicht durchgesetzt wird, und zeigt sich erst in Produktion – prüfen Sie die Richtlinie also, bevor Sie sich aufs Einbetten festlegen.
Kann ich eine Data-URI zurück in eine Datei dekodieren?
Ja. Alles nach dem Komma ist Base64; dekodieren Sie es, und Sie haben die ursprünglichen Bytes, Byte für Byte – die Kodierung ist verlustfrei in beide Richtungen. Das Base64 Encode / Decode-Tool auf dieser Seite übernimmt den Text-Teil davon, und jeder Browser rendert eine Data-URI, die Sie direkt in die Adressleiste einfügen.
Wird das Bild zum Kodieren hochgeladen?
Nein. Die Datei wird vom FileReader Ihres Browsers gelesen und in diesem Tab kodiert; nichts wird übertragen. Das ist hier auf eine kleine, leicht übersehbare Art relevant – die Bilder, die Leute base64-kodieren, sind meist Assets aus einem laufenden Projekt, und die haben keinen Grund, irgendwohin übertragen zu werden.