CSS-Sprite-Generator

Mehrere Bilder zu einem Sprite zusammenfügen, als PNG herunterladen und CSS-Klassen mit background-position erhalten – lokal im Browser.

Der CSS-Sprite-Generator fügt mehrere Bilder oder Icons zu einer einzigen PNG-Datei zusammen und erzeugt dazu CSS-Klassen mit background-position. Anordnung untereinander, nebeneinander oder kompakt in Reihen, Abstand, Klassenpräfix und Retina-Modus sind einstellbar. Alles läuft lokal im Browser; die Bilder verlassen dein Gerät nicht.

Bilder hinzufügen Mehrere Dateien möglich, bis 2048 px Kantenlänge. Alles bleibt auf deinem Gerät.

Noch keine Bilder. Füge zwei oder mehr Grafiken hinzu, um ein Sprite zu erzeugen.

/* Bilder hinzufügen */

So funktioniert ein CSS-Sprite

Alle Grafiken liegen in einer Datei. Eine Basisklasse lädt das Sprite als Hintergrund, jede Icon-Klasse legt Breite, Höhe und mit background-position den Ausschnitt fest. Die Positionen sind negativ, weil das Bild nach links oben verschoben wird.

Bilder hinzufügen und Anordnung wählen.
sprite.png herunterladen und neben dein CSS legen.
CSS einbinden und Icons per <span class="icon icon-name"> nutzen.

Einzelne Bilder verkleinerst du mit Bilder komprimieren, SVG-Icons als CSS-Hintergrund erzeugst du mit SVG zu CSS.

Häufige Fragen

Was ist ein CSS-Sprite?

Ein Sprite ist eine Bilddatei, die viele kleine Grafiken enthält. Jedes Element zeigt per background-position nur den passenden Ausschnitt. Früher sparte das viele HTTP-Anfragen; heute ist es noch praktisch für Spiele, Animationen und Icon-Sets mit Hover-Zuständen.

Brauche ich mit HTTP/2 noch Sprites?

Seltener. HTTP/2 und HTTP/3 laden viele kleine Dateien parallel. Für Icons sind SVG-Symbole oder Icon-Fonts oft flexibler. Sprites lohnen sich bei vielen kleinen Rastergrafiken oder für Bildfolgen in Animationen.

Was macht der Retina-Modus?

Er behandelt die Bilder als doppelt aufgelöst. Größen und Positionen im CSS werden halbiert und background-size gesetzt, sodass ein 64-px-Bild als 32-px-Icon scharf auf hochauflösenden Bildschirmen erscheint.

Warum ein Abstand zwischen den Bildern?

Beim Skalieren oder Zoomen können benachbarte Bildteile am Rand durchscheinen. Ein paar Pixel Abstand verhindern das.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.