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?
Inhaltsverzeichnis
Einsatz im HTML[Bearbeiten]
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.
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.
- 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.
Gegenüberstellung[Bearbeiten]
- 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.
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
Quellen[Bearbeiten]
- ↑ selfHTML-Forum: SVG-Sprites in CSS vom 24.11.2015
Weblinks[Bearbeiten]
- fastix.org:
- (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/