HomeKontaktImpressum
Sie sind hier: Home

Wohin mit den Bildern?

Bei der Einbettung von Bildern sollte stets auf den Einsatzzweck von Rastergraphiken, sowie auf die Nutzungsprofile geachtet werden, die sich durch das Verhalten der Seitenbesucher ergibt. Auf Basis dieser Informationen kann entschieden werden, ob Bilder direkt im HTML-Code der Internetseite oder aber im zugehörigen Stylesheet als Inline-Elemente definiert werden.

Je nach Einsatzbereich des Bildmaterials sollte eine passende Entscheidung bezüglich es optimalen Speicherungsorts (CSS oder HTML) getroffen werden. Bei der Entscheidungsfindung spielen verschiedene Faktoren eine entscheidende Rolle: Beispielsweise ist bei Communities oder Foren, bei denen die Seitenbesucher bei ihrem Besuch meist zahlreiche Einzelseiten abrufen, eine Einbettung in einer externen CSS-Datei angebracht. Auf diese Weise werden die Bilddaten nicht bei jedem Seitenaufruf erneut übertragen, sondern nur beim ersten Seitenaufruf, während die Daten bei Folgeaufrufen aus dem Browsercache gelesen werden. Anders verhält es sich, wenn einzelne Besucher nur wenige Einzelseiten abrufen. In einem solchen Fall kann die Einbettung auch direkt innerhalb der HTML-Datei Sinnvoll sein.

Aber auch die Entscheidung für oder wieder einer Einbettung hängt von allerlei Rahmenbedingungen ab: So eignet sich die Integration von Bildern, die im Seitentemplate – dem HTML-Grundgerüst, welches auf jeder einzelnen Seite einer Website genutzt wird – angesiedelt sind eher als innerhalb des Contents integrierte Bilder. Auch lohnt sich die Integration kleiner Bilder – klein in Bezug auf die Dateigröße des Bildmaterials – im Allgemeinen weitaus mehr, als das Einbetten von großen und vielfarbigen Bildern.

Besonders bei Foren und anderen Community-Systemen findet man zahlreiche Icons und Buttons, die zur Markierung von Beiträgen oder als Steuerungselemente genutzt werden. Hier werden die Bilder häufig in separaten Dateien abgelegt und einzeln nachgeladen. So kommen bei einem Forum schnell dreissig einzelne Bildelemente zusammen, die vom Webserver angefordert und durch diesen ausgeliefert werden müssen. Gerade beim ersten Seitenaufruf einer solchen Website dauert der Ladevorgang deshalb sehr lange. Mit Hilfe von Sprites lassen sich diese kleinen Bildelemente leicht zusammenfassen und die Anzahl der benötigten HTTP-Requests somit verringern. Auf solchen Seiten oft genutzte Smilie-Graphiken können beispielsweise in einer einzigen Datei zusammengefasst und deren ausschnittsweise Anzeige mittels Stylesheet entsprechend gesteuert werden.

Ein wichtiger Aspekt sollte allerdings bei der Einbettung von Bildern und Fotos berücksichtigt werden: Grundsätzlich sollte man sich darüber im Klaren sein, dass die bislang von Internetnutzern noch recht häufig genutzten Internet Explorer 6 sowie 7 eingebettete Bilder nicht verarbeiten können. Die 8er-Version des Microsoft-Browsers hingegen beherrscht diese Technik. Dies bedeutet, dass man diesen Browseranwendungen eine Brücke (etwa mittels Browserweiche oder Conditional-Comments) bauen muss, damit die Darstellung auch unter diesen Webbrowsern gelingt. Mit Blick auf die Zukunft ist die Einbettung von Fotos und Bildern auf einer Internetseite in jedem Fall ein lohnenswertes Verfahren zur Steigerung der Website-Perfomance.

Die durch eine Einbettung von Seitenelementen tatsächlich erreichbare Senkung der Latenzzeit hängt von der Anzahl der in einer Internetseite enthaltenen externen Objekte ab - je mehr Elemente enthalten sind, desto größer sind die Auswirkungen: Schon bei sechs integrierten Bildern ist eine Reduzierung der Latenzzeit um ca 60% möglich, wenn die Bilder zusammen mit dem Content in der HTML-Datei angelegt werden. Mittels einer flexiblen Caching-Strategie lassen sich die Seiten fertig komprimiert im Filesystem des Webservers ablegen und schließlich – .htaccess gesteuert – ausliefern. Hierdurch wird nicht allein die Anzahl der Webserver-Requests reduziert, sondern zugleich das zu übertragende Datenvolumen (Traffic) verringert.

Seite 2 von 2 | « [1] • [2] »






  
© 2009-2019 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website