Wer mit dieser Technik arbeiten möchte, wird sich später mit Sicherheit Ladezeiten einsparen.


Erklärung:
Genau gesagt geht es um die HTTP-Verbindungen welche beim Aufruf einer HTML-Seite erzeugt werden. So braucht jedes Bild, jede Grafik, jedes Icon ihre eigene HTTP-Verbindung, was also in hoher Anzahl den Aufbau der Seite deutlich verlangsamen kann.

So könnte man nun einfach die Anzahl der Verbindungen reduzieren, indem man mehrere Bilder zu einem einzigen zusammenfasst und so mittels background-position später nur Teile dieses Bildes anzeigen lässt.

Würde sich z.B. hervorragend für Icon-Sets eignen. So werden nicht unzählige kleine PNGs geladen, sondern ein großes, welches später vom Browser gecached wird (falls aktiviert).


Der Sprite-Gen:

Um nicht unnötig Zeit zu verschwenden (bzw. warscheinlich sowieso niemand manuell 30 Icons in Photoshop zusammenschnippseln und dann per CSS positionieren möchte), empfiehlt es sich einen Sprite-Generator zu verwenden. Dieser erstellt uns das Bild direkt aus einer .zip-File (enthält z.B. das Icon-Set) heraus und legt zugleich alle CSS-Klassen bzw. IDs and die später zur Verwendung benötigt werden.

Zum Generator

Was ist noch zu beachten?
Opera (bis hin zur aktuellen Version) ignoriert das background-positioning wenn es den Wert 2042px über- bzw. -2042px unterschreitet.

---

---