Wenn eine Website viele kleine Grafiken enthält, zum Beispiel für Menüpunkte innerhalb einer Navigation, werden diese heutzutage meist nicht mehr als einzelne Dateien eingebunden, sondern über einen sogenannten Sprite. Dieser aus der Frühzeit der Computerspiel-Entwicklung stammende Begriff bezeichnet im CSS-Kontext eine einzelne Bilddatei mit mehreren grafischen Elementen. Mit der Webanwendung SpritePad lassen sich solche Sprites sehr schnell selbst erstellen.
Sprites und CSS: HTTP-Requests minimiert, Performance gesteigert
Je mehr Grafikdateien bei einer Website geladen werden müssen, desto länger dauert der Seitenaufbau. Denn jede zu ladende Datei verursacht einen HTTP-Request, der vom Server abgearbeitet werden muss. Gerade bei vielen kleinen Grafikdateien kann man diese Requests minimieren, indem man alle Grafiken in einer Datei vereinigt und jeweils nur Ausschnitte der Gesamtdatei als CSS-Sprite darstellt. Der Workflow sähe im Grunde so aus, dass man im Bildbearbeitungsprogramm seiner Wahl die Grafiken nebeneinander platzierte und die jeweiligen Positionen dann an eine CSS-Klasse übergäbe, die jeweils nur den entsprechenden Bildausschnitt anzeigte.
SpritePad: Schneller Helfer macht die Arbeit
Spritepad nimmt einem einen Großteil der Arbeit zur Erstellung von Sprites ab. Statt alle Bildelemente manuell zu platzieren und die Position ausfindig zu machen, schiebt man die einzelnen Grafiken per Drag-and-drop in die Webanwendung.
Sprites erstellen mit SpritePad
Die Grafiken lassen sich beliebig auf der Fläche anordnen. Für jedes grafische Element stellt SpritePad eine CSS-Klasse zur Verfügung, welche die jeweilige Position und Größe beinhaltet. Der Name der Klasse ist identisch mit dem Dateinamen des einzelnen hochgeladenen Elements.
Sind alle Bildelemente platziert, wird das Dokument auf die richtige Größe zugeschnitten. Anschließend lässt sich die Spritemap als ZIP-Datei herunterladen. Darin enthalten ist eine PNG-Datei mit allen Grafiken sowie eine CSS-Datei mit den korrespondierenden Klassen.
Fazit: SpritePad ist einfach zu bedienen. Im Handumdrehen erstellt man fertige CSS-Sprites, die sich in eigene Webprojekte integrieren lassen. Um SpritePad nutzen zu können, ist keine Anmeldung notwendig. Wer allerdings ein Konto bei SpritePad anlegt, kann seine Spritemaps dort speichern und sie jederzeit anpassen. (dpe)
0 Antworten zu „SpritePad: CSS-Sprites schnell und einfach“
— was ist Deine Meinung?
Sehr nützliche Sache!
Was ich mir noch wünschen würde, wäre das „snapen“ der einzelne Bilder wenn diese an andere andocken, wie es mit den Rändern der Arbeitsfläche passiert.
Und noch etwas für alle die diejenigen, die Unzufrieden sind, weil das Tool nicht auf Ihren Lieblichgsbrowser (z.B. Opera) funktioniert:
Leute, wenn ihr so ein Tool benutzen wollt und müsst, dann seit ihr wenn nicht Profi-Webdesigner zumindest welche die Seiten erstellen und auf anderen Browsern auch testen. Dann sind bestimmt Firefox und Chrome auch installiert.
Und macht es wirklich so viel aus, kurz einen dieser Browser zu starten um ein Sprite zu erstellen? Die extra Sekunden, die ihr dafür braucht, bekommt ihr zurückgeschenkt durch die Zeitersparnis bei der Erstellung der Sprites!
Interessant – SpritePad: CSS-Sprites schnell und einfach – Dr. Web Magazin http://t.co/Z43B2oqN
SpritePad – nettes Tool, das die Erstellung und Einbindung von #Sprites vereinfacht: http://t.co/AK0tVSoz funzt leider nur mit Chrome und FF
Im Opera: „We’re sorry but your browser doesn’t support SpritePad“
Unterstützung nur für Firefox und Chrome … ein wenig armseelig.
Hallo WebMan,
leider werden zur Zeit nicht alle Funktionen in allen Browsern unterstützt und damit es nicht während deiner Sprite-Erstellung zu Problemen kommt, haben wir direkt zu Beginn eine Browserweiche eingesetzt. Wir hoffen, dass die Browser in den nächsten Versionen da noch nachlegen und wir sie mit integrieren können (das betrifft zur Zeit den Opera und Safari).
Viele Grüße,
dein Kiss Team
Schönes Tool. Ich kann verstehen das es nicht in jedem Browser läuft, habe selber das Problem bei einigen Webapplikationen, die, bedingt durch neuartige Funktionen, nicht in jedem Browser laufen.
Aber trotzdem ein guter Weg seine Sprites zu erstellen, wer das macht hat höchstwahrscheinlich eh Firefox oder Chrome installiert 😉
Kann man diese Arten von Grafiken auch mittels position:absolute oder position:relative und z-index über anderen Elementen anordnen?