So funktioniert es
- Wählen Sie ein Bild aus, ziehen Sie es hierher oder fügen Sie es mit Strg+V ein.
- Wählen Sie die Ausgabe – Data-URI, Nur Base64, CSS-Hintergrund, HTML <img> oder Markdown.
- Kopieren Sie das Ergebnis.
- Für den umgekehrten Weg fügen Sie eine Data-URI oder einen Base64-String unter „Base64 in Bild“ ein.
Optionen erklärt
- Data-URI
- Der vollständige String data:image/png;base64,…, verwendbar überall, wo eine URL akzeptiert wird.
- Nur Base64
- Nur die codierten Daten ohne das Präfix data:…;, für APIs und JSON-Felder, die reines Base64 erwarten.
Beispiele
| Ausgabe | Ergebnis |
|---|---|
| Data-URI | data:image/png;base64,iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt=""> |
Häufig gestellte Fragen
Wie viel größer wird ein Bild durch Base64?
Etwa ein Drittel. Base64 verwendet vier Zeichen für je drei Bytes, aus einem 30-KB-Bild werden also rund 40 KB Text.
Wann sollte ich ein Bild als Base64 einbetten?
Bei kleinen Icons und Bildern unter ein paar Kilobyte spart das Einbetten eine Netzwerkanfrage. Größere Bilder sind als separate Dateien besser, weil sie gecacht werden können und Ihr HTML oder CSS nicht aufblähen.
Welche Formate werden unterstützt?
Jedes Bild, das Ihr Browser lesen kann, darunter PNG, JPEG, GIF, WebP, SVG, AVIF und ICO. Beim Decodieren wird das Format anhand der Daten selbst erkannt, wenn der MIME-Typ fehlt.
Werden meine Bilder hochgeladen?
Nein. Codieren und Decodieren laufen in Ihrem Browser.
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.