CSS-Sprite-Generator

Klicken Sie, um ein Bild hochzuladen

Unterstützte Formate: PNG, JPG, WebP

Layout

Bildabstand: 10px

050

Bild hochladen, um Sprite-Vorschau anzuzeigen

Mehrere kleine Icons online zu einem CSS-Sprite-Sheet zusammenführen. Die Verarbeitung läuft lokal im Browser ohne Upload, und der CSS-Code für background-position wird automatisch für horizontale, vertikale und Raster-Layouts erzeugt.

Was ist ein CSS-Sprite?

Ein CSS-Sprite kombiniert mehrere kleine Bilder in einem größeren Bild und nutzt background-position, um einzelne Icons anzuzeigen. Der Begriff Sprite stammt aus frühen Spielkonsolen, die mehrere Animations-Frames in einem Bild bündelten und nacheinander anzeigten. Das Web hat die Idee übernommen, um viele kleine Icons mit einer einzigen Anfrage zu laden.

**Warum brauchen wir Sprites?** Zur Zeit von HTTP/1.1 löste jede Bilddatei eine eigene Anfrage aus, mit TCP-Handshake, TLS-Handshake und Header-Overhead. Hundert Icons bedeuteten hundert Anfragen. Ein Sprite legt alle Icons in einem Bild ab, erledigt den gesamten Icon-Ladevorgang in einer Anfrage und beschleunigt den First Paint. HTTP/2-Multiplexing verringert einen Teil davon, doch Sprites helfen weiterhin bei CDN-Caching, gzip-Komprimierung und HTTP/1.1-Fallback.

**So funktioniert es:** Stellen Sie sich ein 200x60-Sprite mit drei 60x60-Icons in einer Reihe vor. Für das erste Icon setzen Sie auf einem 60x60-Element `background: url(sprite.png); background-position: 0 0;`. Für das zweite ändern Sie auf -60px 0, für das dritte auf -120px 0. Dieses Tool erzeugt alle diese Koordinaten automatisch.

**Moderne Alternativen:** SVG + use oder symbol (empfohlen, vektorbasiert, einfärbbar, animierbar), Icon Font (breite Kompatibilität, plattformübergreifend), HTTP/2 Server Push und Web-Font-Icons. Jede Variante hat eigene Stärken, wählen Sie nach den Anforderungen Ihres Projekts.

Anwendungsfälle

Webprojekte mit vielen kleinen Icons, die zu einem Sprite zusammengeführt werden sollen, um HTTP-Anfragen zu reduzieren und den First Paint zu beschleunigen
Frontend-Entwickler, die Icon-Bestände zentral verwalten und den CSS-Code für background-position automatisch erzeugen möchten
Teams, die Sprite plus CSS als Batch erzeugen und sofort integrierbar ausliefern wollen
Nach dem Zusammenführen das kombinierte Bild durch das [Bild-Komprimierungs-Tool](/image/compress/) führen, um die Gesamtgröße zu reduzieren und den LCP zu verbessern
Apps, Electron- oder Desktop-Clients, die statische Icon-Bestände in einem einzigen Bild bündeln müssen
E-Mail-HTML-Vorlagen oder statische Blogs, die mehrere Icons benötigen und dennoch mit Mail-Clients kompatibel bleiben sollen
Designer, die Icons als Sprite liefern, damit Frontend-Entwickler sie schnell integrieren können
Spezielle 2x-Sprites für Retina-Displays, die per background-size an 1x- und 2x-Bildschirme angepasst werden

Anleitung

Klicken Sie auf den Upload-Bereich oder ziehen Sie mehrere Bilder hinein (JPG, PNG, WebP und GIF werden unterstützt)
Sortieren Sie die Icons in der linken Liste per Greifer oder über die Hoch- und Runter-Buttons
Wählen Sie Horizontal, Vertikal oder Raster im Layout-Bereich des linken Panels
Stellen Sie mit dem Padding-Slider den Pixelabstand zwischen den Icons ein (1 bis 5 px empfohlen)
Sehen Sie sich das Sprite in Echtzeit rechts an, klicken Sie dann auf Herunterladen, um die PNG-Datei zu speichern, und auf Kopieren, um das CSS zu übernehmen

Funktionen

