Data-URL

Aus SELFHTML-Wiki
(Weitergeleitet von Grafik/Grafiken mit Data-URI)
Wechseln zu: Navigation, Suche
Wussten Sie schon, dass Sie Bilder ohne einen weiteren HTTP-Request durch das Laden einer externen Bild-Datei in HTML-Seiten einbauen können?

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.

Aufbau

Eine Data-URI wird gemäß diesem Schema gebildet:

Schema einer Data-URI:
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.

Beachten Sie: Gerade Firmenlogos oder öfter verwendete Symbole werden aber nicht immer wieder neu übertragen, sondern aus dem Cache aufgerufen. Dieser Vorteil geht hier verloren.
Beachten Sie: Data-URIs, die nicht base64-codiert sind, benötigen maskierte Sonderzeichen:
  • 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

DATA-URL in HTML ansehen …
<!-- … -->
  <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.

DATA-URL in CSS ansehen …
li { 
  background:
    url('data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv\
       2sPjv2CmV1unU4zPgI/Sg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAF\
       VyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQA\
       InXhwOUtgCUQoORFCGt/g4QAIQA7')
    no-repeat left center;
}
Beachten Sie: Wenn Sie eine Data-URL im CSS notieren, base64-String auf mehrere Zeilen verteilen möchten, müssen Sie auf Grund der CSS Syntaxregeln die Data-URL in Anführungszeichen setzen und die Zeilenumbrüche mit \ maskieren.

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/Tutorials/Einstieg/Einbindung#SVG als Data-URL im CSS

Fazit

Beachten Sie:
  • 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.
→ Alternativen wie der Einsatz von SVG-Sprites, CSS-Sprites oder Unicode-Zeichen als Icons sind praktischer.
Empfehlung: Verwenden Sie - so weit möglich - kleine SVGs, die Sie als SVG-Sprites definieren und dann beliebig im HTML einbinden können.
Hauptartikel: SVG/Tutorials/Icons

Sie finden hier das erste Beispiel einmal mit Grafiken als Data-URI und einmal als extern referenzierte Grafiken.

Data-URI ansehen …
  • 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
externe Grafiken ansehen …
  • 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

  1. SELFHTML-Forum: SVG-Sprites in CSS vom 24.11.2015
  2. On Mobile, Data URIs are 6x Slower than Source Linking (catchpoint.com)