YouTube reduziert HTTP-Requests per CSS Sprite Map

CSS-Theorie & Praxis | Wie ich im Buch "High Performance Websites" erfahren habe, reduziert man die HTTP-Requests einer Webseite so viel wie möglich. Insbesondere wiederkehrende Grafiken - z.B. Icons -, die man für CSS verwendet, können unter Umständen eine Menge Server-Anfragen produzieren. Um das zu verhindern baut man sich so genannte Sprite-Maps. Das sind Dateien, auf denen sämtliche Icons oder Layout-Grafiken in nur einer Grafikdatei abgespeichert (siehe Bild)werden. Glücklicherweise gibt es dafür einen Online-Service.

Damit man die einzelnen Grafiken anschließend auf seinen eigenen Websites einbauen kann, ruft man die immergleiche Grafikdatei per CSS-Befehl background auf und verschiebt die Grafik mit

background: transparent url(test-3.jpg) -172px -200px no-repeat;}

so, dass das jeweils gewollte Icon erscheint. Mehr über die Theorie und funktionsweise lest Ihr in "CSS Sprites: Image Slicing’s Kiss of Death" bei A List Apart.

Und jetzt kommt der Clue: Um sich die Arbeit zu sparen, die beim Zusammenkopieren von vielen Grafiken auf nur eine anfällt plus Raussuchen der CSS-Koordinaten, nutzt ihr den Online-Service "CSS Sprite Generator". Dort ladet Ihr als ZIP gebündelt die Grafiken hoch, und der Service legt Euch dann die eine Grafik plus CSS-Koordinaten zu Füßen. Sehr elegant und cool. Das nenn ich Zeitersparnis :)