Bilder mit einem Klick zusammenführen: Mehrere kleine Icons hochladen und zu einem Sprite kombinieren
Drei Layout-Modi: Horizontal, vertikal und Raster je nach Einsatzzweck frei umschaltbar
Anpassbares Padding: Ein Schieberegler von 0 bis 50 px steuert den Abstand zwischen Icons
Per Drag-and-Drop neu anordnen: Icons in der Liste verschieben, CSS-Koordinaten aktualisieren sich automatisch
Sortieren auf Mobilgeräten: Hoch- und Runter-Buttons ordnen Icons auf Smartphone und Tablet
CSS automatisch erzeugt: background-position, Breite und Höhe jedes Icons werden für Sie generiert
Live-Vorschau: Das Sprite wird bei jeder Änderung sofort neu erzeugt für ein echtes WYSIWYG
CSS mit einem Klick kopieren: Eine eingebaute Schaltfläche kopiert das gesamte Stylesheet in die Zwischenablage
PNG mit einem Klick herunterladen: Das kombinierte Bild wird lokal als sprite.png gespeichert
Lokale Browser-Verarbeitung: Die Canvas-API führt die Dateien lokal zusammen, nichts wird hochgeladen
Mehrere Eingabeformate: JPG, PNG, WebP und GIF werden unterstützt
Transparenz bleibt erhalten: Die PNG-Ausgabe bewahrt den ursprünglichen transparenten Hintergrund für saubere Kompositionen

Best Practices

Retina-2x-Anpassung: 2x-Quelldateien verwenden

Wenn Ihre Nutzer auf Retina-Displays (Mac, iPhone, HiDPI-Windows) unterwegs sind, laden Sie Quellen in 2x-Auflösung hoch (etwa 32x32-Icons) und erzeugen Sie das Sprite daraus. Skalieren Sie es anschließend im CSS mit background-size: 32px auto auf 16x16 zurück. So bleiben 1x- und 2x-Bildschirme mit einem einzigen Sprite scharf.

Sprites lohnen sich auch in HTTP/2-Projekten

HTTP/2-Multiplexing entschärft den Engpass bei der Anfrageanzahl, doch Sprites punkten weiterhin in vier Szenarien: CDN-Cache-Wiederverwendung, gzip- oder Brotli-Komprimierung, Traversierung interner Proxys und HTTP/1.1-Fallback. Unternehmensintranets, Behörden- und Banksysteme sowie E-Mail-HTML-Vorlagen laufen weiterhin überwiegend mit HTTP/1.1, wo Sprites unersetzlich sind.

PNG-8 vs. PNG-24: passende Farbtiefe wählen

Das Tool gibt ein festes PNG aus, doch die Farbtiefe der Quelle wählen Sie. Flache oder einfarbige Icons sollten PNG-8 sein (verlustfreie Transparenz, 60 bis 80 % kleiner als PNG-24). Icons mit Verläufen, Schatten oder Glanzlichtern brauchen PNG-24. Das Tool akzeptiert jedes Format, also optimieren Sie die Quellen zuerst mit einem PNG-Kompressor.

CDN-Cache-Strategie: Dateinamen hashen für Dauer-Cache

Vermeiden Sie einen festen Namen wie sprite.png. Benennen Sie mit einem Inhalts-Hash um (etwa sprite.a3f2b1.png) und setzen Sie Cache-Control: max-age=31536000 für dauerhaftes Caching. Der Browser lädt nur einmal herunter und bedient danach aus dem lokalen Cache, was mehr Bandbreite spart als HTTP/2 allein. Das Tool gibt standardmäßig sprite.png aus; Sie können die Datei nach dem Download umbenennen.

gzip oder Brotli machen Sprites noch kleiner

Ein kombiniertes Sprite hat eine gleichmäßigere Pixelstruktur als verstreute kleine Bilder, daher komprimiert gzip oder Brotli deutlich effizienter. Nginx mit gzip Stufe 1 schrumpft Sprites meist um 60 bis 80 %, Brotli erreicht 85 % und mehr. Mit aktivem Content-Encoding kann ein 1-MB-Sprite mit 200 bis 300 KB übertragen werden. Das ist der am meisten unterschätzte Sprite-Vorteil.

CSS Modules oder Vue scoped CSS: mit :global() umschließen

