Sebastian Bauer IT-Blog – News, Reviews, Best Practises

Webentwicklung: Performance Optimierung durch Image Sprites

Auch wenn die Internetanbindungen immer breitbandiger werden ist die Performance stets ein wichtiges Thema bei der Entwicklung von Webanwendungen. Eine relativ einfache Möglichkeit für mehr Geschwindigkeit zu sorgen ist die Reduzierung der Zugriffe auf den Web-Server. Das könnte bedeuten, dass man möglichst wenige CSS- oder JavaScript-Dateien in seine Seiten einbindet. Aber auch der Einsatz vieler Grafiken kann das Laden stark verlangsamen. Abhilfe schaffen hier Image Sprites .

Bisher war mir das selbst kein Begriff, obwohl ich diese Technik teilweise schon eingesetzt habe. Hierbei wird aus allen einzeln verwendeten Bildern ein großes gebaut. Dieses muss dann nur einmal geladen werden. Die entsprechenden Teilbilder / Ausschnitte werden mittels CSS ausgewählt. Somit hat man mit nur einer Server-Anfrage alle seine Bilder geladen.

Eingesetzt habe ich diese Technik z.B. bei Mouse-Over-Effekten. Aber auch für alle anderen grafischen Elemente einer Seite lässt sich hierdurch die Ladezeit der Seite verringern.

Die Kompatibilität für verschiedene Browser habe ich selbst noch nicht ausgiebig getestet. Es sollte sich aber um keine extravaganten Methoden handeln. Übrigens ist das auch nichts Neues. Bei den folgenden Links sind Artikel teilweise von 2004.

(via Paul Stamatiou)

Weitere Links zu diesem Thema:

• CSS Sprites: Image Slicing's Kiss of Death
• Image sprites - flexible and accessible packages
• CSS, Image Sprites, Background Images and WebsiteOptimization
• Speedier Sites use CSS Sprites
• Foreground Sprites

About Sebastian Bauer

Der Autor hat keine Beschreibung über sich erstellt.