Kostenloser CSS-Sprite-Generator

Der Sprite-Generator ist ein kostenloses Online-Tool, das mehrere Bilder zu einem einzigen Sprite-Sheet mit dem zugehörigen CSS-Code zur Web-Optimierung zusammenfügt.

Ja, er ist völlig kostenlos und erfordert keine Registrierung. Die gesamte Sprite-Erzeugung erfolgt clientseitig in deinem Browser.

CSS-Sprites reduzieren HTTP-Anfragen, indem sie mehrere Bilder in einer Datei zusammenfassen, was die Ladegeschwindigkeit der Seite und die Gesamtleistung der Website verbessert.

Absolut. Der CSS-Sprite-Generator verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.

Ja, der CSS-Sprite-Generator ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ganz ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den CSS-Sprite-Generator in deinem Browser und lege sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der CSS-Sprite-Generator unterstützt gängige Bildformate wie PNG, JPG/JPEG, WebP und GIF. Je nach Tool können einige Funktionen auch SVG und BMP unterstützen.

Gib einfach deine Eingabe in das vorgesehene Feld ein, passe die Einstellungen nach Wunsch an, und das Tool verarbeitet sie sofort. Anschließend kannst du das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der CSS-Sprite-Generator funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

Das Layout bestimmt, wie deine Bilder auf dem Sheet angeordnet werden, was sich direkt auf dessen Endgröße auswirkt. Horizontal reiht jedes Bild in einer einzigen Zeile auf, vertikal stapelt sie in einer Spalte — beides ist einfach und vorhersehbar, kann aber Platz verschwenden, wenn die Bildgrößen stark variieren. Raster platziert Bilder in gleichmäßigen Zellen mit einer von dir gewählten Spaltenzahl, was bei ähnlich großen Icons sehr aufgeräumt wirkt. Gepackt ist die klügste Option: Es nutzt regalbasiertes Bin-Packing, sortiert Bilder nach Höhe und fügt sie in ein möglichst kleines, sinnvolles Rechteck ein — das ergibt in der Regel das kompakteste Sheet und die kleinste Datei. Bei gemischten Icon-Größen solltest du mit gepackt starten; willst du eine ordentliche, gleichmäßig verteilte Anordnung, nimm Raster. Probiere oben ein paar Layouts aus und vergleiche die erzeugten Sheet-Abmessungen, bevor du dich entscheidest.

Ein Sprite Sheet ist ein einziges Bild, das viele kleinere Grafiken enthält, und CSS background-position verschiebt dieses Bild hinter eine Box mit fester Größe, sodass nur der gewünschte Ausschnitt sichtbar ist. Jede generierte Klasse setzt das Sheet als Hintergrund, legt Breite und Höhe des Elements auf die Icon-Abmessungen fest und verschiebt das Bild dann mit negativen Koordinaten — zum Beispiel zieht background-position: -48px -16px das Sheet nach oben und links, sodass das Icon an dieser Stelle in der Box landet. Der Browser lädt das komplette Sheet einmal und nutzt es für jedes Icon wieder, weshalb eine einzige Anfrage Dutzende Grafiken bedienen kann. Dieses Tool schreibt genau diese Versatzwerte für dich, benennt eine Klasse pro Quelldatei, sodass du die Klasse nur noch einem Element hinzufügen musst. Erzeuge dein Sheet oben, um den fertigen, einfügbaren Positionierungscode zu erhalten.

Retina- bzw. High-DPI-Bildschirme bündeln zwei oder drei Geräte-Pixel in jedem CSS-Pixel, sodass ein normales Sprite darauf unscharf wirken kann. Aktivierst du Retina, werden zusätzlich zum normalen Sheet @2x- und @3x-Versionen in doppelter und dreifacher Auflösung gerendert, und die passenden min-resolution-Media-Queries werden automatisch ins CSS geschrieben, sodass jedes Gerät automatisch das schärfste benötigte Sheet lädt. Schalte die Funktion ein, wenn deine Icons auf modernen Smartphones, Tablets und High-DPI-Laptops scharf bleiben müssen — was heute auf die meisten Produktivseiten zutrifft. Der Kompromiss sind größere Dateien, da @3x-Assets die neunfache Pixelfläche haben; für rein dekorative oder selten gesehene Grafiken reicht das Standard-Sheet oft aus. Aktiviere oben die Retina-Option, und das Tool übernimmt die zusätzlichen Sheets und Media-Queries für dich.

Neben dem CSS erzeugt der Generator ein JSON-Manifest im TexturePacker-Hash-Format, das Name, Position und Größe jedes Frames auf dem Sheet festhält. Game- und Canvas-Engines lesen diesen Atlas ein, um einzelne Frames zur Laufzeit aus einer Textur herauszuschneiden, statt viele einzelne Bilder zu laden. Das Format ist kompatibel mit Phaser, PixiJS und anderen Bibliotheken, die JSON-Sprite-Atlanten akzeptieren, sodass du Sheet und Manifest gemeinsam laden und Frames über ihre ursprünglichen Dateinamen referenzieren kannst. Das macht das Tool über CSS im Web hinaus nützlich — es funktioniert für HTML5-Spielgrafiken, Animationen und Tile-Sets, nicht nur für Interface-Icons. Nutze oben Alles herunterladen, um Sprite Sheet, Stylesheet und JSON-Manifest in einem Schritt zu erhalten, damit Atlas und Bild synchron bleiben.

Wähle das Format danach, was deine Sprites enthalten. PNG ist verlustfrei und erhält volle Transparenz, was es zur sicheren Standardwahl für Icons, Logos und UI-Grafiken macht, die klare Kanten oder Alphakanäle brauchen. WebP liefert bei gleicher visueller Qualität meist die kleinste Datei und unterstützt weiterhin Transparenz, weshalb es die beste Wahl für Performance ist, wenn du keine sehr alten Browser unterstützen musst. JPEG eignet sich für fotografische Inhalte, kennt aber keine Transparenz und kann an scharfen Kanten Artefakte zeigen, daher solltest du es für flache Icons meiden. Für WebP und JPEG bietet das Tool einen Qualitätsregler von 10 bis 100 Prozent, mit dem du Dateigröße gegen Bildtreue abwägen kannst. Für die meisten Icon-Sets liefert WebP mit hoher Qualitätseinstellung scharfe Ergebnisse und das leichteste Sheet — wähle oben dein Format und vergleiche die Ausgabegröße.