Wenn Ihr Projekt CSS Modules oder Vue scoped CSS verwendet, werden die von diesem Tool erzeugten Klassen .icon-home und .sprite lokal gehasht und funktionieren nicht mehr. Umschließen Sie gemeinsame Klassen mit :global(.sprite) { ... } in Ihrer .module.css oder verzichten Sie auf CSS Modules und nutzen stattdessen eine BEM-Namensgebung.

Mit Icon Font mischen: zentrale UI-Icons als Font, komplexe als Sprite

Das stabilste Produktionsmuster ist die Mischung. Verwenden Sie Icon Font für universelle UI-Icons (Einstellungen, Schließen, Suche, Benutzer), da sie einfärbbar, vektorbasiert und plattformübergreifend sind. Setzen Sie Sprites für komplexe farbige Icons ein (Produkt-Logos, Banner-Icons). Die beiden Ansätze ergänzen sich und vermeiden den Wartungsaufwand einer reinen Lösung.

spritesmith für Engineering-Projekte, dieses Tool für Prototypen

In langlebigen Projekten integrieren Sie spritesmith (Webpack) oder gulp.spritesmith in die Build-Pipeline: Quelländerungen regenerieren das Sprite, Dateinamen werden mit Hash ausgegeben und SCSS- oder LESS-Variablen automatisch erzeugt. Dieses Tool ist auf abhängigkeitsfreie Prototypen und kleine Lieferungen ausgelegt, während Build-Plugins besser zu CI/CD-Pipelines passen.

Moderne Projekte können vom Sprite zu SVG symbol migrieren

Unterstützt Ihr Projekt moderne Browser (Chrome, Safari, Firefox, Edge, dazu IE 11+), erwägen Sie die Migration vom Sprite zu SVG symbol: Eine einzige Datei verwaltet alle Icons, das CSS steuert Farbe und Animation, und background-position-Koordinaten müssen nicht mehr gepflegt werden. Das mit diesem Tool erzeugte Sprite ist während der Migration ein brauchbares Übergangs-Asset.

Häufig gestellte Fragen

Was ist ein CSS-Sprite und warum fasst man Bilder zusammen?

Ein CSS-Sprite kombiniert mehrere kleine Bilder in einem größeren Bild und nutzt background-position, um einzelne Icons anzuzeigen. Mit Sprites erledigt der Browser eine einzige HTTP-Anfrage für alle Icons, was die Anfragezahl stark reduziert und den First Paint im Vergleich zum Laden Dutzender Einzeldateien beschleunigt. Das ist eine klassische Frontend-Optimierung.

Wie kombiniere ich mehrere Icons online zu einem Sprite?

Laden Sie Ihre Bilder hoch, das Tool fügt sie im gewählten Layout mit Live-Vorschau zusammen. Rechts erzeugt es den CSS-Code mit background-position (inklusive Breite und Höhe) für jedes Icon, fertig zum Einfügen in Ihr Stylesheet. Das Sprite wird als PNG ausgegeben und ist mit einem Klick heruntergeladen.

Wie verwende ich den erzeugten CSS-Code?

Legen Sie sprite.png im Projekt ab (zum Beispiel /img/sprite.png) und fügen Sie das CSS in Ihr Stylesheet ein. Versehen Sie jedes Element, das ein Icon zeigen soll, mit der Klasse .sprite und der passenden .icon-xxx-Klasse, etwa <i class="sprite icon-home"></i>. Die Klassennamen werden automatisch aus dem ursprünglichen Dateinamen erzeugt.

Welche Layout-Modi werden unterstützt?

Drei Modi: Horizontal (Icons nebeneinander in einer Zeile), Vertikal (Icons von oben nach unten in einer Spalte gestapelt) und Raster (Icons werden automatisch als quadratische Matrix angeordnet, Spaltenzahl = Quadratwurzel, aufgerundet). Wechseln Sie im linken Panel den Modus, um das Ergebnis vorzuschauen.

Kann ich den Abstand zwischen den Icons anpassen?

Ja. Im linken Panel gibt es einen Padding-Slider von 0 bis 50 px; 1 bis 5 px werden empfohlen. Ein sinnvolles Padding verhindert das Ausbluten der Randpixel beim CSS-Positionieren, beeinflusst aber die Nutzung nicht. Das Padding lebt innerhalb des Sprites, das CSS nutzt nur die exakten background-position-Koordinaten.

Kann ich die Reihenfolge der Icons ändern?

