Grafik/Grafiken mit Data-URI

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

• 
• 
• 
• 
• 

Beispiel So sieht's aus

<!-- … --> <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"> <!-- … -->

So sieht's aus

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 Zeichencodierung und base64 die Datencodierung.

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 #

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 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 So sieht's aus

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

So sieht's aus

Gegenüberstellung

Beachten Sie:

• Data-URI-Grafiken sind ca. 30% größer als externe Bilddateien.
• Der Bildaufbau dauert gerade bei mobilen Geräten länger. (http://www.mobify.com/blog/data-uris-are-slow-on-mobile/)
• Data-URI-Grafiken lassen sich nur schwer ändern und anpassen.

→ Alternativen wie der Einsatz von SVG-Sprites, CSS-Sprites oder Unicode-Zeichen 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 So sieht's aus

• 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

So sieht's aus

Beispiel: externe Grafiken So sieht's aus

• 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

So sieht's aus

Weblinks

• fastix.org:
  • Data-URI-Generator (online)
  • Data-URI-Generator (download)
• (englischsprachiger) Online Image to Data Converter
• (englischsprachiger) Base64-Encoder
• (deutschsprachiger) Base64-Encoder und Base64-Decoder
• http://best-web-design-tools.com/field/data-uri/
• http://tools.ietf.org/html/rfc2397
• http://www.mobify.com/blog/data-uris-are-slow-on-mobile/