Data-URL
- leicht
- 10min
Data-URL ist ein URI-Schema, das es ermöglicht, Daten so ins HTML-Markup einzubetten, als wären es externe Ressourcen.
Es tendiert dazu, einfacher zu sein als andere Einbettungsmethoden, wie MIME mit cid- oder mid-URIs. Data-URLs werden oft als Uniform Resource Locators bezeichnet, obwohl sie keinen externen Inhalt referenzieren. In Wirklichkeit sind sie Uniform Resource Identifier. Die Data-URL wird im RFC 2397 der Internet Engineering Task Force (IETF) definiert. Obwohl die IETF die Data-URL-Spezifikation 1998 veröffentlichte, wurde diese niemals formell als Standard erhoben.
Inhaltsverzeichnis
Aufbau
Eine Data-URI wird gemäß diesem Schema gebildet:
data:[<mime type>][;charset=<Zeichensatz>][;base64],<Daten>
Auf die Schemaangabe data: folgt ein Informationsteil, dann ein Komma und schließlich die codierten Daten. Der Informationsteil muss als erstes den MIME-Type der Daten enthalten, die in der Data-URL enthalten ist. Um die Data-URL als Datenquelle für ein <img>-Element einzusetzen, muss dies natürlich ein image-Typ sein, der ein vom Browser unterstütztes Grafikformat repräsentiert.
Auf den Mime-Typ kann optional eine charset-Angabe folgen, die für Text-Medientypen benötigt wird. Die charset-Angabe bezieht sich auf die Zeichencodierung der eingebetteten Datei, nicht auf die Data-URL, denn URLs müssen immer im ASCII codiert sein.
Wenn Sie eine Binärdatei (beispielsweise .jpg oder .png) als Data-URL darstellen möchten, können Sie jedes Byte der Datei URL-codieren, das benötigt aber 3 Zeichen pro Byte der Datei. Deshalb gibt es die weitere Option base64, die anzeigt, dass hinter dem Komma eine base64-codierte Datei folgt. Diese Codierung benötigt 4 nur Textzeichen für 3 Bytes der Datei. Das Selfhtml-Wiki enthält ein Helferlein zum Erstellen von base64-codierten Data-URLS, das etwas weiter unten eingebettet ist.
Whitespace in base64-Codierungen wird beim Dekodieren übersprungen, deshalb können Sie eine base64-codierte Data-URL in einem HTML Attribut wie src problemlos auf mehrere Zeilen verteilen.
- Firefox versteht kein
#[1]
Helferlein: Data-URLs erstellen
Unser Helferlein geht davon aus, dass Sie ein binäres Grafikformat codieren möchten und verwendet deshalb immer die base64-Codierung.
Das Data-URI-Generator Helferlein ist nur mit JavaScript sicht- und nutzbar.
Einsatz im HTML
<!-- … -->
<h1>Grafiken mit Data-URI</h1>
<h2>tick</h2>
<img width="16" height="16" alt="tick" src="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYY
DJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW
7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReAS
FZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">
<!-- … -->
Wenn man diese Seite speichert, so ist das Bild immer noch fest im HTML-Code verdrahtet. Kein Warten also, bis die Bilder nachgeladen sind. Es ist keine Spielerei, sondern so wird es möglich, z. B. Firmenlogos fest in die HTML-Seiten zu integrieren.
Einsatz im CSS
Wenn Sie Grafiken im HTML als Data-URI referenzieren, werden diese nicht im Cache vorgehalten, wie es bei einer Grafikdatei der Fall wäre. Die Grafik muss also für jede Seite, auf der sie benötigt wird, wird neu übertragen werden, solange sich nicht das HTML-Dokument selbst im Cache befindet.
Bei <img>-Elementen ist das unvermeidlich, aber bei Hintergrundgrafiken können Sie das vermeiden, indem Sie die Data-URL in eine CSS-Datei einbinden. Die Data-URL wird dann als Teil der CSS-Datei mit gecached.
li {
background:
url('data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv\
2sPjv2CmV1unU4zPgI/Sg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAF\
VyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQA\
InXhwOUtgCUQoORFCGt/g4QAIQA7')
no-repeat left center;
}
Es ist auch möglich, Data-URLs im SVG-Format einzubinden. Allerdings können solche Grafiken z.B. bei :hover nicht eingefärbt werden, so dass der Einsatz von SVG-Sprites heute praktischer ist.
→ Hauptartikel: SVG als Data-URL im CSS
Fazit
- Data-URI-Grafiken sind base64-codiert ca. 33% größer als externe Bilddateien.
- Der Bildaufbau dauert gerade bei mobilen Geräten länger. (Artikel von 2013, ursprünglich auf mobify.com, kann auf Englisch bei catchpoint.com nachgelesen werden.[2])
- Data-URI-Grafiken benötigen einen zusätzlichen Verarbeitungsschritt, um sie zu erstellen. Das macht es umständlicher, die darin codierten Bilder zu verändern.
→ Hauptartikel: SVG/Tutorials/Icons
Sie finden hier das erste Beispiel einmal mit Grafiken als Data-URI und einmal als extern referenzierte Grafiken.
- Speicherbedarf: 26.289 Byte
- zu übertragende Datenmenge: 19.255 Byte
- Anzahl HTTP-Requests: 1
- Ladezeit beim erstmaligen Laden: 200 ms
- Ladezeit nach Caching: 200 ms
- Speicherbedarf: 20.143 Byte
- zu übertragende Datenmenge: 19.211 Byte
- Anzahl HTTP-Requests: 4
- Ladezeit beim erstmaligen Laden: 480 ms
- Ladezeit nach Caching: 300 ms
Weblinks
- ↑ SELFHTML-Forum: SVG-Sprites in CSS vom 24.11.2015
- ↑ On Mobile, Data URIs are 6x Slower than Source Linking (catchpoint.com)
