Sprite-Sheet-Generator

So funktioniert das Layout

Der Generator nutzt ein einziges, vorhersehbares Layout: ein gleichmäßiges Raster. Du legst die Spaltenzahl fest, die Zeilenzahl ist aufrunden(Bilder / Spalten). Jede Zelle hat dieselbe quadratische Größe (die gewählte Kachelgröße), daher wird jedes Bild unter Beibehaltung des Seitenverhältnisses in seine Kachel eingepasst und zentriert. Bilder unterschiedlicher Größe landen alle in gleich großen Zellen, genau das erwarten CSS-Sprites mit background-position.

Form des ausgegebenen CSS

Jedes Bild wird zu einer nach der Datei benannten Klasse (.spr-<Dateiname>), auf die Kachelgröße dimensioniert und auf seine Zelle versetzt. Bei vier Spalten, einer Kachelgröße von 128 px und ohne Abstand sieht das Sheet so aus:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Der Offset verschiebt sich in zwei Dimensionen: Sprites füllen jede Zeile von links nach rechts und springen dann in die nächste Zeile. Speichere das PNG als spritesheet.png neben deinem CSS (oder passe url(...) an deinen Pfad an).

Abstand und Überlaufen

Kante an Kante gepackte Sprites können ineinander überlaufen, wenn der Browser das Sheet skaliert (nicht ganzzahlige Pixelverhältnisse, CSS-Transformationen). Füge 2 bis 4 Pixel Abstand zwischen den Zellen hinzu, damit benachbarte Pixel nicht durchsickern.

Hochauflösende Displays (Retina)

Es gibt keinen automatischen 2x-Export, aber du kannst ein schärferes Sheet auf einfache Weise erzeugen: Wähle eine größere Kachelgröße (etwa 256 px statt 128 px), damit jeder Sprite mehr Pixel trägt, und zeige ihn dann in halber CSS-Größe an. So bekommst du scharfe Sprites auf Displays mit hoher Pixeldichte ohne separaten Durchgang.

Sprite-Sheets oder Alternativen

• Sprite-Sheets: klassische Icon-Sets in CSS, HTML5-Game-Frames und Seiten, die davon profitieren, viele kleine Bilder in einer Datei zu bündeln.
• SVG-Sprites (symbol): besser für moderne UI-Icons, skalieren sauber, akzeptieren CSS fill, kein Jonglieren mit background-position.
• Icon-Fonts: begrenzt, aber noch immer für winzige einfarbige Icons in Gebrauch.
• Einzelne Dateien mit HTTP/2 oder HTTP/3: Multiplexing macht die Anzahl der Requests weniger wichtig als früher.