Seitentemplate mit Bildern
Der auf dieser Website genutzte Rahmen ist im Template der Seite verankert und wird direkt mit dem Stylesheet an den Webbrowser ausgeliefert. Durch die Einbettung werden HTTP-Requests gespart und die Latenzzeit der Internetseite wird verringert.
Zur Verdeutlichung wie die Integration von Bildern in das Template einer Internetseite realisiert werden kann, eignet sich ein Blick auf das Seitentemplate, welches durch die gerade durch Ihren Browser dargestellte Internetseite genutzt wird. Auch hier werden eingebettete Bilder verwendet, wenn auch in einem eher spartanischen Umfang. So wird etwa das Favicon der Seite direkt mit ihrem HTML-Code ausgeliefert. Aber auch der um den Darstellungsbereich gezogene Rahmen ist direkt im Stylesheet der Seite eingebettet.
Die einzelnen Bilder, aus denen der Rahmen zusammengesetzt ist, sind hier innerhalb des Stylesheets – das Seitentemplate setzt sich aus einem HTML-Teil sowie einem zugehörigen Stylesheet zusammen – abgelegt, da die meisten Besucher mehrere einzelne Seiten der Website abrufen. Dabei sind die Bilder mittels Sprite-Graphiken zusammengefasst, damit bei Seitenaufrufen von Besuchern, die den Internet Explorer nutzen auch möglichst wenige Anfragen an den Webserver gestellt werden müssen, wenn dieser Browser die Graphiken noch einmal einzeln abrufen muss, um sie korrekt darstellen zu können.
Moderne Browser laden das Stylesheet lediglich einmal (beim ersten Seitenaufruf) herunter und erhalten damit zugleich die zur Darstellung des Rahmentemplates benötigten Bilddaten. Bei eventuell darauf folgenden Seitenaufrufen werden die Bilddaten, ebenso wie bei der externen Speicherung in separaten GIF- oder JPG-Dateien, aus dem Browsercache entnommen. Anders als mit extern abgelegten GIF- und JPG-Bildern benötigt dieser erste Seitenaufruf allerdings – zumindest mit einem modernen Browser – weniger HTTP-Requests zur Seitendarstellung.
Der auf dieser Homepage allseits genutzte Rahmen besteht aus insgesamt vier einzelnen Rastergraphiken. Diese Bilder wurden mittels Base64-Kodierung umgewandelt und in der Background-Eigenschaft bestimmter Seitenelemente eingebunden. Die folgenden Abbildungen zeigen diese vier Komponenten, die zusammen genommen nur 1.791 Bytes groß sind – ohne die vorherige Zusammenlegung der Teilbilder wären es sogar 9 einzelne Bilder. Alle vier Dateien sind also sehr klein – die meisten sogar kleiner als die Datenmenge, die mit dem Request- oder Response-Header der Dateianfrage übertragen werden muss.
Abb. 1: Vier Eckbereiche des Rahmens
Abb. 2: Rahmenübergang am oberen, rechten Rand
Abb. 3: Oberer und unterer Rahmenrand (zur besseren Visualisierung verbreitert auf 10 Pixel)
Abb. 4: Linker und rechter Rand des Rahmens (auf 10 Pixel Höhe gestreckt)