Bild-zu-Base64-Konverter

Was das Tool macht

Dieses Tool wandelt ein Bild in Base64-Text und eine sofort einfügbare Data URI um. Eine Data URI bettet das Bild direkt in HTML, CSS, Markdown, JSON oder eine E-Mail ein, sodass die Seite eine HTTP-Anfrage weniger braucht und das Snippet ohne separat gehostete Datei funktioniert. Es klappt auch umgekehrt: Füge Base64 oder eine Data URI ein, um das Bild als Vorschau zu sehen und herunterzuladen.

So funktioniert es

1. Zieh ein Bild in die Ablagezone, klicke auf Bild auswählen oder auf Beispiel, um ein SVG-Logo zu laden.
2. Die Vorschau zeigt das Bild mit Typ, Dateigröße, Base64-Größe und Abmessungen.
3. Wähle ein Format unter Ausgabe:
   • Data URI: data:image/png;base64,…, für src-Attribute und JSON.
   • Nur Base64: der reine String, optional nach 76 Zeichen umbrochen für MIME- und PEM-artige Verwendung.
   • CSS-Hintergrund: eine vollständige Deklaration background-image: url("…");.
   • HTML <img>: ein Image-Tag mit der Data URI als src.
   • Markdown: ![image](data:…).
4. Kopiere das Ergebnis. Zum Dekodieren fügst du stattdessen Base64 oder eine Data URI in das Eingabefeld ein und klickst auf Bild herunterladen.

Beispiel

Ein PNG mit 2×1 Pixeln wird zu:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

In CSS verwendet:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Wann sich Inline-Bilder lohnen

Inline-Einbettung hilft bei kleinen, häufig genutzten Bildern wie Icons, winzigen Hintergründen, Lade-Spinnern und E-Mail-Signaturen. Für Fotos und große Grafiken eignet sie sich schlecht: Base64 vergrößert die Datei um etwa ein Drittel, das Bild kann nicht getrennt von Seite oder Stylesheet gecacht werden, und es verzögert das Parsen des restlichen Dokuments. Als Faustregel gilt: Halte Inline-Bilder unter ein paar Kilobyte. Für SVG ist eine prozentkodierte Data URI (data:image/svg+xml,…) oft kleiner als Base64, und das Tool akzeptiert beides.