🗂️ Sprite-Sheet-Generator
Mehrere Bilder in ein einziges optimiertes PNG-Sprite-Sheet packen und sofort einsatzbereite CSS-background-position-Regeln erhalten — kostenlos, im Browser, ohne Upload.
Über
Dieses Tool nutzt die Canvas API des Browsers, um deine Bilder vollständig auf deinem Gerät zu einem kompakten PNG-Sprite-Sheet zu packen — es wird nichts auf einen Server hochgeladen. Ziehe beliebig viele Bilder hinein, lege maximale Zeilenbreite und Sprite-Abstand fest, und der Packer ordnet sie zeilenweise an, um Leerraum zu minimieren. Nach der Generierung kannst du das kombinierte PNG herunterladen und den CSS-Codeausschnitt kopieren, der pro Sprite eine Klasse mit den korrekten Werten für background-image, background-position, width und height enthält — bereit zum Einfügen in dein Stylesheet.
Verwendung
- Bilder auf den Upload-Bereich ziehen oder klicken, um mehrere Dateien gleichzeitig auszuwählen.
- Maximale Zeilenbreite (in Pixeln) und Abstand um jeden Sprite festlegen, um die Packdichte zu steuern.
- Auf Sprite-Sheet generieren klicken, um alle Bilder in einem PNG zusammenzuführen — die Vorschau erscheint sofort auf dem Canvas.
- Den generierten CSS kopieren — jeder Sprite erhält eine eigene Klasse mit den korrekten Werten für background-position, width und height.
- Das PNG-Sprite-Sheet herunterladen und das CSS in dein Projekt-Stylesheet einfügen — fertig.
Häufige Fragen
- Werden meine Bilder auf einen Server hochgeladen?
- Nein. Alles läuft über die Canvas API im Browser. Deine Dateien verlassen niemals dein Gerät.
- Wie viele Bilder kann ich zu einem Sprite-Sheet hinzufügen?
- Es gibt keine feste Grenze — das Tool packt so viele Bilder, wie der Browserspeicher erlaubt. Für beste Performance sollten die einzelnen Sprites eine angemessene Größe haben.
- Was bewirkt die Einstellung für die maximale Zeilenbreite?
- Es begrenzt die maximale Breite, auf die jede Sprite-Zeile anwachsen darf, bevor der Packer eine neue Zeile beginnt. Ein größerer Wert erzeugt ein breiteres Sheet; ein kleinerer Wert ein höheres, schmaleres Sheet.
- Kann ich das generierte CSS direkt in meinem Projekt verwenden?
- Ja. Jede Sprite-Klasse enthält die background-image-URL (die auf dein heruntergeladenes PNG zeigt), background-position, width und height — einfach in ein beliebiges Stylesheet einfügen und die Klasse auf HTML-Elemente anwenden.
- Welche Bildformate kann ich als Eingabe-Sprites verwenden?
- Jedes Format, das dein Browser dekodieren kann — PNG, JPEG, WebP, GIF, SVG, AVIF und mehr. Das ausgegebene Sprite-Sheet ist immer ein einzelnes PNG für maximale Kompatibilität.