Bild zu Base64

Wann sich das Einbetten lohnt

Eine Daten-URL spart eine Anfrage, kann aber nicht eigenständig zwischengespeichert werden: Sie wird mit jeder Kopie des HTML- oder CSS-Dokuments, das sie enthält, erneut heruntergeladen und ist etwa ein Drittel größer als die Datei. Dieser Kompromiss eignet sich für winzige Bilder von wenigen Kilobyte, etwa ein Symbol in einem Stylesheet oder einen verschwommenen Platzhalter. Fotos und Bilder, die auf mehreren Seiten verwendet werden, laden als gewöhnliche Dateien schneller. Bei SVG ist eine URL-Kodierung des Markups statt Base64 normalerweise kürzer.

Wo Daten-URLs nicht funktionieren

Gmail und viele andere E-Mail-Programme zeigen Bilder, die als Daten-URLs eingebettet sind, nicht an. Verlinke in Newslettern daher stattdessen auf ein gehostetes Bild. Viele APIs, die Base64-Bilder akzeptieren, erwarten nur die Nutzdaten: Lösche alles bis einschließlich des Kommas nach base64. Eine Seite mit einer Content-Security-Policy muss data: in ihrer img-src-Direktive aufführen, damit eingebettete Bilder geladen werden.

So benutzt du es

1. Wähle ein Bild aus.
2. Kodiere es lokal.
3. Kopiere die resultierende Data-URL.

Datenschutz & Einschränkungen

Die Datei bleibt auf deinem Gerät. Base64 ist eine Kodierung, keine Verschlüsselung, und erhöht die Größe um grob ein Drittel.