Generiere Data-URI
Data-URIs sind eine Methode, um Ressourcen direkt in ein Dokument einzubetten, anstatt sie als separate Dateien zu laden. Stellen Sie sich vor, Sie haben z.b. ein kleines Bild (Icon) oder andere Dateien direkt in deinen HTML- oder CSS-Code eingefügt, die der Browser darstellen kann, ohne eine extra Anfrage an den Server stellen zu müssen.
Sie eignen sich insbesondere für kleine Dateien, wo eine Kommunikation selbst einen relevanten Teil der Übertragung der Daten verursachen und ausmachen würde, indem Sie das Darstellen beschleunigen und so das Nutzeerlebnis verbessern.
Da sie selbst aber länger als die reinen Daten ist, sind Sie nicht ohne Nachteil.
Das Tool erlaubt Ihnen eine Datei in eine Data-URI zu konvertieren und informiert Sie zudem über die Auswirkung auf die Größe. Damit können Sie den besten Kompromiss finden.
Inhalt
- Tool: Generiere Data-URI
- Was ist eine Data-URI und wie funktioniert sie?
- Vorteile von Data-URIs
- Nachteile von Data-URIs
- Wann und wofür sollten Data-URIs genutzt werden?
- Wann sollten Data-URIs vermieden werden?
- Zusammenfassung
Tool: Generiere Data-URI
Die Nutzung ist einfach. Laden Sie die zu konvertierende Datei hoch.
Es wird der dabei von Ihrem Browser gemeldete MIME-Typ verwendet.
Sie sehen dann die Data-URI, die Sie direkt koopieren und nutzen können.
Zudem sehen Sie die Größe Ihrer Datei, die Größe der Data-URI und die verbleibende Größe nach Gzip-Komprimierung.
Viel Erfolg beim Beschleunigen Ihrer Web-Site und somit Verbesserung des Nutzererlebnisses.
Bitte laden Sie die zu konvertierende Datei hoch.
Was ist eine Data-URI und wie funktioniert sie?
Eine Data-URI (Uniform Resource Identifier) ist ein Schema, das es ermöglicht, Daten inline in Webseiten oder anderen Dokumenten einzubetten. Anstatt auf eine externe Datei zu verweisen, enthält die URI selbst die Daten.
Die grundlegende Syntax einer Data-URI sieht so aus:
data:[<mediatype>][;base64],<data>
Dabei bedeutet:
- data:: Das Schema, das anzeigt, dass es sich um eine Data-URI handelt.
- [<mediatype>]: Optional. Gibt den MIME-Typ der Daten an, z.B. image/png, text/plain. Wenn nicht angegeben, wird standardmäßig text/plain;charset=US-ASCII angenommen. Der MIME-Typ ist wichtig, damit der Browser entscheiden kann, was mit den Daten zu tun ist. Der Browser würde den Typ sonst vom Dateinamen ableiten, der bei Einbettung natürlich nicht vorliegt.
- [;base64]: Optional. Gibt an, dass die Daten Base64-kodiert sind. Dies ist die häufigste Methode, um binäre Daten wie Bilder einzubetten. Bei Base64 werden 64 (druckbare) Zeichen (6 Bit) verwendet, um die binären Bytes (8 Bit) portabel zu kodieren. 3 Byte werden so mit 4 Zeichen repräsentiert.
- ,<data>: Die eigentlichen Daten, entweder als reiner Text oder Base64-kodiert.
Beispiel für ein kleines rotes PNG-Bild als Data-URI:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Roter Punkt">
In diesem Beispiel muss der Browser keine separate Anfrage für roter-punkt.png stellen. Die Bilddaten sind direkt im src-Attribut des <img>-Tags enthalten. Der Browser dekodiert die Base64-Zeichenkette und rendert das Bild als image/png.
In der gleichen Art kann jede Art von Datei direkt inkludiert werden.
Vorteile von Data-URIs
Reduzierte HTTP-Anfragen
Der größte Vorteil ist die Einsparung von HTTP-Anfragen. Jede externe Datei (Bild, Schriftart, etc.) erfordert normalerweise eine eigene Anfrage an den Server. Bei vielen kleinen Dateien kann dies die Ladezeit einer Seite spürbar verlangsamen. Durch das Einbetten der Ressourcen werden diese Anfragen eliminiert.
Potenziell schnellere Ladezeiten für kleine Ressourcen
Insbesondere bei sehr kleinen Dateien kann das direkte Einbetten schneller sein, als den Overhead einer HTTP-Anfrage (Handshake, Header, übertragene Cookies, etc.) in Kauf zu nehmen.
Unabhängigkeit von externen Dateien
Das Dokument wird eigenständiger, da alle benötigten (kleinen) Ressourcen direkt enthalten sind. Dies kann nützlich sein, wenn Webseiten ohne Netzwerbindung genutzt, als einzelne HTML-Datei gespeichert, oder per E-Mail versendet werden sollen.
Vermeidung von Blocking
Externe CSS- oder JavaScript-Dateien können das Rendern einer Seite blockieren, bis sie geladen sind. Inline-Daten (obwohl bei JS und CSS oft anders gehandhabt) sind sofort verfügbar, da sie bereits mit (=in) der HTML-Datei heruntergeladen wurden.
Nachteile von Data-URIs
Größere Dateigröße des Hauptdokuments
Wie bereits erwähnt, vergrößert die Base64-Kodierung die Datenmenge um etwa 33% im Vergleich zur ursprünglichen Binärdatei. Wenn Sie viele oder große Dateien einbetten, kann die HTML- oder CSS-Datei selbst sehr groß werden.
Dieser Nachteil kann oft durch serverseitige Gzip-Kompression abgemildert werden, die generell zu einer Beschleunigung führt und de facto Standard ist. Hier wird nicht die Datei als solche heruntergeladen, sondern:
- der Server komprimiert die Datei.
- diese so kürzere Datei wird übertragen.
- der Browser dekomprimiert sie vor Verwendung.
Trotz des Aufwandes des Komprimierens und Dekomprimierens ist dies i.a. schneller, als sie unkomprimiert zu übertragen. Da Base64-kodierte Daten oft repetitive Zeichenfolgen enthalten, lassen sie sich besonders gut komprimieren. Das Tool zeigt Ihnen neben Originalgröße, Größe der Data-URI und die effektive Größe komprimierter Data-URI an. So haben Sie einen besseren Überblick, um den Impact zu bewerten.
Kein Caching durch den Browser (für die eingebettete Ressource selbst)
Eine als Data-URI eingebettete Ressource wird bei jedem Aufruf der Seite neu "geladen", da sie Teil des Hauptdokuments ist. Externe Dateien hingegen können vom Browser zwischengespeichert werden. Wenn dasselbe Bild auf vielen verschiedenen Seiten deiner Website verwendet wird, müsste es bei Verwendung von Data-URIs jedes Mal mit der Seite übertragen werden. D.h. auch, dass ein in der gleichen Seite mehrfach verwendetes Icon so mehrfach enthalten wäre.
Sie können dies leicht umgehen, indem Sie die Data-URI beispielsweise in einer externen CSS-Datei verwenden. Denn dann wird diese CSS-Datei vom Browser gecacht. Verwenden Sie also das gleiche Icon (als Data-URI) auf mehreren Seiten oder der gleichen Seite, aber immer über dieselbe (gecachte) CSS-Datei, wird die Data-URI nicht jedes Mal neu geladen, sondern mit der CSS-Datei aus dem Cache bereitgestellt.
Schlechtere Lesbarkeit und Wartbarkeit des Codes
Lange Base64-Strings machen den HTML- oder CSS-Code natürlich unübersichtlich und schwerer zu pflegen. Das Aktualisieren einer eingebetteten Ressource ist umständlicher als das Ersetzen einer externen Datei.
Limitierungen bei der Größe
Browser haben oft eine Obergrenze für die Länge von URIs. Sehr große Dateien können daher nicht als Data-URI eingebettet werden. Allerdings ist das Aufgrund der bereits erwähnten Längenzuwachs kaum eine Limitierung.
Sicherheitsaspekte
In einigen Kontexten (z.B. E-Mails) können Data-URIs für Phishing oder das Einschleusen schädlicher Inhalte missbraucht werden, weshalb manche E-Mail-Clients oder Sicherheitssoftware sie blockieren.
Wann und wofür sollten Data-URIs genutzt werden?
Das Tool zeigt Ihnen die Originalgröße, die Größe der Data-URI und die Größe der komprimierten Data-URI an, womit Sie fundiert entscheiden können, wo der Einsatz Sinn macht. Dies sind zum Beispiel:
Sehr kleine, oft verwendete Icons oder Grafiken
Kleine Symbole, Logos oder Hintergrundmuster, die nur wenige Byte bis Kilobyte groß sind, sind ideale Kandidaten. Hier überwiegt oft der Vorteil der eingesparten HTTP-Anfrage den Nachteil der etwas größeren Dateigröße (vor allem nach Kompression).
Kritische, kleine CSS-Hintergrundbilder
Für Elemente, die sofort sichtbar sein müssen (Above-the-Fold-Content), kann das Einbetten kleiner Hintergrundbilder die wahrgenommene Ladezeit verbessern.
Ein Spezialfall ist hier das sofortige Anzeigen eines Bildes geringerer Auflösung, welches dann ersetzt wird, wenn eines mit höherer Auflösung separat geladen wurde. Das gibt Ihrem Besucher sofortiges Feedback und ein hochauflösendes Bild später.
In Prototypen oder eigenständigen HTML-Dokumenten
Wenn eine Webseite als einzelne Datei weitergegeben oder offline genutzt werden soll, sind Data-URIs praktisch.
Schriftarten (mit Bedacht: Dateigröße beachten)
Kleine Schriftarten-Subsets können als Data-URI in CSS eingebettet werden, um das Flackern von Text (FOUT/FOIT) zu reduzieren. Hier ist die Größenabwägung besonders wichtig.
Wann sollten Data-URIs vermieden werden?
Die beschriebenen Nachteile führen dazu, dass Data-URI mitunter nicht verwendet werden sollten, zumindest nicht direkt:
Große Bilder oder Dateien
Das Einbetten von Fotos oder anderen umfangreichen Ressourcen führt zu aufgeblähten HTML/CSS-Dateien und sollte vermieden werden. Hier ist die externe Verlinkung mit Browser-Caching die bessere Wahl.
Das Tool zeigt Ihnen neben Originalgröße, Größe der Data-URI und die effektive Größe komprimierter Data-URI an. So haben Sie einen besseren Überblick, um den Impact zu bewerten.
Ressourcen, die auf vielen Seiten identisch wiederverwendet werden (und nicht in einer gecachten CSS-Datei stehen)
Wenn Sie ein Bild auf 100 Seiten einbinden und es jedes Mal als Data-URI im HTML-Code steht, wird es 100 Mal übertragen. Eine externe, gecachte Datei wäre hier deutlich effizienter.
Wenn die Data-URI in einer separaten CSS-Datei eingebettet ist, die von allen 100 Seiten genutzt wird, wird die CSS-Datei gecacht, und der Nachteil des fehlenden individuellen Cachings der Ressource ist hinfällig.
Zusammenfassung
Data-URIs reduzieren die Anzahl der Anfragen und beschleunigen so das Rendering gerade bei der Verwendung bei kleinen Dateien, wie Icons. Sie können für alle Dateien genutzt werden, haben selbst aber auch Auswirkungen auf die Dateilänge der einbettenden Datei, was mitunter gut durch Caching und komprimierte Übertragung mitigiert werden kann.
Das Tool übernimmt die Konvertierung und versorgt Sie mit den relevanten Informationen.