Ja. Jeder Eintrag in der linken Liste lässt sich per Drag-and-Drop mit dem Greifer neu anordnen, und die Hoch-/Runter-Buttons funktionieren auf Mobilgeräten. Sprite und CSS-Koordinaten werden automatisch regeneriert, sobald sich die Reihenfolge ändert.

Welche Bildformate werden unterstützt?

Alle gängigen Formate: JPG, PNG, WebP, GIF und mehr. Die Ausgabe ist immer PNG (Transparenz bleibt erhalten). PNG als Eingabe wird empfohlen, da transparente Hintergründe das Zusammenführen ins Sprite überstehen.

Sind CSS-Sprites in modernen Projekten noch sinnvoll?

HTTP/2-Multiplexing verringert einen Teil des Sprite-Vorteils, doch Sprites liefern weiterhin Mehrwert durch CDN-Caching, gzip-Komprimierung und schnelleren First Paint bei Schlüssel-Icons. Bei weniger als 10 Icons oder wenn Farbe und Animation nötig sind, sind SVG symbol oder Icon Font vorzuziehen. Für viele statische PNG-Icons bleibt das Sprite eine stabile, zuverlässige Wahl.

Werden Sprites auf Retina-Bildschirmen unscharf? Wie behebt man das?

Ja, das kann passieren. Retina-Bildschirme (Mac, iPhone, HiDPI-Windows) haben die doppelte oder dreifache Anzahl physischer Pixel, daher wird ein 1x-Sprite gestreckt und wirkt unscharf. Die Lösung: 2x-Quellen hochladen (32x32 statt 16x16) und das Sprite im CSS mit background-size: 32px auto wieder auf 16x16 skalieren.

Geht beim Zusammenführen die Bildqualität verloren?

Nein. Beim Zusammenführen wird jedes Bild lediglich an seiner Position auf einer großen Leinwand platziert. Kein Resampling, keine Kompression und keine Farbanpassung finden statt. Das ausgegebene PNG behält die Originalqualität. Möchten Sie die zusammengeführte Datei weiter verkleinern, führen Sie sie durch das [Bild-Komprimierungs-Tool](/image/compress/).

Werden meine Sprite-Bilder auf einen Server hochgeladen?

Nein. Das gesamte Zusammenführen passiert lokal im Browser über die Canvas-API. Die Dateien verlassen Ihr Gerät nie und werden beim Schließen der Seite verworfen. Interne Icons, unveröffentlichte Logos und andere sensible Assets können bedenkenlos verarbeitet werden.

Wie lade ich das erzeugte Sprite herunter?

Sobald Bilder hochgeladen sind, erscheint eine Vorschau. Klicken Sie im linken Panel auf Herunterladen, um sprite.png lokal zu speichern. Das CSS wird automatisch erzeugt, und ein Klick auf Kopieren überträgt es in die Zwischenablage.

Kann ich die Klassennamen anpassen?

Die Klassennamen werden automatisch aus dem ursprünglichen Dateinamen mit dem Präfix .icon- erzeugt. Aus home.png wird also .icon-home. Verwenden Sie englische Bezeichnungen, Ziffern und Bindestriche, um saubere, gut lesbare Klassennamen zu erhalten.

Wie wähle ich zwischen Sprite, Icon Font und SVG symbol?

Das hängt vom Anwendungsfall ab. Viele statische PNG-Icons oder nötige Unterstützung für ältere IE-Versionen: Sprite. Universelle UI-Icons, die einfärbbar und plattformübergreifend sein sollen: Icon Font. Moderne Projekte mit Farbe, Animation und einer einzelnen Datei: SVG symbol ist die erste Wahl. In der Praxis ist die Mischung üblich: Icon Font für zentrale UI-Icons, Sprite für komplexe farbige Icons.

Kann ich das zusammengeführte Sprite mit dem Komprimierungs-Tool verkleinern?

Ja. Dieses Tool gibt ein verlustfreies PNG aus, das recht groß sein kann. Ein guter Workflow: Erzeugen Sie hier das Sprite, führen Sie es anschließend durch das [Bild-Komprimierungs-Tool](/image/compress/), um das PNG zu verkleinern oder in JPG zu konvertieren (falls keine Transparenz nötig ist), und nutzen Sie zuletzt den [Bild-Konverter](/image/convert/), um es bei Bedarf in WebP umzuwandeln. Die Kombination der Tools maximiert die Ladeleistung.

Glossar

