Was ist Base64?
Base64 ist ein Verfahren zur Kodierung von Binärdaten als ASCII-Text. Es wandelt beliebige Binärdaten (wie Bilder) in eine Zeichenkette um, die nur aus druckbaren ASCII-Zeichen besteht (A–Z, a–z, 0–9, + und /). Der Name kommt von der Verwendung von 64 verschiedenen Zeichen.
Für Bilder bedeutet das: Statt einer separaten Bilddatei kann das Bild als langer Text direkt in HTML, CSS oder JavaScript eingebettet werden. Das nennt man eine Data-URL.
Wie sieht eine Base64 Data-URL aus?
Eine Data-URL für ein kleines PNG-Icon könnte so aussehen:
data:— gibt an, dass es sich um eine Data-URL handeltimage/png— MIME-Type des Bildes;base64,— Trennzeichen mit Encoding-AngabeiVBORw0KGgo…— der eigentliche Base64-kodierte Bildinhalt (oft sehr lang)
In HTML würde man das so verwenden: <img src="data:image/png;base64,iVBORw0KGgo...">
🔄 Direkt konvertieren: Mit dem JNRT Pixel Base64-Konverter kannst du jedes Bild direkt im Browser in eine Base64 Data-URL umwandeln — und umgekehrt.
Wann sind Base64 Data-URLs sinnvoll?
Kleine Inline-Ressourcen
Für sehr kleine Bilder (unter 2–3 KB) kann Base64 sinnvoll sein, um einen zusätzlichen HTTP-Request zu vermeiden. Jeder HTTP-Request hat Overhead (DNS-Lookup, TCP-Verbindung, HTTP-Header) — bei sehr kleinen Ressourcen ist dieser Overhead manchmal größer als das Bild selbst.
CSS-Sprites und Backgrounds
Kleine Hintergrundbilder in CSS können als Data-URL direkt in die CSS-Datei eingebettet werden. Beim ersten Laden der CSS-Datei ist das Bild sofort verfügbar — ohne separaten Request.
Offline-fähige Anwendungen
In PWAs und Offline-Apps können kritische Icons als Base64 direkt ins HTML oder JavaScript eingebettet werden. Das stellt sicher, dass sie ohne Netzwerkverbindung verfügbar sind, ohne Service Worker oder Cache-Strategien.
E-Mail-Templates
E-Mail-Clients blocken oft externe Bilder. Kleine Logos und Icons als Base64 direkt in den HTML-E-Mail-Code einzubetten umgeht dieses Problem — das Bild wird sofort angezeigt ohne Nutzerinteraktion.
Canvas-API Ausgabe
Die HTML Canvas API gibt verarbeitete Bilder standardmäßig als Data-URL aus (canvas.toDataURL()). JNRT Pixel nutzt diese Methode für die clientseitige Bildkomprimierung.
Wann Base64 zu vermeiden ist
Große Bilder
Base64-Kodierung erhöht die Dateigröße um ca. 33% (3 Bytes Binär werden zu 4 Zeichen ASCII). Ein 100 KB Bild wird als Base64 ca. 133 KB Text — und dieser Text ist schlechter komprimierbar als das Original-Binärformat. Für Bilder über 5 KB sollten separate Dateien bevorzugt werden.
Caching
Eingebettete Base64-Bilder können nicht separat gecacht werden. Wenn sich das Bild ändert, muss das gesamte HTML oder CSS neu geladen werden. Separate Bildateien mit langem Cache-Header sind deutlich effizienter.
Mehrfachverwendung
Wenn dasselbe Bild auf mehreren Seiten verwendet wird, ist eine externe Datei effizienter: Der Browser cached sie einmal und nutzt sie auf allen Seiten. Base64 muss auf jeder Seite neu geladen werden.
Base64 in verschiedenen Kontexten
| Kontext | Syntax |
|---|---|
| HTML <img> | <img src="data:image/png;base64,..."> |
| CSS background | background-image: url("data:image/png;base64,...") |
| CSS content | content: url("data:image/svg+xml;base64,...") |
| JavaScript | fetch("data:image/jpeg;base64,...") |
| JSON API | Als String-Wert in JSON-Objekten |
Sicherheitshinweise
Base64 ist kein Verschlüsselungsverfahren — es ist nur eine Kodierung. Base64-kodierte Bilder sind genauso lesbar wie normale Bilder, nur in einem anderen Format. Für sensible Bilder bietet Base64 keinerlei Schutz.
Bei SVG-Dateien als Data-URL ist Vorsicht geboten: SVG kann JavaScript enthalten. Bilder aus unbekannten Quellen niemals als Data-URL vertrauen oder in sensiblen Kontexten verwenden.
Fazit
Base64 Data-URLs sind ein nützliches Werkzeug für spezifische Anwendungsfälle: kleine Inline-Ressourcen, E-Mail-Templates und Offline-Apps. Für größere Bilder auf regulären Websites sind separate Dateien mit Caching fast immer die bessere Wahl. Mit dem JNRT Pixel Konverter lässt sich die Umwandlung in beide Richtungen direkt im Browser vornehmen.