Grafik/Grafiken mit Data-URI

Aus SELFHTML-Wiki
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?

Einsatz im HTML[Bearbeiten]

  • IE 8
  • Firefox
  • Safari
  • Chrome
  • Opera
Beispiel 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"> <!-- … -->
ansehen …

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.

Beispiel: Schema
data:[<mime type>][;charset=<Zeichensatz>][;base64],<Daten>

Der MIME-Type zeigt, welches Grafikformat verwendet wird, charset die Zeichenkodierung und base64 die Datenkodierung.

Die Daten können durch Leerzeichen getrennt und so formatiert werden.

Internet Explorer 8 begrenzt die Länge der Data-URLs auf 32 Kilobyte.

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 benötigen maskierte Sonderzeichen:
  • Internet Explorer versteht kein < und >
  • Firefox versteht kein # [1]

Einsatz im CSS[Bearbeiten]

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 neu übertragen werden, solange sich nicht das HTML-Dokument selbst im Cache befindet.

Wenn Sie die Grafiken in eine externe CSS-Ressource einbinden, können Sie erreichen, dass auch diese Grafiken als Bestandteil der CSS-Ressource nur einmal übertragen werden müssen.

Beispiel ansehen …
li { background: url(data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2Cm V1unU4zPgI/Sg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQ PbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7) no-repeat left center; }
ansehen …

Gegenüberstellung[Bearbeiten]

Beachten Sie: → Alternativen wie der Einsatz von SVG-Sprites, CSS-Sprites oder UTF-8-Symbolen als Icons sind praktischer.

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

Beispiel: 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
ansehen …
Beispiel: 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
ansehen …

Quellen[Bearbeiten]

  1. ↑ selfHTML-Forum: SVG-Sprites in CSSvom 24.11.2015

Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Grafik/Grafiken_mit_Data-URI&oldid=58154“