HomeKontaktImpressum
Sie sind hier: Home

Sprites im Template nutzen

Homepage Templates mit eingebetteten Inline-Bildern, die zudem auch noch Sprites verwenden, können die Latenzzeit einer Internetseite senken und so die Usability steigern, da unnötige Dateianfragen an den Webserver vermieden werden.

Gerade weil der Aufwand zur Übertragung verglichen mit dem Umfang der gelieferten Informationen unverhältnismäßig groß ist, bietet sich eine Einbettung geradezu an. Durch die Einbettung der Bilder in das Stylesheet vergrößert sich diese Datei etwa um 2.500 Bytes. Das liegt daran, dass die Binärdaten der Bilder mittels Base64-Kodierung auf eine Menge von ASCII-Zeichen abgebildet werden müssen, die in einer normalen Textdatei dargestellt werden können. Allerdings wird dieser Anstieg der benötigten Zeichen durch Auslieferung des komprimierten Stylesheets mehr als ausgeglichen – letzlich ist das Stylesheet mit den eingebetteten Bildern kleiner als das unkomprimierte Stylesheet mit Links zu den nachzuladenden Bildern.

Alle Browser, die eingebettete Bilder verarbeiten können, benötigen zur Darstellung der Internetseite also beim ersten Seitenaufruf vier Anfragen weniger. Ältere Internet Explorer dagegen laden die Bilder einzeln nach. Da das Stylesheet größer ausfällt als dies ohne eingebettete Bilder der Fall wäre, werden mehr Daten übertragen als nötig. Allerdings ist der Unterschied gerade bei derart geringen Datenmengen vernachlässigbar klein. Seitens der nötigen HTTP-Requests gibt es dagegen keine Nachteile, da ebenso viele Dateien übertragen werden müssen.

Wie bereits erwähnt, gibt es zwei Möglichkeiten, Base64-kodierte Bilddaten in das Seitentemplate einzubauen. Die Erste Möglichkeit besteht darin, dass die Bilddaten direkt in der SRC-Eigenschaft eines Bildelements (IMG-Tag) eingesetzt wird. Hier steht normalerweise ein Link zur Bilddatei, die das an dieser Stelle darzustellende Bild enthält. Im HTML-Code kann das Bild also wie folgt eingebettet werden:

<img alt="" src="data:image/gif;base64,<Bilddaten>" />

Dabei teilt die enthaltene Zeichenkette dem Browser mit dem an Anfang stehenden Teilstring „data:image/gif;” mit, dass die später folgenden Bilddaten im GIF-Format vorliegen. Statt des hier gewählten Graphikformats können natürlich auch andere – etwa jpg oder png – angegeben werden, wenn das Bild im jeweiligen Format abgespeichert ist.

Darauf folgt dann das die eigentlichen Bilddaten einleitende String „base64,”, mit dem man dem Browser mitteilt, dass die nachfolgenden Bilddaten in Form einer Base64-Kodierung vorliegen. Alle danach folgenden Zeichen – bis zum Abschluss des Attributes mit dem Zeichen „"” – enthalten die durch den Base64-Encoder bei der Kodierung der Bilddatei ausgegebenen ASCII-Daten. Zur Vermeidung von Problemen sollte darauf geachtet werden, dass hier keine Zeilenumbrüche enthalten sind.

Die andere Variante nutzt die durch Cascading-Stylesheets gebotene Möglichkeit Bilder in den Hintergrund von HTML-Elementen zu setzen. Soll das Bild direkt in das Stylesheet einfließen, so kann beispielsweise folgender Style genutzt werden, um einen Teilausschnitt eines Sprites als Hintergrund eines SPAN-Elements anzuzeigen:

span.oben_rechts {
  width: 25px;
  height: 10px;
  background-image: url("data:image/gif;base64,<Bilddaten>");
  background-position: top right;
}

Hier wird der obere, rechte Rand des Rahmens in einem SPAN-Element als Hintergrundgraphik genutzt. Dabei wird mittels der Attribute height, width und background-position lediglich ein Teilausschnitt der Größe 25x10 Pixel angezeigt, wobei das Bild mit „top right” am oberen, rechten Rand ausgerichtet wird. Ohne diese Angaben würde das Bild – je nach Ausdehnung des im SPAN-Element enthaltenen Inhaltes – natürlich komplett angezeigt.

Mit Hilfe von Conditional-Comments müssen dann noch ältere Versionen des IE dazu gebracht werden, die benötigten Bilder nachzuladen. Dies ist recht einfach mit den folgenden Zeilen, die in der HTML-Datei nach den Styles mit den eingebetteten Bildern eingefügt werden müssen, zu realisieren:

<!--[if lt IE 8]>
  <style type="text/css">
    span.oben_rechts {
      background-image:url("/pic/oben_rechts.gif");
    }
  </style>
<![endif]-->

Der hier angegebene Kommentar wird nur vom Internet Explorer beachtet, weshalb auch nur die unterschiedlichen Versionen dieses Browsers die innerhalb der Kommentare aufgeführten Anweisungen beachten. Da ab Version 8 auch der IE eingebettete Bilder verarbeiten kann, sollen nur frühere Versionen von Microsofts Browser die im Kommentar enthaltenen Stylesheet-Anweisungen berücksichtigen. In diesem Fall werden alle IEs, deren Versionsnummer unterhalb von 8 liegen – lt für less than – angewiesen, dass die angegebene Datei als Hintergrundbild genutzt werden soll. Alle anderen Style-Angaben können übernommen werden, wenn sich die extern gespeicherte Graphikdatei nicht von der eingebetteten Version unterscheidet.

Seite 3 von 4 | « [1][2] • [3] • [4] »
  
© 2009-2019 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website