CSS Sprites – Verwendung und Tools

Sprite von Google Plus

Sprite von Google+

CSS Sprites ist eine Technik, bei der mehrere kleinere Grafiken zu einer Großen zusammengefasst werden, einem sogenannten Sprite. Durch den Einsatz von Sprites kann die Ladezeit der Webseite, auf Grund Reduzierung der HTTP-Requests sowie die Verringerung der Gesamtgröße der Bilder, vermindert werden.

CSS Sprites – So funktionert es

Anstatt vieler kleiner Einzelgrafiken, wird also eine größere Bilddatei mit allen Einzelgrafiken erstellt. Mit der CSS-Eigenschaft background-position kann definiert werden, welcher Abschnitt des Sprites sichtbar sein soll. So können zum Beispiel Bildwechsel bei MouseOver realisiert werden, ohne lästige Verzögerung (durch Laden der zweiten Grafik) und ohne den Einsatz von JavaScript.

Sprite-Grafiken zu erstellen und für jedes Element die Position zu ermitteln kann zeitaufwendig und mühsam sein. Hier erleichtern einen zahlreiche Online-Tools die Arbeit. Hat man bereits einen fertigen Sprite, kann mit Hilfe der Spritebox einfach die Position des gewünschten Elements ermittelt werden.

CSS-Sprite erstellen mit www.spritebox.net

CSS-Sprites: Element-Position ermitteln mit Hilfe von Spritebox.net

Entsprechender CSS-Code:

background: url (result.png) 4px -209px no-repeat;

Ein weiteres sehr nützliches Tool ist der CSS-Sprites Generator. Hier kann man einzelne Grafiken hochladen, die anschließend zu einer Sprite-Grafik zusammengefasst werden. Anschließend wird zu jedem einzelnen Element die background-positionausgegeben.

Sprite-Grafiken mit dem CSS Sprites Generator erstellen

CSS Sprites Generator

Durch die Verwendung von CSS-Sprites können nicht nur die Ladezeiten einer Webseite reduziert werden, zusätzlich helfen sie die Übersicht über die zum Einsatz kommenenden Grafiken zu bewahren.

Weitere Informationen über CSS-Sprites

Schreibe einen Kommentar

Required fields are marked *.