Quick Win: SpriteCow

Natürlich verwenden wir bei unseren großen Webprojekten längst CSS Sprites, denn wir müssen Serveranfragen und Dateigrößen so gering wie möglich halten, damit die Seiten rennen. Kein Icon darf alleine als einzelne Grafik gespeichert werden.

Das Erstellen des Sprites gehört allerdings nicht zu meinem Lieblingsbeschäftigungen. Es nimmt einfach zu viel Zeit in Anspruch, für jedes einzelne Icon die Position, Höhe und Breite in Photoshop abzumessen, um dann die entsprechenden CSS-Regeln festzulegen. Da gibt es spannendere Aufgaben. Einen Sprite-Generator habe ich nie verwendet, ich muss einfach selbst die Kontrolle über die Positionen der Grafiken im Sprite haben.

Nun bin ich zufällig auf SpriteCow gestoßen. Dieser geniale Webservice übernimmt den lästigen Job des Abmessens und gibt die entsprechenden CSS Regeln für Background-Position, Height und Width zurück.

Dazu muss man nur sein Sprite hochladen und kann dann jede einzelne Grafik im Sprite anklicken. Alle gefüllten, benachbarten Pixel werden automatisch mit ausgewählt. Man kann auch mit gedrückter Maustaste einen Bereich auswählen, falls die Pixel der gewünschten Grafik nicht direkt nebeneinander liegen.