Bild als Base64 kodieren kostenlos – Online-Tool ohne Upload
Base64-Kodierung wandelt Binärdaten wie Bilder in einen Text-String um. Das ermöglicht es, Bilder direkt in HTML, CSS oder JSON einzubetten – ohne separate Bild-Dateien und externe HTTP-Anfragen. WikiPlus Image-to-Base64 konvertiert Bilder schnell und kostenlos, vollständig lokal im Browser ohne Upload.
Was ist Base64 und warum braucht man es?
Base64 ist ein Kodierungsverfahren, das Binärdaten (wie Bilddateien) in einen ASCII-Text-String umwandelt. Das Ergebnis sieht so aus: data:image/png;base64,iVBORw0KGgo... gefolgt von Tausenden von Zeichen. Warum Base64 für Bilder? HTML und CSS sind Text-Formate. Wenn du ein Bild direkt in einen HTML-String oder eine CSS-Datei einbetten willst, musst du das Binärbild in Text umwandeln. Base64 löst dieses Problem. Typische Anwendungsfälle: Bilder in HTML-E-Mails einbetten (damit Empfänger sie sehen, ohne externe Bilder herunterzuladen). Kleine Icons oder Logos direkt in CSS einbetten (ein HTTP-Request weniger). Bilder in JSON-Daten speichern (für APIs oder Konfigurationsdateien). Favicon in HTML-Head einbetten. Single-Page-Applications, die vollständig als eine HTML-Datei funktionieren sollen.
Base64-Bild in HTML einbetten
Das Einbetten eines Base64-Bilds in HTML ist einfach. Verwende das img-Tag mit einem Data-URI als src-Attribut: <img src="data:image/png;base64,DEIN_BASE64_STRING" alt="Bild-Beschreibung" /> WikPlus kopiert den vollständigen Data-URI-String in die Zwischenablage, fertig für das Einfügen in deinen HTML-Code. Wichtig bei der Syntax: Das Format ist immer data:[MIME-Type];base64,[kodierte Daten]. Für PNG: data:image/png;base64,... Für JPEG: data:image/jpeg;base64,... Für GIF: data:image/gif;base64,... Für SVG: data:image/svg+xml;base64,... Vorteile im HTML: Das Bild ist immer verfügbar – kein Abhängigkeit von externen Bildservern. Ideal für E-Mail-HTML, wo externe Bilder oft blockiert werden. Kein separater HTTP-Request für das Bild.
Base64-Bild in CSS und JavaScript verwenden
In CSS kann Base64 als background-image verwendet werden: .mein-element { background-image: url('data:image/png;base64,DEIN_BASE64_STRING'); } Das ist besonders nützlich für kleine Grafiken wie Icons, Muster oder Texturen, die direkt in die CSS-Datei eingebettet werden sollen. Bei sehr kleinen Bildern (unter 1 KB) kann das sinnvoll sein – ein HTTP-Request kostet mehr als die Base64-Größe. In JavaScript: const img = new Image(); img.src = 'data:image/png;base64,...'; – das erstellt ein Bild-Objekt ohne HTTP-Anfrage. In Canvas-Elementen: Canvas kann Base64-Bilder direkt als Quelle verwenden. Das ist nützlich für dynamische Bildverarbeitung im Browser, wo externe URLs nicht erlaubt sind (z.B. Cross-Origin-Einschränkungen).
Größe und Performance-Auswirkungen von Base64
Base64-kodierte Bilder sind etwa 33% größer als die originalen Binärdateien. Ein 100 KB PNG-Bild wird zu einem ~133 KB Base64-String. Das ist ein wichtiger Performance-Faktor. Wann Base64 sinnvoll ist: Für sehr kleine Bilder (unter 5 KB) sind die 33% Overhead vernachlässigbar, aber der eingesparte HTTP-Request macht es schneller. Für Icons, Favicons, kleine UI-Elemente. Wann Base64 ungünstig ist: Für große Bilder (über 20 KB) ist Base64 eine schlechte Wahl. Die Datei-Größe steigt deutlich, und der Browser kann das Bild nicht separat cachen – es wird immer mit der HTML/CSS-Datei neu geladen. E-Mail-Ausnahme: In HTML-E-Mails ist Base64 für alle Bildgrößen oft sinnvoller als externe Links, weil E-Mail-Clients externe Bilder standardmäßig blockieren. Empfänger sehen Base64-Bilder sofort ohne Freigabe.