Bild in eine Base64-Data-URI umwandeln
Kleine Icons und Wasserzeichen direkt in HTML, CSS, JSON oder E-Mail-Templates als Base64 einbetten — ohne zusätzlichen HTTP-Request und ohne fehlende Assets.
Weitere Utilities, die gut zu dieser Anleitung passen:
Warum das wichtig ist
Eine Transaktions-E-Mail braucht ein kleines Logo. Ein Remote-Link funktioniert — bis der Client Remote-Inhalte „aus Datenschutz“ blockiert. Lösung: Logo als data:image/png;base64,... inline. Kosten: etwa +33 % Größe; bei winzigen Assets (unter 4 KB) überwiegen Einsparung bei Latenz und garantierte Darstellung. Dasselbe gilt für Favicons, CSS-Hintergrund-Icons und gebündelte SVG-Sprites in Static-Site-Generatoren.
Drei echte Szenarien
80×80-Logo kodieren, Data-URI in <img> src.
Kein „Remote-Bilder laden“-Dialog
background-image: url(data:image/svg+xml;base64,...) hält das Bundle in sich geschlossen.
Ein Request weniger
Thumbnail kodieren, in JSON einbetten; Client rendert ohne Folge-Request.
Ein Roundtrip
Schritt für Schritt
Öffnen Sie das Bild-zu-Base64-Tool.
Bild ablegen
PNG, JPEG, WebP, GIF, SVG, ICO. Auslesen per File API im Browser.
Ausgabeformat wählen
Volle Data-URI (
data:image/png;base64,...) fürsrcoder CSS. Roh-Base64 für JSON-Felder, wenn das Präfix serverseitig gesetzt wird.URL-sichere Kodierung
Standard-Base64 mit
+/passt für HTML/CSS. URL-safe (-_) hilft in Query-Strings oder Dateinamen.Kopieren oder herunterladen
Sehr lange Strings auch als
.txtverfügbar.
Quelle
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
Profi-Tipps
- Nur kleine Assets inline (≤ 4 KB). Größere Bilder blähen HTML/CSS/JSON über den Gewinn des eingesparten Requests auf.
- SVG für Icons bevorzugen. SVG komprimiert gut in Base64 und skaliert verlustfrei.
- In CSS die
url()-Form.background: url(data:image/png;base64,...)ist breit unterstützt. - E-Mail in echten Clients testen. Outlook unter Windows hatte historisch Macken mit Data-URIs; modernes Gmail/Apple Mail meist ok.
Typische Stolpersteine
Stolperstein
URI übersteigt CSS-Zeichenlimits
Manche ältere Parser scheitern an mehr-MB-Zeilen. Große Bilder auf CDN; nur Kleines inline.
Stolperstein
URI in JSON kaputt wegen "/" in der Data-URL
JSON muss / nicht escapen — manche Editoren tun es trotzdem. URL-sicheres Base64 umgeht das.
Stolperstein
Inline-Bilder in HTML-Mail wegen CID-Konflikt
Manche Clients bevorzugen cid: statt data:. Mit Zielclient testen; bei Bedarf beides als Fallback.
Wann dieses Tool nicht passt
- Serverseitiges Bulk-Inlining im Build — Webpack
url-loaderoder Vite?inline. - Bildverarbeitung vor Kodierung — zuerst mit dem Bildkompressor optimieren.
- Sehr große Bilder — 5 MB Base64 im JSON ist verschwendung; CDN-URL servieren.
FAQ
Wie groß ist der Overhead?
Base64 bläht etwa um 33 % auf. 1 KB PNG werden ~1,37 KB als Data-URI.
Cachen Browser eingebettete Bilder?
Nein — jede Seite mit Data-URI parst die Bytes neu. Darum lohnt Inline nur für Kleines.
Wird mein Bild hochgeladen?
Nein. Encoder liest lokal und gibt die Zeichenkette aus.
Nächste Schritte
- Rückrichtung — Data-URI wieder als Datei mit Base64 zu Bild.
- Vor Kodierung komprimieren: Bildkompressor.
- Format mit dem Bildkonverter wechseln, wenn nur JPEG erlaubt ist.