Freundschaften mit CSS-Sprites: Technologie, Generator

Ich hoffe, dass Du verstehst was die Sprities sind. Der Name ist ein bisschen irreführend, weil sprite bedeutet hier nicht ein kleines Bild, sondern ein großes. Du hast vielleicht schon den CSS-trick gesehen, wenn ein Button bei Hover ändert. Normalerweise wird es das gleiche Bild von Button verschoben oder gespiegeln.

CSS-Sprites erweitern die Technologie. Der Unterschied ist dass statt der zwei oder drei Bilder, die zu einem einzigen Bild zusammengefasst werden, Du eine beliebige Anzahl von Bildern verwenden kannst. Der Begriff “sprite” ist aus der Spiel-Industrie. Die Idee war sehr einfach: der Computer erstellt ein Bild auf seiner Festplatte und zeigt danach nun einen Teil von ihm. Es ist schneller als immer ein neues Bild zu machen. Die CSS-Sprites machen das gleiche: das Bild wird einmal gemacht, um einen von seinem Teil anzuzeigen.
Warum soll man die Bilder kombinieren? Wäre es nicht schneller kleinen Bilder hochzuladen?

Eigentlich nicht… Früher müssten wir Bilder schneiden damit sogenannten Slices zu bekommen und so ladet sie Seite schneller. Aufgrund der Tatsache, dass viele Teile fast gleichzeitig geladen wurden, erzeugt diese Technik nun die Illusion von schnellerem Laden der Seite. Jedes Slice erstellt separat ein http-Request. Und je mehr http-Requests es gibt, desto weniger effektiv die Seite ist.

Na gut, wie erstellt man dann diese Sprites?

Um Dir die Arbeit zu erleichtern, haben die Entwickler verschiedene online und offline Werkzeuge für die Erstellung von CSS-Sprites gemacht. Die sind alle ziemlich einfach zur Verwendung und gut funktionieren. Schauen wir mal auf der Liste von empfohlenen CSS Sprite Generators.

SpritePad

SpritePad ist ein Drag-and-Drop Interface für Sprites-Erstellung.

* * *Compass

Compass ist ein perfektes Framework, das Sprites aus dem speziellen Ordner mit Bildern erstellen kann. Es benutzt auch Sass.

* * *Lemonade

Lemonade ist ein Werkzeug, der die Codezeilen in Sass-Dateien platziert und so es Dateien mit Sprites erstellt.

* * *SpriteMe

SpriteMe ist ein Bookmarklet, das die Sprites von anderer Website generieren und anschauen kann.

* * *Fireworks CS6

In der letzten Version der Fireworks Software gibt es auch die Möglichkeit Sprites zu generieren.

* * *Sprite Cow

Sprite Cow ist ein nützliches Dienst, um Dateien für Sprites manuell zu „schneiden“.

* * *Glue

Glue ist eine Kommandozeile zur Sprites-Generierung.

* * *CSS Sprites

CSS sprites ist noch ein toller CSS-Sprites Generator.

* * *Sprite Right

Sprite Right ist eine Anwendung für Mac, um Sprite zu generieren.

* * *Spritebox

Spritebox ist Drag-and-Drop Interface zur Sprites-Generierung.

* * *CSS sind ziemlich wichtig für jede Website. Verwende bitte diese Technik als eine von wichtigsten Optimierungsmethoden.

Falls Du ein Optimierungs-Guru bist, teile deine tolle Idee per Kommentar-Bereich