Sprite Sheet Generator

Kombinieren Sie mehrere Bilder zu einem einzelnen Sprite Sheet und generieren Sie CSS-Code.

Bilder hier ablegen

oder klicken, um mehrere Dateien hochzuladen

Why Use This Tool?

Hocheffiziente Dienstprogramme zur Frontend-Optimierung

Reduce HTTP requests and speed up loading.

Automatische Koordinatengenerierung

Wir übernehmen die Mathematik, damit Sie es nicht müssen. Erhalten Sie sofort präzise X- und Y-Koordinaten für jedes einzelne Bild in Ihrem konsolidierten Sprite Sheet.

Smart-Grid Packalgorithmus

Unsere Engine ordnet Bilder unterschiedlicher Größe intelligent in einem möglichst effizienten Raster an, wodurch leerer Raum minimiert und die endgültige Dateigröße reduziert wird.

Gebrauchsfertige CSS-Klassen

Generiert einen sauberen, kopierbaren CSS-Block mit individuellen Klassen für jedes Asset, einschließlich background-position und Dimensionseigenschaften.

Anpassbare Layout-Modi

Wählen Sie zwischen vertikalen Streifen, horizontalen Streifen oder dem effizientesten 'Grid'-Modus basierend auf den Anforderungen Ihrer spezifischen Projektarchitektur.

Steuerung von Abstand und Padding

Fügen Sie benutzerdefinierten Abstand zwischen Sprites hinzu, um 'Pixelbluten' zu verhindern – wo Teile des benachbarten Symbols versehentlich in Ihrer Benutzeroberfläche durchscheinen.

Lokaler Speicherverarbeitungsschutz

Ihre UI-Assets sind Ihr Eigentum. Die gesamte Packung und Codegenerierung erfolgt direkt in Ihrem Browser, wodurch sichergestellt wird, dass niemals Daten Ihr Gerät verlassen.

Eine Anleitung zu High-Speed-Assets: So verwenden Sie den Generator

Create sprites in minimal steps.

Sammeln Sie Ihre kleinen Assets

Sammeln Sie alle kleinen Symbole, Schaltflächen oder Frames einer Animation, die Sie kombinieren möchten. Stellen Sie sicher, dass sie in einem hochwertigen Format wie PNG vorliegen.

Batch-Upload in das Tool

Wählen Sie alle Dateien auf einmal aus und laden Sie sie hoch. Das Tool erstellt sofort eine visuelle Vorschau, wie sie zusammengepackt werden können.

Konfigurieren Sie die Optimierung

Passen Sie das 'Padding' an, wenn Sie sich Sorgen um Ränder auf Retina-Bildschirmen machen, oder wählen Sie ein 'Vertikales' Layout, wenn Sie ein Seitenmenü oder einen Filmstreifen erstellen.

Überprüfen Sie die Sprite-Vorschau

Überprüfen Sie das generierte Sheet. Stellen Sie sicher, dass jedes Element sichtbar ist und dass das Raster eng und effizient ist, ohne verschwendeten Platz.

Laden Sie das Atlas-Bild herunter

Klicken Sie auf die Schaltfläche 'Sprite Sheet herunterladen', um die konsolidierte Bilddatei im Assets-Ordner Ihres Projekts zu speichern.

Sprite Sheet Meisterschaft: Geheimnisse der Game-Asset-Erstellung

Sind Sprite Sheets mit HTTP/2 noch relevant?

Ja! Obwohl HTTP/2 mehrere Anfragen besser handhabt, sind Sprite Sheets immer noch schneller, da sie die Gesamtmenge an Metadaten und Komprimierungsoverhead reduzieren.

Was passiert, wenn ich Bilder unterschiedlicher Größe habe?

Unser Smart-Grid-Algorithmus ist dafür konzipiert! Er ordnet Ihre Bilder aller Formen und Größen in einem möglichst kompakten Rechteck an.

Sollte ich JPG oder PNG für mein Sprite Sheet verwenden?

Wir empfehlen dringend PNG. Es handhabt die 'scharfen Kanten' von Symbolen besser und unterstützt Transparenz, was für die meisten Web-UI-Arbeiten unerlässlich ist.

Gibt es eine Begrenzung, wie viele Bilder ich einfügen kann?

Technisch nein. Wir empfehlen jedoch, sich an etwa 50-100 Bilder pro Sheet zu halten, damit die Dateidimensionen nicht überwältigend groß werden.

Was ist 'Pixel Bluten'?

Dies tritt auf, wenn Sub-Pixel-Rendering einen Splitter des nächsten Bildes im Sheet anzeigt. Fügen Sie in unserem Tool 1-2 Pixel 'Padding' hinzu, um dies zu verhindern.

Unterstützt dieses Tool SVG?

Dieses Tool ist für Raster-Sprites (PNG/JPG). Für SVGs sollten Sie einen 'SVG Sprite'-Ansatz verwenden, der in modernen Browsern anders gehandhabt wird.

Wie aktualisiere ich ein Sprite Sheet später?

Laden Sie einfach die ursprünglichen Symbole plus das neue erneut hoch. Unser Tool gibt Ihnen in Sekunden ein neues Sheet und neues CSS.

Ist dieses Tool für Spieleentwickler kostenlos?

Ja! Egal, ob Sie eine Website oder ein Handyspiel erstellen, unser Generator ist zu 100% kostenlos und ohne kommerzielle Einschränkungen.

Können Browser Sprite Sheets zwischenspeichern?

Ja! Dies ist einer der größten Vorteile. Der Browser muss nur eine Datei zwischenspeichern, um jedes Symbol für alle Seiten Ihrer Website bereit zu haben.

Sind meine proprietären Symboldaten sicher?

Absolut. Da Ihre Dateien lokal in Ihrem Browser verarbeitet werden, werden Ihre Designs niemals von unserem System hochgeladen, gespeichert oder angesehen.