Bild zu Base64
Zieh ein beliebiges Bild in diesen Bild-zu-Base64-Konverter und erhalte eine Data-URI sowie fertige Snippets für HTML, CSS und JavaScript. Eingebettete Bilder sparen bei kleinen Icons HTTP-Requests und sind unverzichtbar für einzelne HTML-Dateien, E-Mail-Templates und Offline-Apps.
So wandelst du Bild zu Base64 online um
- Wähle eine Bilddatei aus oder füge eine Bild-URL ein.
- Wähle die Ausgabe: Data-URI,
<img>, CSS-Hintergrund, Favicon, JSON und mehr. - Klicke auf Bild in Base64 kodieren.
- Sieh dir das Bild an und kopiere den Code.
Weitere Bild zu Base64-Konverter
Ausgabeformate
Wähle, wie das Ergebnis verpackt werden soll. Der Konverter kann Folgendes liefern:
- txt: nur den Base64-String, bereit zum Einfügen in Code, ein Datenbankfeld oder eine API-Anfrage.
- uri: eine vollständige
data:-URI, die du in die Adressleiste des Browsers einfügen oder überall dort verwenden kannst, wo eine URL akzeptiert wird. - html img: ein
<img>-Tag mit der Data-URI insrc. - css background image: eine CSS-Regel mit
background-image: url(data:...). - html favicon: ein
<link rel="icon">-Tag für ein eingebettetes Favicon. - html hyperlink: einen
<a>-Link, der die eingebettete Datei herunterlädt oder öffnet. - html iframe: einen
<iframe>, der den Inhalt inline darstellt. - javascript image: JavaScript, das ein
Image-Objekt erzeugt. - javascript popup: JavaScript, das den Inhalt in einem neuen Fenster öffnet.
- json: ein JSON-Objekt mit Dateiname, MIME-Typ und Daten.
- xml: ein XML-Element mit den Daten in einem CDATA-Abschnitt.
Wann solltest du Bilder als Base64 einbetten?
Bette kleine Bilder (unter etwa 5–10 KB) wie Icons, Logos und Platzhalter inline ein, um Requests zu sparen. Vermeide das bei großen Fotos: Sie machen HTML/CSS schwerer, lassen sich nicht separat cachen und verzögern das Rendering. Mehr dazu unter Data-URIs erklärt.
Häufige Fragen
Wie wandle ich ein Bild in Base64 um?
Wähle dein Bild, stelle "Data-URI" oder "<img>" als Ausgabe ein und klicke auf "Bild in Base64 kodieren". Kopiere das Ergebnis in dein HTML oder CSS.
Welche Bildformate werden unterstützt?
Jedes Format, das dein Browser lesen kann: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF und mehr.
Wie verwende ich ein Base64-Bild in HTML?
Setze die Data-URI in das src-Attribut: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Kommentare (0)
Fragen, Ideen oder ein Fehler in „Bild zu Base64“? Schreib einen Kommentar, bewerte das Tool oder antworte anderen.
Noch keine Kommentare. Teile als Erste(r) dein Feedback!