Base64-Bilder: Praktische Falle oder nützliches Werkzeug?
Bilder als Base64-Strings einzubetten scheint praktisch. Hier erfährst du, wann es hilft und wann es schadet.
Du kannst ein Bild direkt in HTML oder CSS einbetten. Keine separate Datei. Keine zusätzliche HTTP-Anfrage.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
Praktisch. Aber es bringt Kosten mit sich, die nicht sofort offensichtlich sind.
Wie es funktioniert
Base64 kodiert Binärdaten als ASCII-Text. Jedes Bild wird zu einem String, den du kopieren und einfügen kannst.
Der String ist etwa 33% größer als die Originaldatei. Ein 30KB-Bild wird zu einem 40KB-String.
Wann Base64 hilft
Winzige Icons. Ein 200-Byte-Icon als Base64 spart eine HTTP-Anfrage. HTTP/2 hat das weniger wichtig gemacht, aber es ist immer noch sinnvoll für sehr kleine Bilder.
E-Mail-HTML. E-Mail-Clients blockieren externe Bilder. Eingebettete Bilder werden ohne die „Bilder laden"-Aufforderung angezeigt.
Einzeldatei-Distribution. HTML teilen, das offline funktioniert. Alles in einer Datei.
Data-URIs in CSS. Hintergrundbilder in Stylesheets eingebettet. Reduziert HTTP-Anfragen auf Kosten größerer CSS-Dateien.
Wann Base64 schadet
Große Bilder. Die 33%ige Größenzunahme summiert sich. Ein 100KB-Bild wird zu 133KB Text.
Caching. Externe Bilder werden separat gecacht. Base64-Bilder sind Teil des HTML/CSS – wenn sich die Seite ändert, wird alles neu geladen.
Parse-Zeit. Browser müssen Base64 vor dem Rendern dekodieren. Mehr Verarbeitung als das direkte Laden einer Binärdatei.
Wartung. Ein eingebettetes Bild zu aktualisieren bedeutet, Code zu bearbeiten. Eine externe Datei zu aktualisieren ist einfacher.
Der HTTP/2-Faktor
HTTP/1.1 hatte teuren Verbindungs-Overhead. Mehrere kleine Bilder bedeuteten mehrere langsame Anfragen.
HTTP/2 multiplext Anfragen effizient. Das Argument „HTTP-Anfragen sparen" ist jetzt schwächer.
Wenn dein Server HTTP/2 unterstützt (die meisten tun es), sind externe Bilder normalerweise besser.
Praktische Richtlinien
Unter 1KB: Erwäge Base64. Der Overhead ist minimal.
1-10KB: Bewerte Fall für Fall. Kritische Icons könnten profitieren, dekorative Bilder wahrscheinlich nicht.
Über 10KB: Verwende externe Dateien. Die Größenstrafe ist es nicht wert.
Häufig aktualisiert: Externe Dateien. Vermeide es, Code für Bildaktualisierungen zu ändern.
Über Seiten hinweg geteilt: Externe Dateien. Caching-Vorteile bei mehreren Seitenaufrufen.
Performance-Tests
Rate nicht. Teste.
Vergleiche das Gesamtseitengewicht mit und ohne Base64-Einbettung. Miss tatsächliche Ladezeiten.
Die „richtige" Antwort hängt von deiner spezifischen Situation ab – Bildgrößen, Caching-Strategie, HTTP-Version, Update-Häufigkeit.
Alternativen
Sprite-Sheets. Kombiniere kleine Icons in einem Bild, verwende CSS, um Teile anzuzeigen. Eine Anfrage, normales Caching.
Icon-Fonts. Vektor-Icons als Schriftarten. Skalierbar, mit CSS gestaltbar.
Inline-SVG. Für Vektorgrafiken bietet Inline-SVG mehr Flexibilität als Base64-PNG.
Base64-Bilder tauschen Dateigröße gegen Bequemlichkeit. Dieser Kompromiss macht nur Sinn für sehr kleine Bilder oder Spezialfälle wie E-Mail. Für die meiste Webnutzung funktionieren externe Dateien besser.