Ein Bild in Base64 umwandeln
Verwandle ein Bild in eine Data-URI, die direkt in CSS, HTML oder JSON passt.
Bild hierher ziehen, um zu beginnen
Läuft im Browser. Nichts wird hochgeladen.
Eine Data-URI ist das Bild selbst, als Text geschrieben — ein Stylesheet oder ein Template trägt es also mit sich, statt auf eine Datei zu zeigen. Das spart der Seite eine Anfrage und dem Deployment eine Datei, und genau deshalb werden kleine Icons, Abstandshalter und E-Mail-Signaturen so oft auf diesem Weg eingebettet.
Aus derselben Kodierung kommen vier Formen, weil es die vier Stellen sind, an die sie eingefügt wird. Die Data-URI allein gehört in ein JSON-Feld oder in ein von Hand geschriebenes `src`-Attribut; die CSS-Regel und das img-Tag kommen mit bereits richtiger Syntax; und das rohe Base64 ohne das `data:`-Präfix ist das, was eine API erwartet, die eine nackte Zeichenkette will.
Der Preis ist die Größe: Base64 verbraucht vier Zeichen für je drei Bytes, der Text ist also rund ein Drittel größer als die Datei, aus der er stammt, und er liegt im kritischen Pfad des Dokuments, das ihn trägt, statt getrennt im Cache zu landen. Unter ein paar Kilobyte lohnt sich der Tausch meistens, über hundert meistens nicht — das Panel zeigt beide Zahlen, damit die Entscheidung keine Schätzung ist.
Schritt für Schritt
- 1Bild hierher ziehen.
- 2Wähle die Form, die du brauchst: die Data-URI, eine CSS-Regel, ein img-Tag oder das rohe Base64.
- 3Auf Kopieren drücken und dort einfügen, wo es hingehört.
Fragen
Was ist eine Data-URI?
Eine URL, die die Datei enthält, statt auf sie zu zeigen. Sie beginnt mit `data:`, nennt den Medientyp und trägt die Bytes Base64-kodiert — alles, was eine URL akzeptiert, akzeptiert damit das Bild selbst.
Warum ist das Base64 größer als mein Bild?
Binärdaten als Text zu kodieren kostet etwa 33 %, weil aus drei Bytes vier druckbare Zeichen werden. Kompression auf dem Transportweg holt einen Teil zurück, aber der Text bleibt immer größer als die Datei.
Wann sollte man ein Bild lieber nicht einbetten?
Wenn es groß ist, wenn mehrere Seiten es verwenden oder wenn es sich häufig ändert. Ein eingebettetes Bild lässt sich nicht eigenständig cachen und wird mit jeder Kopie des Dokuments erneut geladen.
Wird mein Bild zum Kodieren hochgeladen?
Nein. Die Datei wird vom Browser gelesen und in diesem Tab in Text verwandelt. Nichts wird irgendwohin gesendet — deshalb funktioniert es auch ohne Verbindung, sobald die Seite geladen ist.