Keine großen Base64-Bilder

Große Inline-Bilder blähen HTML auf und bremsen den Start.

Das Thema dieser Seite: Base64 ist für kleine Icons ok, aber für größere Bilder ineffizient.

Zurück zur Übersicht

Inhalt

Klicke auf einen Abschnitt, um direkt dorthin zu springen.

Der Check identifiziert Inline-Bilder im HTML und bewertet, ob deren Größe ein definiertes Limit überschreitet.

Base64 wird oft eingesetzt, um Requests zu sparen. Das kann bei großen Assets jedoch das Gegenteil bewirken.

Situation	Symptom	Risiko
Inline-Hintergrundbilder	HTML größer als erwartet	Lange TTFB und Rendering-Zeit
CMS mit Base64-Uploads	Quelltext überfrachtet	Schlechter CLS und Debugging-Probleme
SVGs als Base64	Schwer wartbar	Fehlerhafte Caching-Strategie

Wann Base64 ok ist und wann nicht.

Wenn	Dann	Empfehlung
Kleines Icon (< 1 KB)	Inline ok	Base64 erlaubt
Bild > einige KB	HTML wird groß	Als Datei ausliefern
Viele Inline-Bilder	Cache geht verloren	Externe Assets mit Cache nutzen

Base64 vergrößert Dateien um ca. 33 Prozent. Deshalb lohnen sich Inline-Bilder nur für sehr kleine Assets.

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iLi4uIi8+" alt="" />

<img src="/img/hero.webp" alt="Hero" width="1200" height="680" />

Risiko	Folge	Gegenmaßnahme
Base64 für Hero-Bilder	HTML wird extrem groß	Assets extern laden
Kein Browser-Cache	Mehr Daten pro Seitenaufruf	Externe Dateien mit Cache-Control
Unklare Wartbarkeit	Fehler schwer zu finden	Base64 nur gezielt einsetzen