Entwickler / Kodierung
Data-URI-Generator
Wandle jede Datei in eine Data-URI um – mit direkt einfügbaren CSS- und HTML-Schnipseln, einer kleineren URL-kodierten Option für SVG und der Größenabweichung der kodierten Datei.
Data-URI-Generator: Eine Data-URI (RFC 2397) fügt den Inhalt einer Datei direkt in einen Link oder ein Stylesheet ein, sodass keine separate Anfrage nötig ist. Bei der Base64-Kodierung werden aus jeweils 3 Bytes 4 Zeichen, daher wachsen Dateien um etwa ein Drittel. SVG ist Text und kann stattdessen mit Prozentzeichen kodiert werden. Dabei werden nur Zeichen wie %, #, < und > maskiert, was normalerweise kleiner ist. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Entwicklerwerkzeuge
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
Die Datei wird in deinem Browser gelesen und niemals hochgeladen.
Wo Data-URIs funktionieren
Daten-URIs funktionieren in img src, CSS url(), link href für Symbole und Links zum Herunterladen. Browser verhindern, dass Seiten eine Daten-URI als oberste Seite öffnen, und eine strenge Content Security Policy muss data: für Bilder oder Stile erlauben, die solche URIs verwenden.
Um Text statt Dateien zu kodieren, nutze den Base64-Kodierer. Für Bilder mit einer fertigen Base64-Zeichenfolge steht das Tool Bild in Base64 zur Verfügung.
Zusätzlicher Speicherbedarf
Base64 vergrößert die Datei um ein Drittel. Die Textkomprimierung auf dem Server (gzip oder Brotli) macht jedoch einen großen Teil davon wieder wett, da sich der kodierte Text gut komprimieren lässt. Die tatsächlichen Nachteile bestehen darin, dass die Daten nicht separat im Cache gespeichert werden können und bei jeder Seite oder jedem Stylesheet, das sie enthält, erneut heruntergeladen werden.
So benutzt du es
- Wähle eine Datei aus oder ziehe sie hierher; Bilder werden als Vorschau angezeigt.
- Wähle für SVG-Dateien die URL-Kodierung oder die Base64-Kodierung.
- Kopiere die Data-URI oder den CSS- bzw. HTML-Schnipsel.
Datenschutz & Einschränkungen
Die Datei wird in deinem Browser gelesen und niemals hochgeladen.
Ähnliche Tools
Häufige Fragen
Wann sollte ich eine Data-URI verwenden?
Für kleine Dateien, die nur einmal verwendet werden, etwa Symbole mit weniger als einigen Kilobytes. Größere Dateien sollten separat ausgeliefert werden, damit der Browser sie zwischenspeichern und parallel laden kann.
Warum sollte ich für SVG die URL-Kodierung verwenden?
Das SVG bleibt lesbar und ist normalerweise kleiner als mit Base64. Doppelte Anführungszeichen werden zu einfachen Anführungszeichen, damit das Ergebnis in url("…") oder ein HTML-Attribut passt.
Gibt es eine Größenbeschränkung?
Moderne Browser akzeptieren Data-URIs mit vielen Megabytes in Bildern und Stylesheets. Große Data-URIs verlangsamen jedoch die Verarbeitung und machen Webseiten schwerer.
Kostenloses Tool · läuft in deinem browser · kein Konto nötig