Umsetzungsleitfaden

Base64-Bilder in CSS verwenden

Eine Base64 Data URL als kleines, eigenständiges Stilelement in background-image einsetzen.

.icon {
  background-image: url('data:image/webp;base64,UklGR...');
  background-size: contain;
  background-repeat: no-repeat;
}

URL in Anführungszeichen setzen

Umschließen Sie die vollständige Data URL in url() mit Anführungszeichen. Das vermeidet Parserprobleme und erleichtert das Kopieren.

Dekorative Bilder wählen

CSS-Hintergründe besitzen keinen Alternativtext. Inhaltlich wichtige Bilder sollten daher meist als HTML-img-Element eingebunden werden.

Vor- und Nachteile messen

Inline-Daten können eine Anfrage sparen, vergrößern aber das Stylesheet und verhindern separates Caching. Bevorzugen Sie kleine, seitenspezifische Dateien.

Wählen Sie das passende Werkzeug oder die passende Anleitung für den nächsten Schritt.

Base64-Ausgabe erstellenEin lokales Bild kodieren und das passende Format kopieren.Data-URL-GeneratorPräfix normalisieren und Nutzdaten prüfen.Base64-Bilder in HTMLDie andere Einbettungsmethode vergleichen.