CSS-Sprite: Technik, die mehrere kleine Bilder in einem größeren Bild kombiniert und mit background-position einzelne Icons anzeigt. Eine klassische Frontend-Optimierung.
background-position: CSS-Eigenschaft, die die Startkoordinaten des Hintergrundbilds festlegt. Sprites nutzen negative Werte, um das Hintergrundbild nach links oder oben zum gewünschten Icon zu verschieben. Beispiel: background-position: -60px 0 zeigt das Icon mit 60 px Versatz.
background-size: CSS-Eigenschaft, die die angezeigte Größe des Hintergrundbilds steuert. Der Schlüssel zur Retina-Anpassung: Nach dem Erzeugen eines Sprites aus 2x-Quellen setzen Sie im CSS background-size: 32px auto, um auf 1x zurückzuskalieren und 1x- wie 2x-Bildschirme scharf zu halten.
Raster-Layout: Der Raster-Modus dieses Tools berechnet die Spaltenanzahl automatisch als Quadratwurzel der Icon-Anzahl (aufgerundet) und ordnet die Icons zeilenweise in einem Quadrat an. Neun Icons ergeben ein 3x3-Raster.
Padding (Icon-Abstand): Der Pixelabstand zwischen benachbarten Teilbildern in einem Sprite. 1 bis 5 px werden empfohlen, um das Ausbluten der Randpixel zu verhindern. Das Padding lebt im Sprite, das CSS nutzt nur die exakten Koordinaten.
PNG-Transparenz: PNG unterstützt einen Alpha-Kanal, daher können Icons transparente Hintergründe besitzen. Die Sprite-Ausgabe behält das PNG-Format, sodass transparente Icons nach dem Zusammenführen weiterhin transparent bleiben.
HTTP/2-Multiplexing: HTTP/2 verarbeitet mehrere Anfragen parallel über eine einzige Verbindung, was einen Teil des Sprite-Vorteils verringert. Bei CDN-Konfiguration, Kompatibilität mit alten Browsern und gzip-Komprimierung bleibt HTTP/2 dennoch hinter einem kombinierten Sprite zurück.
SVG symbol: Das <symbol>-Element von SVG mit <use>-Referenzen. Alle Icons leben in einer einzigen SVG-Datei, CSS steuert fill, stroke und Animation. Der bevorzugte Sprite-Ersatz in modernen Projekten.
DPR (Device Pixel Ratio): Das Verhältnis zwischen physischen und CSS-Pixeln. Retina-Bildschirme haben DPR = 2, daher benötigt ein CSS-Icon mit 16x16 tatsächlich 32x32 physische Pixel. DPR ist der zentrale Parameter für die Sprite-Anpassung an Retina-Displays.

Vergleich der Sprite-Layout-Modi

Layout	Anordnungsregel	Typischer Einsatz
Horizontal	Icons nebeneinander von links nach rechts in einer Zeile	Navigationsleisten, Tabs, horizontale Werkzeugleisten
Vertikal	Icons von oben nach unten in einer Spalte gestapelt	Vertikale Menüs, Listenpräfixe, Top-down-Strukturen
Raster	Icons werden je nach Anzahl automatisch als quadratische Matrix angeordnet	Allgemeiner Einsatz, beste Standardwahl bei unbekannter Anzahl

Empfohlene Padding-Werte für Sprites

Padding (px)	Ideal für	Hinweise
`0px`	Saubere Kanten, Icons mit eigenem transparenten Padding	Maximale Kompaktheit; Randpixel können ausbluten
`1-2px`	Hochwertige Icons mit minimalem Sicherheitsabstand	Empfohlen: ausgewogen zwischen Kompaktheit und Stabilität
`3-5px`	Standard-Icons mit Schatten oder Konturen	Sicherer Abstand, branchenüblicher Standard
`6-10px`	Icons mit sehr unterschiedlichen Größen oder Konturen	Verhindert, dass große Icons kleinere überdecken
`10-50px`	Debugging oder visuelle Gruppierung	Nicht für den Produktionseinsatz empfohlen

Referenz zur Retina-2x-Sprite-Anpassung

Bildschirm-DPR	CSS-Größe	Quelldateigröße	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Bild-Sprites in CSS implementieren
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> und <use>
ReferenceWeb.dev - Bilder durch CSS-Sprites ersetzen
ReferenceWikipedia - Sprite (Computergrafik)