Was ist eine Data URI?
Ein Data URI (Uniform Resource Identifier) Schema ermöglicht es, kleine Dateien direkt in HTML- oder CSS-Dokumente einzubetten. Anstatt auf eine externe Bilddatei zu verlinken, wird das Bild in eine Base64-Textfolge kodiert. Dadurch kann der Browser das Bild sofort rendern, ohne eine zusätzliche HTTP-Anfrage zu stellen.
Warum Bilder lokal verarbeiten?
Sicherheit und Geschwindigkeit. Viele Online-Entwicklertools laden deine Dateien zur Verarbeitung auf externe Server hoch. Dies kann ein Sicherheitsrisiko darstellen, wenn du mit proprietären Assets, unveröffentlichten UI-Designs oder sensiblen Bildern arbeitest. Dieses Tool verwendet die native FileReader-API deines Browsers, um die Base64-Zeichenfolgen zu generieren. Deine Bilder verlassen dein Gerät niemals.
Wann sollte ich Base64-Bilder verwenden?
Das direkte Einbetten von Bildern in deinen Code kann HTTP-Anfragen reduzieren, sollte aber strategisch eingesetzt werden.
- Ideal für: Kleine Icons, Lade-Platzhalter, kleine UI-Elemente oder HTML-E-Mail-Vorlagen, bei denen externe Bilder blockiert werden könnten.
- Vermeiden für: Große Fotos oder komplexe Grafiken. Die Base64-Kodierung erhöht die Dateigröße um etwa 33%. Das Platzieren eines 2MB großen Bildes direkt in deiner CSS-Datei führt zu schwerwiegenden Rendering-Blockaden und verlangsamt die Ladezeiten deiner Seite.