Was ist Base64?
Base64 ist ein Kodierungssystem, das binäre Daten — wie die Bytes, aus denen ein Bild besteht — in eine Abfolge reiner Textzeichen umwandelt. Der Name kommt daher, dass das System 64 unterschiedliche Zeichen (Großbuchstaben, Kleinbuchstaben, Zahlen, + und /) verwendet, um jede Art von Daten darzustellen.
In der Praxis bedeutet das, dass jede Bilddatei in eine lange Textzeichenkette wie diese umgewandelt werden kann:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCDieses Format wird Data URI (oder Data URL) genannt. Statt auf eine externe Datei zu verweisen, trägt die URL den eigentlichen Bildinhalt als kodierten Text in sich. Der Browser liest diese Zeichenkette und rendert das Bild direkt, ohne zusätzliche HTTP-Anfrage.
Wie der Aufbau eines Data URI funktioniert
Jeder Bild-Data-URI folgt demselben Muster:
data:[MIME-Typ];base64,[kodierte Daten]Die Komponenten sind:
- data: — fester Präfix, der das Schema identifiziert
- [MIME-Typ] — das Bildformat, wie
image/png,image/jpeg,image/svg+xmloderimage/gif - ;base64, — zeigt an, dass der Inhalt in Base64 kodiert ist
- [kodierte Daten] — die lange Zeichenkette mit dem in Text umgewandelten binären Bildinhalt
Wichtig zu beachten: Die Base64-Kodierung erhöht die Datengröße um etwa 33%. Ein 3-KB-Bild wird zu einer Zeichenkette von etwa 4 KB. Dieser Mehraufwand entsteht, weil das System mehr Zeichen benötigt, um dieselben Bytes darzustellen.
Wie man Base64 in HTML verwendet
Um ein Base64-Bild direkt in HTML anzuzeigen, setze einfach den Data URI in das src-Attribut des <img>-Tags:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icon">Der Browser behandelt dieses Element genau wie ein normales Bild. Sie können CSS anwenden, Breite und Höhe festlegen und es in jedem Kontext nutzen, in dem ein <img>-Tag akzeptiert würde.
Wie man Base64 in CSS verwendet
In CSS wird der Data URI hauptsächlich bei Hintergrundbild-Eigenschaften verwendet:
.icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}Diese Technik ist besonders üblich bei kleinen SVG-Icons, die dynamisch per CSS eingefärbt werden müssen, oder bei Hintergrundbildern, die Teil wiederverwendbarer Komponenten in Bibliotheken sind.
💡 Tipp für SVG: SVG-Dateien können als Base64 oder direkt als Inline-SVG in HTML eingebettet werden — ohne Kodierung. Inline-SVG ist meist besser lesbar und einfacher mit CSS und JavaScript zu manipulieren, während Base64 bevorzugt wird, wenn das SVG in einer externen CSS-Datei liegt.
Wann Base64 verwenden — und wann vermeiden
Die Entscheidung zwischen Base64 und einer externen Datei hängt hauptsächlich von der Bildgröße und dem Nutzungskontext ab. Die folgende Tabelle fasst die häufigsten Szenarien zusammen:
| Situation | Empfehlung | Grund |
|---|---|---|
| Kleine Icons und Sprites (< 2 KB) | ✅ Base64 empfohlen | Eliminiert HTTP-Anfrage ohne spürbaren Einfluss auf die Größe |
| In CSS eingebettete Favicons | ✅ Base64 empfohlen | Praktisch und ohne Abhängigkeit von externer Datei |
| Platzhalter und Lade-Skeletons | ✅ Base64 empfohlen | Lädt sofort mit dem HTML, ohne Inhalts-Flackern |
| HTML-E-Mails | ✅ Base64 empfohlen | Viele E-Mail-Clients blockieren externe Bilder |
| Inhaltsbilder (Fotos, Banner) | ❌ Vermeiden | Erhöht die HTML-Größe und verhindert Browser-Caching |
| Bilder über 5 KB | ❌ Vermeiden | Größenzuschlag (+33%) beeinträchtigt das Laden |
| Auf mehreren Seiten wiederverwendete Bilder | ❌ Vermeiden | Externe Datei wird gecacht; Base64 wird bei jeder Seite neu geladen |
Vorteile von Base64 für Bilder
Im richtigen Kontext genutzt, bringt Base64 echte Vorteile:
- Keine zusätzliche HTTP-Anfrage — das Bild ist direkt in HTML oder CSS eingebettet, was die Ladelatenz für kritische Bilder oberhalb des Folds reduziert.
- Funktioniert offline und in E-Mails — da es nicht von einem externen Server abhängt, wird das Bild auch ohne Verbindung (in Offline-Apps) oder in E-Mail-Clients angezeigt, die externe Inhalte blockieren.
- Vollständige Portabilität — eine einzelne HTML-Datei mit Base64-Bildern kann versendet oder archiviert werden, ohne visuelle Referenzen zu verlieren.
- Atomares Laden — das Bild erscheint genau dann, wenn das HTML-Element gerendert wird, ohne zusätzliche Verzögerung — ideal, um Layout-Flackern bei Interface-Icons zu vermeiden.
Nachteile und Einschränkungen
Base64 hat auch Kosten, die sorgfältig abgewogen werden müssen:
- 33% größere Datei — die Umwandlung in Text erhöht immer das Volumen der übertragenen Daten. Bei großen Bildern bedeutet das zusätzliche Kilobytes ohne jeglichen Nutzen.
- Kein Browser-Caching — Bilder in externen Dateien werden vom Browser gecacht und zwischen Seiten wiederverwendet. In HTML eingebettetes Base64 wird bei jedem Besuch erneut geladen, da es an das Dokument gebunden ist.
- Erschwert die Wartung — ein Bild im Code zu ersetzen erfordert, die Datei erneut zu konvertieren und eine neue lange Zeichenkette in HTML oder CSS einzufügen, was aufwendig und fehleranfällig ist.
- Verschlechtert die Code-Lesbarkeit — lange Base64-Zeichenketten in CSS oder HTML machen die Datei schwer zu lesen und zu prüfen.
- Nicht effizient per gzip komprimierbar — gzip und Brotli komprimieren repetitiven Text gut, aber Base64-Zeichenketten haben hohe Entropie und profitieren kaum von der Komprimierung, anders als eine binäre Bilddatei.
⚠️ Faustregel: Nutze Base64 nur für Bilder unter 2 KB. Für alles andere ist eine optimierte externe Datei — besonders im WebP- oder AVIF-Format — die effizientere Wahl für die Website-Performance.
Base64 und Website-Performance (PageSpeed)
Der Einfluss von Base64 auf die Performance hängt direkt davon ab, was kodiert wird. Bei kleinen Icons kann die Eliminierung einer HTTP-Anfrage die wahrgenommene Time to First Byte verbessern und die Anzahl benötigter paralleler Verbindungen reduzieren. Das kann sich positiv auf die Core-Web-Vitals-Metriken auswirken, besonders auf den LCP (Largest Contentful Paint), wenn das Hauptelement der Seite ein eingebettetes Icon ist.
Andererseits erhöht das Einbetten großer Bilder in Base64 direkt die Größe des HTML-Dokuments und verzögert den Renderingbeginn. Google PageSpeed Insights neigt dazu, Seiten mit übermäßig schwerem HTML abzuwerten. Für Fotos und Banner ist eine optimierte externe Datei immer der richtige Weg.
Wenn du Bilder fürs Web optimieren musst, ist der erste Schritt, sie zu komprimieren und in das effizienteste Format zu konvertieren. Der Bild-Kompressor von ImageTools erledigt das direkt im Browser, ohne deine Dateien an einen Server zu senden.
Wie man ein Bild in Base64 konvertiert
Es gibt mehrere Möglichkeiten, eine Base64-Zeichenkette aus einem Bild zu erzeugen:
- Online-Tools — der schnellste Weg für den einmaligen Gebrauch. ImageTools bietet das Tool Bild zu Base64, das jedes Bild im Browser konvertiert und den fertigen Code zum Kopieren liefert.
- Terminal (Linux/macOS) — der Befehl
base64 bild.pngerzeugt die kodierte Zeichenkette. Um den vollständigen Data URI zu erzeugen:echo "data:image/png;base64,$(base64 -w 0 bild.png)". - JavaScript im Browser — mit der
FileReader-API lässt sich jede vom Nutzer ausgewählte Datei asynchron in Base64 umwandeln. - Webpack und Bundler — Tools wie Webpack, Vite und Rollup haben Plugins, die kleine Dateien während des Builds automatisch inline zu Base64 konvertieren, nach einem konfigurierbaren Größenlimit.
Jetzt Bild zu Base64 konvertieren
Lade dein Bild hoch und erhalte den vollständigen Data URI, bereit zur Nutzung in HTML oder CSS. 100% Verarbeitung im Browser.
Base64-Tool öffnen →Häufig gestellte Fragen
Was ist Base64 bei Bildern?
Base64 ist eine Methode, um binäre Daten (wie Bilder) in ASCII-Text zu kodieren. Statt die Bilddatei separat zu laden, wird der Inhalt in eine lange Zeichenkette umgewandelt, die direkt in HTML oder CSS eingebettet werden kann und einen Data URI bildet.
Verschlechtert die Umwandlung eines Bildes in Base64 die Website-Performance?
Das hängt von der Nutzung ab. Bei kleinen Bildern (Icons, Favicons, Platzhalter) kann Base64 die Performance verbessern, indem es eine HTTP-Anfrage eliminiert. Bei großen Bildern erhöht es die Seitengröße und verhindert das Browser-Caching, was die Performance verschlechtert.
Welche maximale Größe wird für die Nutzung von Base64 empfohlen?
Die Faustregel ist, Base64 nur für Bilder unter 2 KB zu verwenden. Darüber machen die durch die Kodierung verursachte Größenzunahme (etwa 33% mehr) und der Verlust des Cachings die externe Datei zur effizienteren Option.
Funktioniert Base64 in allen Browsern?
Ja. Das Data-URI-Format mit Base64 wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und ihren mobilen Äquivalenten. Sehr alte Browser wie IE6 unterstützen es nicht, das ist heute jedoch praktisch kein Problem mehr.
Wie konvertiere ich ein Bild online zu Base64?
Du kannst das Tool Bild zu Base64 von ImageTools nutzen. Lade einfach das Bild hoch, und das Tool generiert automatisch die Base64-Zeichenkette und den fertigen Data-URI-Code zur Nutzung in HTML oder CSS.