Aufbau von Webseiten durch CSS Sprites beschleunigen

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 :)

Themenverwandte Artikel:

• Video und Buch zu “High Performance Websites” von Steve Souders
• Termine finden leicht gemacht!
• Vorsicht Suchtgefahr: Das Flash-Puzzlespiel Virus 2
• OCR-Texterkennung: Kostenloser Online-Service
• Analyse-Tools: Besucher von Webseiten vergleichen

Immer auf dem Laufenden mit dem ungekürzten RSS-Feed von Phlow! Freie MP3-Musik aus der globalen Netlabel-Szene liefert unser Phlow-Magazine-Podcast kostenlos!