CSS-Sprite-Sheet-Generator

So erstellen Sie ein Sprite-Sheet

1. Ziehen Sie Ihre Bilder auf die Ablagefläche oder klicken Sie darauf, um sie auszuwählen. Akzeptiert werden PNG, SVG, WebP, JPG und die anderen Formate, die Ihr Browser lesen kann – bis zu 500 Bilder. Jede Datei erscheint mit ihrer Größe in der Liste Bilder; die Schaltfläche × entfernt ein Bild, Alle Bilder entfernen leert die Liste.
2. Wählen Sie eine Anordnung: Raster, Gepackt (kleinstes Sheet), Horizontaler Streifen oder Vertikaler Streifen. Beim Raster legt Spalten (0 = automatisch) die Spaltenzahl fest.
3. Stellen Sie den Abstand (px) zwischen den Sprites ein (standardmäßig 2) und haken Sie Zweierpotenz-Größe (256, 512, 1024 …) an, wenn Ihre Engine oder GPU das verlangt.
4. Wählen Sie die Datendatei: CSS (background-position-Klassen), JSON (Frame-Map) oder CSS und JSON. Passen Sie Dateiname und CSS-Klassenpräfix an (beide standardmäßig „sprite“).
5. Prüfen Sie Vorschau, Sheet-Größe und Genutzte Fläche und klicken Sie dann auf ZIP herunterladen (PNG + Daten) oder Nur PNG herunterladen. Den Erzeugten Code können Sie auch direkt kopieren.

Die Bilder werden in Ihrem Browser dekodiert, nichts wird hochgeladen. Ein SVG ohne eigene Breite und Höhe wird mit 256 px an der längeren Seite gerastert.

Die passende Anordnung wählen

• Raster gibt jedem Bild eine Zelle in der Größe des größten Bildes. Mit automatischer Spaltenzahl ist das Raster ungefähr quadratisch. Einfach und vorhersehbar, ideal, wenn alle Sprites gleich groß sind, etwa bei einem Tileset.
• Gepackt (kleinstes Sheet) nutzt Regal-Packing (Shelf Packing): Die Bilder werden nach Höhe absteigend sortiert und von links nach rechts in Reihen gesetzt. Das Tool probiert viele Sheet-Breiten aus und behält die mit der kleinsten Fläche, unter Berücksichtigung der Rundung auf Zweierpotenzen, wenn diese Option aktiv ist. Am besten für Symbole unterschiedlicher Größe.
• Horizontaler Streifen und Vertikaler Streifen setzen die Bilder in der Reihenfolge des Hinzufügens in eine Zeile oder Spalte. So erwarten viele Animationsplayer ihre Frames.

Das Sheet darf höchstens 16.384 px pro Seite bzw. etwa 16,7 Megapixel groß sein – die Grenze dessen, was Browser zeichnen können.

Das CSS verwenden

Das CSS enthält eine Basisklasse mit dem Sheet als background-image und no-repeat, dann eine Klasse pro Sprite, benannt nach seiner Datei: Aus home.png wird sprite-home. Namen werden kleingeschrieben, Akzente und Umlaute entfernt, andere Zeichen zu Bindestrichen, und Duplikate erhalten -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Jede Sprite-Klasse setzt width, height und eine background-position mit negativen Versätzen. Ein Sprite bei x = 40, y = 20 erhält background-position: -40px -20px: Das ganze Sheet wird im Element um 40 px nach links und 20 px nach oben verschoben, sodass nur dieses Sprite in der Box des Elements sichtbar ist. Der Abstand verhindert, dass benachbarte Sprites beim Zoomen der Seite oder beim Filtern einer Textur hineinbluten.

Hochauflösende Bildschirme: Zeichnen Sie Ihre Bilder in doppelter Anzeigegröße, erzeugen Sie das Sheet und ergänzen Sie in der Basisklasse background-size mit der halben Sheet-Größe; halbieren Sie außerdem Breiten, Höhen und Versätze. Das Tool erzeugt das nicht automatisch, es ist eine manuelle Anpassung.

Lohnen sich Sprites mit HTTP/2 noch?

Sprites wurden erfunden, um HTTP-Anfragen zu sparen. Mit dem Multiplexing von HTTP/2 laden viele kleine Dateien fast so schnell wie eine, der Gewinn für Websites ist also deutlich kleiner, und für skalierbare Symbole sind SVG-Icons oder Icon-Fonts oft besser. Für 2D-Spiele und Animationsframes bleiben Sprite-Sheets aber der Standard: Eine Textur bedeutet weniger Texturwechsel auf der GPU und nur eine Datei zum Laden.