Image Data URIs sind eine nützliche Methode HTTP-Requests beim Aufruf einer Seite zu sparen. Anstelle der normalen Adresse zu einem Bild, ist es möglich die Bilddaten in Form eines Base64-kodierten Strings innerhalb des src-Attributs zu platzieren.
Ein kleines Beispiel
Zur Demonstration habe ich zwei identische Bilder eingebunden:
links mit Adresse im src-Attribut,
rechts mit Image Data URI
An dieser Stelle lohnt sich ein Blick in den Quelltext. Dort findet man folgenden Inhalt im src-Attribut des zweiten Bildes:
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFBAcHwMHBFBcX7+/voaKiQ0VFIyYm4 ODggYODYmRk0NDQU1VVsLGxkZKSMzY2cnR0////l9YmXAAAABF0Uk5T/////////////////////wAlrZliAAAC7klEQVR42uyayW4sIQxFzTzUlP//2tcvUhaRuuDamGpFwo te4tM2UNi+9PVhowWwABbAAlgAC2ABLIA/CpD2vAVLPxZC9vUxAOdLpDdmtyPNB3A+UMNONgMPIBVLPdvMNAATCLLTTwFIoPvvTWnUAVwmlm1OF8BEYpo9NAEuEhgWBATAnSS yWHUAqiWhWa8BsIv9v8yPA3gasjIKMOi/T9AB2GnYjhGAascBOvugCeA0/BNVMcCp4p+sEwJcpGRBBmBIzQ4JgIt6AJQEAJei/0YSbgESqZpnAwRdgMgFMETPhICeCcB9CG4A anOxy+qF4AagNNcy7lILwXsA117r9eiu/BwZBoAHlvLcPBQGwIn8F26pYHGABAYz8fKwwwAezuYeR3PwFmDDtxMnDxEGsJz9zMhDAgES80DBedhBgJ17otE8ZBAg868ULA8BB AiSOw0p4ONMgFfg+lcjCCC81b/SJjgGmgD9PJjZAL08YABpBKCdBwzADAE08/AMgCuDAHUM4LAf3YTm/OgpcOWzx/Do3YUVAzhlAObUuopF34Je9O+epSQpzI0g+pzPsWcDgM 30CwSoTID+V7BRHr59lPIAMlwiVRQgMAAYowwLP8sPGACO/vcEAwaoKEBmFageL06xhw13kORwgAwAJG6HYGOU56kLwK3Nb3s0JOlRGV5V3GoP3AG0qzMv6aFlXptOs1Hc7Nn TrFkRGID7Vm18JgD3AOaZADTa9arN2uj4AMkqAhjJyObQ819kQ6swPwFtAKeVhCqdG1Yd/14+uvWTN0B/eJ1n+++O78uo/9MNChjKXP+AhGNogFm6ShpAxOKn5R+V8Rg74/xx hExJJCSAZESolEtwHEE1GSpm447p4q4u5+OM6WxGxXQcQaODC7Hi8FVZkk53RNV/zwb4XzB0bsbNMxfky3rdXm7iYDfv2MvJhM3VX+H3hgjlkCmbR6Td1Rjjj9ePGVhkidsXw AJYAAtgASyABbAAPg7wT4ABAEYSjudgB/2SAAAAAElFTkSuQmCC
Zur besseren Lesbarkeit darf übrigens Whitespace vorhanden sein.
Image Data URI Generator
Um an die Data URI zu gelangen, habe ich einen kleinen Generator in meiner DevZone gebastelt, der eine URL zu seinem beliebigen Bild im Web entgegennimmt und die passende Image Data URI zurückgibt.
Image Data URI Generator
Weiterführende Links
Auf Wikipedia gibt es eine ausführliche Auflistung der Vor-und Nachteile. Außerdem werden dort die unterstützten Browser aufgelistet. Bedauerlicherweise wird der IE7 nicht supportet und im IE8 sind die Data URIs auf 32 kB beschränkt.
Kategorie: Webentwicklung » HTML & CSS | Tags: Adresse, App, Attribut, Base64, Beispiel, Bild, Browser, Demo, Generator, HTTP, IE7, IE8, Image Data URI, Nachteile, Quelltext, Request, String, Vorteile, Whitespace, Wikipedia
