Inline-Bilder im Content
Anders als bei extern abgelegten Bildern werden Inline-Bilder direkt in den HTML-Code einer Internetseite eingebaut. Der Unterschied bei der Nutzung des IMG-Tags beschränkt sich auf andere Angaben im SRC-Attribut der Bildelemente. Hier werden statt eines externen Links die Base64-kodierte Bilddaten eingebettet.
Im Unterschied zu einem externen Verweis werden die Bilddaten bei einem Inline eingebetteten Bild direkt als Zeichenkette im SRC-Attribut des IMG-Tags angegeben. Hier weist man den Browser mit dem einleitenden String „data:” darauf hin, dass die Bilddaten direkt aus dem Attribut ausgelesen werden können. Abgesehen von den unterschiedlichen Angaben im SRC-Tag gibt es bei der Verwendung des IMG-Elements nichts weiter zu beachten – alle anderen Attribute können bei beiden Varianten auf die gleiche Weise verwendet werden.
Im darauf folgenden Teil „image/<Typ>;” legt man den Dateityp der Graphik fest, wobei anstelle von <Typ> das durch die Bilddaten genutzt Graphikformat angegeben wird – hier steht etwa gif, jpg oder png zur Festlegung des entsprechenden Dateiformats. Dies ist bei extern verlinkten Bilddateien nicht nötig, da der Webserver bei einer Anfrage der Bilddatei automatisch den zugehörigen Typ mit dem von ihm gelieferten HTTP-Response – dem Antwort-Header des zuvor gestellten HTTP-Requests – zurück liefert, was die Browseranwendung zu einer korrekten Interpretation des gelieferten Datenmaterials bewegt.
Anschließend folgen, wiederum eingeleitet durch die Zeichenkette „base64,”, die Base64-kodierten Bildddaten die im oberen Script an Stelle von <Bilddaten> eingefügt werden. Die Bilddaten müssen zuvor durch ein Programm, welches eine binäre Datei in den Base64-Code umwandelt, auf einen ASCII-Zeichensatz kodiert werden, da die in einer Bilddatei enthaltenen Sonderzeichen nicht in einem HTML-Dokument enthalten sein dürfen – ähnlich arbeitet aus ein E-Mail-Client, wenn dieser binäre Dateien als Anhang in eine Mail einbettet. Damit ist die Einbettung auch schon erledigt und alle Browseranwendungen, die diese Technik beherrschen stellen das eingebettete Bild entsprechend dar.
Durch die Base64-Kodierung wächst allerdings auch das zu übertragende Datenvolumen einer eingebetteten Bilddatei gegenüber dem der extern gespeicherten Datei um etwa ein Drittel des Umfangs der Bilddatei an. Entsprechend vergrößert sich auch das ausgelieferte HTML-Dokument – was nicht weiter schlimm ist, wenn Bildmaterial mit einer angemessenen Sparsamkeit integriert wird. Umso wichtiger ist eine vorherige Optimierung des Bildmaterials, da die Steigerung der zu übertragenen Datenmenge in beiden Fällen zu größeren Datenmengen und damit auch längeren Latenzzeiten führt.
Aufgrund der Tatsache, dass die Base64-kodierten Daten sich recht gut packen lassen, macht es – gerade bei Internetseiten die eingebettete Bilddateien enthalten – Sinn die HTML-Datei in gepackter Form an den Client auszuliefern. Auf diese Weise kann der Base64-geschuldete Datenmengenzuwachs komplett wieder aufgehoben werden, so dass der Nachteil der Steigerung des Datenvolumens letztlich entfällt.