Bilder direkt in den Code einbetten
Manchmal braucht man ein Bild ohne separate Datei: ein Icon in einem Stylesheet, ein Logo in einem eigenständigen HTML-Bericht, einen Platzhalter in einer JSON-API-Antwort, ein Bild in einem Markdown-Dokument oder einen Hintergrund in einer Komponentenbibliothek. Dieser Converter kodiert jedes Bild als Base64 und formatiert es direkt zum Einfügen – als Data-URI, reines Base64, CSS background-image, HTML <img>-Tag oder Markdown-Bildsyntax.
Funktionen
- Alle gängigen Bildformate: PNG, JPG, GIF, WebP, AVIF, SVG, ICO und mehr.
- Fünf Ausgabeformate für verschiedene Einsatzzwecke.
- Größenvergleich zwischen der Originaldatei und dem kodierten Text.
- Bildvorschau mit Transparenz-Raster.
- Kopieren mit einem Klick.
- Privat: Die Datei verlässt niemals deinen Browser.
Ausgabebeispiele
| Format | Beispiel |
|---|---|
| Data-URI | data:image/png;base64,iVBORw0KGgo… |
| Base64 | iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt="logo"> |
| Markdown |  |
Eingebettete Bilder klein halten
Eingebettete Bilder können nicht separat im Cache gespeichert werden und werden bei jedem Aufruf der Seite oder des Stylesheets, das sie enthält, neu heruntergeladen. Als Faustregel gilt: Bette nur Bilder ein, die kleiner als ein paar Kilobyte sind. Verkleinere Bilder zunächst mit Bilder komprimieren, wandle Vektor-Icons mit SVG in PNG um, falls eine Rastergrafik benötigt wird, oder kodiere andere Dateien und Texte mit dem Base64-Encoder.