Mit CSS Sprites zur schnelleren Website
Eine Neuerfindung ist die CSS Sprites Technik bei weitem nicht, fand sie doch bereits Anwendung im Videogame-Sektor, als dieser noch in den Kinderschuhen steckte. So nutzte Nintendo CSS Sprites bereits zur Schaffung diverser Effekte für das Videogame "Super Mario Brothers". Dennoch ist diese Technik aus unserem Alltagsleben nicht mehr wegzudenken. Beinahe alle großen Internetplattformen bedienen sich ihr, bringt sie doch den entscheidenden Vorteil mit sich, möglichst viele Grafiken in einer Datei unterzubringen und diese mittels CSS zu positionieren.
Von den im Hintergrund ablaufenden Prozessen bekommt der User natürlich nichts mit. Beim Einsatz von JavaScript taucht oft das Problem auf, dass Bilder und Grafiken zwar nur Millisekunden benötigen, ehe sie geladen sind, doch bei einer Webseite mit mehreren hundert Bildern summiert sich diese Zeit dann auch mal schnell.
Vorteile von CSS Sprites
- Sie benötigen kein JavaScript mehr.
- In den Links wird kein MouseOver-Code mehr erscheinen.
- Die Bilder sind unmittelbar verfügbar, weil der lästige Verlagerungseffekt ausbleibt.
- Bei effektiver Nutzung haben Sie weniger Bilder beim Download oder im Einsatz, was sich erheblich auf die Schnelligkeit des Prozessors auswirkt.
- CSS Sprites ermöglicht eine benutzerfreundliche Nutzung der Webseite und optimiert die durchschnittliche Ladezeit Ihres Webauftritts
Wie arbeiten CSS Sprites?
Das CSS greift im Grunde nur auf die ID zu, um den Hover-Effekt zu erzeugen.
Aus dem eigentlichen Einzelbild ergibt sich nun die Höhe und Breite der Grafik.
Wählen Sie nun Ihre grafischen Vorlagen aus und erstellen eine einfache ungeordnete HTML-Liste mit fünf Unterpunkten. Zunächst ist es notwendig, jedem LI Element eine eigene Klasse zuzuteilen, um später mittels CSS die genaue Positionierung der jeweiligen Grafik zuordnen zu können.
Die Beherrschung der HTML-Schrift wird übrigens vorausgesetzt, um vernünftig mit dem Programm arbeiten zu können bzw. alle Möglichkeiten, die hier sehr vielfältig gegeben sind, auszuschöpfen.
Fazit
Mit CSS Sprites lassen sich Webseiten optimieren und damit einhergehend die Benutzerfreundlichkeit steigern. Diesem Umstand könnte dazu beitragen, die Conversionrate zu erhöhen, was bedeutet, dass die Anzahl der Verkäufe steigen könnte. Was sich hier nun relativ kompliziert liest, ist in Wirklichkeit eine durchaus praktische, nach kurzer Einarbeitungszeit bedienerfreundliche Anwendung, die Benutzerfreundlichkeit und Effekte Ihres Webauftritts durchaus zu steigern vermag.
