kulturbanause blog

CSS-Sprites sind für moderne Websites ein absolutes Must-Have. Eine Sprite fasst verschiedene grafische Seitenelemente in einer Datei zusammen um somit unter anderem die Ladezeit der Website zu beschleunigen. Mittels CSS-background-Eigenschaft wird anschließend verschiedenen Elementen die selbe Grafik zugewiesen; die Position innerhalb der Grafik erfolgt über die Koordinaten der background-position-Eigenschaft. Je größer die Sprite wird, desto lästiger ist es die Koordinaten abzumessen und anschließend auf das Stylesheet zu übertragen.
Der kostenlose Online-Dienst Spritebox erleichtert diese Aufgabe enorm.

Spritebox ermöglicht es Euch in einer hochgeladenen Grafik frei wählbare Bereiche zu markieren und zu bennen. So können alle Elemente der Sprite bestimmt werden. Wenn die Markierung abgeschlossen ist, wird der CSS-Code der Sprite direkt exportiert und kann verwendet werden. In meinen Tests hat das Tool großartig funktioniert. Wie es sich bei mir im alltäglichen Workflow schlägt muss sich zeigen.

Wie arbeitet Ihr mit Sprites? Nutzt Ihr bereits einen Generator oder messt Ihr in Photoshop oder Fireworks alles von Hand aus? Oder sind bei Euren Projekten etwa gar keine Sprites im Einsatz?

• Spritebox - Create CSS from Sprite Images