Bild-Sprite-Tafel Kombinieren Sie mehrere Bilder zu einer einzelnen Sprite-Tafel mit konfigurierbaren Spalten und Abständen.

What Is Bild-Sprite-Tafel?

Ein Sprite-Sheet-Generator, der mehrere Bilder zu einem einzelnen Zusammensetzbild in Rasteranordnung kombiniert, zusammen mit den CSS-Hintergrundpositionskoordinaten für jedes Sprite. Wesentlich für die Webleistungsoptimierung, Spiel-Sprite-Animationen und Symbolsets. Laden Sie Ihre Einzelbilder hoch, legen Sie die Spaltenzahl und den Abstand fest und das Tool generiert sowohl das Zusammensetzbild im PNG-Format als auch den CSS-Ausschnitt.

Why Use Bild-Sprite-Tafel?

• Erzeugt Sprite-Bild + CSS-Koordinaten
• Konfigurierbare Spalten und Abstände
• Reduziert HTTP-Anfragen für bessere Webleistung
• Ideal für Symbolsets und Spiele-Sprites

Common Use Cases

Webleistung

Kombinieren Sie Symbole in einem einzigen Sprite-Bild, um HTTP-Anfragen zu reduzieren.

Spieleentwicklung

Erstellen Sie Animations-Sprite-Bilder aus einzelnen Bildern.

Symbolsets

Packen Sie mehrere Symbole in ein effizientes Sprite-Bild.

CSS-Sprites

Erzeugen Sie optimierte Sprite-Bilder mit fertigem CSS-Code.

Technical Guide

Bilder werden geladen und in einem Raster mit konfigurierbaren Spalten angeordnet. Die Zeilenanzahl wird als Deckenfunktion (Bilddateianzahl/Spalten) berechnet. Die Canvas-Abmessungen werden aus der maximalen Breite pro Spalte und der Gesamtreihenhöhe plus Abstand berechnet. Jedes Bild wird an seiner berechneten Rasterposition gezeichnet. CSS-Koordinaten werden als negative Hintergrundpositionswerte für jedes Sprite generiert.

Tips & Best Practices

• 1
  Verwenden Sie konsistente Bildgrößen für ein sauberes Raster
• 2
  Halten Sie den Abstand bei 1-2px, um verschwendeten Platz zu minimieren
• 3
  Benennen Sie Ihre Dateien beschreibend, um bessere CSS-Klassennamen zu erhalten
• 4
  Verwenden Sie Zweierpotenzen für die Kompatibilität mit Spiel-Engines

Related Tools

Bildgrößenanpasser

Passe Bilder auf exakte Pixelmaße oder Prozentsatz an, während das Seitenverhältnis beibehalten wird.

🖼️ Image Tools

Favicon-Generator

Erstellen Sie Favicons in verschiedenen Größen (16x16, 32x32, 48x48 und mehr) aus jedem Bild.

🖼️ Image Tools

Bildercollage

Kombinieren Sie mehrere Bilder zu einer einzelnen Collage mit anpassbaren Layouts und Abständen.

🖼️ Image Tools

Bild-Raster-Ersteller

Teilen Sie ein einzelnes Bild in ein Raster aus gleich großen Kacheln für Instagram-Raster und Puzzles auf.

🖼️ Image Tools

Frequently Asked Questions

Q Welche Bildgrößen funktionieren am besten?

Konsistente Größen erzeugen die saubersten Sprites, aber gemischte Größen werden unterstützt.

Q Wird CSS generiert?

Ja - vollständiger CSS-Code mit background-position-Werten für jeden Sprite.

Q Wie viele Bilder kann ich kombinieren?

Jede Anzahl von Bildern kann in ein einzelnes Sprite-Bild kombiniert werden.

Q Was ist mit Retina-Displays?

Verwenden Sie Bilder mit 2x-Auflösung und halbieren Sie die CSS-Hintergrundgröße für Retina-Unterstützung.

Q Kann ich es für Spiele-Sprites verwenden?

Absolut - ordnen Sie Animationsframes in Sequenz für Spiele-Sprite-Bilder an.

About This Tool

Bild-Sprite-Tafel is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.