Sprites und Inline-Elemente
Sprites und die Nutzung von Inline eingebetteten Bildern bieten beiderseits eine Möglichkeit den Aufbau einer Internetseite effektiver zu gestalten. Sie führen zu geringeren Latenzzeiten und einer besseren Usability. Mit der Kombination beider Techniken lässt sich zudem der Aufwand bei der Pflege einer Homepage mit einfachen Mitteln verringern.
Statt einer separaten Speicherung der verschiedenen Rastergraphikelemente wurden die einzelnen Komponenten in dem von dieser Website genutzten Template mittels Sprites auf eine geringere Anzahl reduziert. Hierzu wurden die für den Rahmen nötigen Bildelemente – zumindest an den Stellen, wo dies auch möglich war – zunächst als Sprite zusammengefasst bevor die Einbettung in das Seitentemplate erfolgte.
Obwohl direkt im Stylesheet oder HTML-Code eingebettete Bilder eigentlich nicht als Sprite abgelegt werden müssten, lohnt diese Vorgehensweise sich im Hinblick auf die Tatsache, dass nicht alle Browseranwendungen mit Inline-Elementen zurecht kommen. Nutzt der Seitenbesucher beispielsweise einen älteren Internet Explorer, so muss dieser die zur Darstellung der Webseite benötigten Bildelemente nachladen.
In einem solchen Falle ist es ratsam, ein Sprite zu verwenden um die zum Laden der Bilder benötigten HTTP-Requests gering zu halten. Zwar vergrößert die Verwendung eines Sprite den Umfang eines Stylesheets geringfügig – jedes Sprite benötigt eine zusätzliche Angabe des darzustellenden Bildausschnitts mit Angaben zu Höhe, Breite und Ausrichtung des Ausschnitts –, allerdings erkauft man sich hierdurch einen wesentlichen Vorteil bei der Pflege der Website.
Zur Minimierung des für die Pflege der Internetseite nötigen Aufwandes sollten die eingebetteten Bilder grundsätzlich den extern gespeicherten Dateien entsprechen. Schließlich bedeutet die Nutzung von Sprites auch, dass Anpassungen im Stylesheet nötig sind, damit nur der für ein graphisches Element benötigte Ausschnitt des Sprite angezeigt wird. Unterscheiden sich die eingebetteten Bilder von den extern angelegten, so müssen auch zwei unterschiedliche Stylesheets gepflegt werden.
Darüber hinaus führen Änderungen an den Rastergraphiken dazu, dass diese einen größeren Aufwand mit sich bringen oder gar doppelt durchgeführt werden – sowohl im Sprite als auch im eingebetteten Einzelbild. Hier muss dann jede zu ändernde Rastergraphik in der Vorlage mit der Bildbearbeitung verändert und dann in mehreren Dateiversionen abgespeichert werden. Danach müssen alle separaten Bildelemente einzeln einer Base64-Kodierung unterzogen und in das Template integriert werden. Im Gegensatz hierzu ist nach einer Änderung des Bildmaterials lediglich eine erneute Umwandlung mittels eines Base64-Encoders – gefolgt von einer einzelnen Einbettung – durchzuführen.
Zur Förderung der besseren Wartbarkeit einer Internetseite sollte also stets eine Strategie gefahren werden, bei der beide Verfahren – Einbettung von Bildern per CSS oder HTML im Template und Nutzung von Sprites zur Reduzierung der Serveranfragen – miteinander kombiniert werden.