IT-Gecko

Ich möchte euch zeigen wie ihr ganz einfach CSS-Sprite in IMG Tags verwenden könnt. CSS-Sprite haben sehr viele Vorteile: sie sparen HTTP-Requests, nachladen von Bilder entfallen und die Bandbreite der Nutzer kann besser ausgeschöpft werden. Daher ist es wichtig auch CSS-Sprites in IMG Tags zu verwenden.

Ein Sprite-Bild könnt ihr ganz einfach mit Hilfe des CSS-Sprite Generator erstellen. Ladet dazu eine Zip-Datei mit euren Bilder hoch, stellt die nötigen Parameter ein und fertig ist euer Sprite Image und die dazu gehörenden Positionsangaben.

Um aber nun CSS-Sprite in IMG-Tags verwenden zu können, benötigen wir noch eine Grafik. Dies ist nicht das Sprite-Image selber, da dies als Hintergrundbild eingebunden wird, sondern am besten ein 1px großes und transparentes Bild. Ihr könnt gern mein Bild verwenden -> 1px Image (43 Byte)

Praxis:

So nun ein Beispiel wie man das ganze in der Praxis anwenden kann.

Die CSS-Datei:

1
2
3
4

img
{
    background-image: url(PFAD_ZUM_SPIRTE_IMAGE);
}

Damit bekommen erst einmal alle IMG-Tags ein Hintergrundbild (das Sprite), welches dann mit backgroud-posistion positioniert wird.

HTML – Code:

1

<img src="PFAD_ZUR_1PX_IMG" style="background-position: 0 -76px; height:18px; width:18px;" />

Die Angaben background-position, height und width müsst ihr natürlich auf eure Bedürfnisse anpassen bzw. welche der CSS-Sprite Generator vorgibt. Wenn eure Bild mehrfach vorkommt, würde ich dies dann in eine CSS-Datei packen und mit IDs arbeiten.

Beispiel:

Quellcode:

Zeigen »

1
2
3

<img style="background-image: url('../wp-content/uploads/2011/07/test.png'); background-position: 0pt 0pt; height: 16px; width: 16px;" src="../wp-content/uploads/2011/07/1pix.gif" alt="" />
<img style="background-image: url('../wp-content/uploads/2011/07/test.png'); background-position: 0pt -132px; height: 16px; width: 16px;" src="../wp-content/uploads/2011/07/1pix.gif" alt="" />
<img style="background-image: url('../wp-content/uploads/2011/07/test.png'); background-position: 0pt -264px; height: 16px; width: 16px;" src="../wp-content/uploads/2011/07/1pix.gif" alt="" />

Das war es eigentlich schon. Bei Fragen oder Anregungen stehe ich euch gern zur Verfügung.