Sprite-Sheet-Generator

Kombinieren Sie mehrere Bilder zu einem einzigen Sprite-Sheet-PNG. Anordnung horizontal, vertikal oder im Raster mit benutzerdefiniertem Abstand. Inklusive CSS-Vorschau.

Eingabe (0)
Mehrere Bilder hier ablegen oder klicken zum AuswählenUnterstützt: PNG, JPG, WEBP, GIF (mindestens 2 Bilder)
Ausgabe
Sprite-Sheet
🛡️Zero server logs. Sprite sheet generation runs 100% inside your browser via Web Workers. Your files never leave this tab.
🛠️Entwickler-Werkzeuggürtel
Weitere Image-ToolsBildhistogrammKontrastprüferFavicon-GeneratorPixel-AnalyzerBildeditorDuplikat-ErkennungAlle image Tools anzeigen →

Sprite-Sheet-Generator

Sprite-Sheet-Generator kombiniert mehrere Bilder zu einem einzigen PNG-Sprite-Sheet. Anordnung horizontal, vertikal oder im Raster mit individuellem Abstand.

🔒 Client-side only⚡ Web Worker processing🌐 Works offline🛡️ Zero server logs

So generieren Sie ein Sprite-Sheet

  1. Laden Sie zwei oder mehr Bilder per Drag & Drop hoch oder klicken Sie zum Auswählen.
  2. Wählen Sie ein Layout (horizontal, vertikal oder Raster) und passen Sie den Abstand an.
  3. Klicken Sie auf Generieren, um Ihr Sprite-Sheet zu erstellen und den CSS-Code zu erhalten.

Häufig gestellte Fragen

Fragen zu Sprite-Sheets? Wir haben Antworten.

Was ist ein Sprite-Sheet?

Ein Sprite-Sheet ist eine einzelne Bilddatei, die mehrere kleinere Bilder in einem Raster enthält. Es wird häufig in der Webentwicklung verwendet, um HTTP-Anfragen zu reduzieren.

Wie viele Bilder kann ich kombinieren?

Sie können so viele Bilder kombinieren, wie Ihr Browser verarbeiten kann. Für optimale Leistung empfehlen wir bis zu 100 Bilder.

Ist dieses Tool sicher?

Ja, 100%. Die gesamte Verarbeitung erfolgt in Ihrem Browser über Web Worker. Ihre Bilder verlassen nie Ihr Gerät.

Automatisierte E2E-Testsuite-Protokolle

Unsere Buildsysteme validieren Edge-Case-Verarbeitung unter extremen Bedingungen vor jeder Bereitstellung.

Stability
100.0%
Passed
11/11
Env
V8-Sandbox
Engine: Vitest RunnerUpdated: 2026/6/13 02:40:10📦 Testdatensätze herunterladen
PASSPure Function Unit Tests should handle valid image input
PASSPure Function Unit Tests should reject invalid input
PASSPure Function Unit Tests should not mutate original input
PASSPure Function Unit Tests should handle boundary input
PASSSpriteSheetGeneratorTool should render Input and Output labels
PASSSpriteSheetGeneratorTool should call generate when button is clicked and files are set
PASSSpriteSheetGeneratorTool should disable button when isLoading is true
PASSSpriteSheetGeneratorTool should render privacy strip
PASSImage Worker — Sprite Sheet Actions should return success for valid sprite-sheet action
PASSImage Worker — Sprite Sheet Actions should return error for unknown action
PASSImage Worker — Sprite Sheet Actions should return error for invalid payload
⏱️ 0.18ms📦 1.5KB🎚️ Max Nesting: 3🌿 AST Nodes: 48🛡️ V8 Heap: Healthy
$ codecaven-validator --scope=tool● CLUSTER COMPLIANT

Tool-Änderungsprotokoll & Updates

v1.1.02026-06-11
  • Feature: Umfassende Vitest-Testsuite für Tool-Rendering, Worker-Operationen und Shared-Operation-Logik — alle 871 Bild-Tests bestehen.
  • Fix: Korrigierte OffscreenCanvas-Mock-Muster in Tests für korrekte Konstruktor-Instanziierung.
v1.0.02026-06-11
  • Feature: Erstveröffentlichung mit Sprite-Sheet-Generierung — mehrere Bilder in einem einzigen PNG kombinieren, horizontal, vertikal oder im Raster.
  • UX: Multi-Datei-Upload mit Vorschau, konfigurierbarem Rand und Abstand zwischen Sprites.
  • UX: CSS-Vorschau mit Background-Position für jedes Sprite-Element.
  • Security: Web-Worker-Isolation gewährleistet null Datenübertragung — die gesamte Verarbeitung erfolgt im Browser.