Batch CSS-Sprites-Generator
Mehrere Icons oder Bilder in einer Datei zusammenfassen, um HTTP-Anfragen zu reduzieren und Ihre Website-Geschwindigkeit zu steigern. Automatisch perfekten CSS-Code generieren.
Icons hier ablegen, um Sprites zu generieren
Unterstützt PNG, JPG, WebP, AVIF. Kombiniere mehrere Bilder in ein CSS-Sprite-Sheet.
Mit Beispielen ausprobieren
Galerie geladen
Sprite Studio
Sprite-Sheet-Vorschau
Einzelne Icons
| Symbol | Klassenname | Position | Größe | Aktion |
|---|
Sprite-Optionen
Stapelanwendung
Automatische Neugenerierung bei Änderungen
Professionelle CSS-Sprites-Erstellung
Optimieren Sie Ihre Web-Assets, indem Sie mehrere kleine Bilder zu einem einzigen Sprite-Sheet kombinieren. Reduzieren Sie Latenzzeiten, sparen Sie Bandbreite und vereinfachen Sie Ihren CSS-Workflow.
Website-Geschwindigkeit steigern
Weniger HTTP-Anfragen bedeuten schnellere Seitenladezeiten. Durch das Zusammenführen von 50 Symbolen in ein Sprite-Sheet eliminieren Sie 49 Roundtrips zum Server.
Automatisch generiertes CSS
Kein manuelles Pixelzählen mehr. Unser Tool berechnet automatisch Hintergrundpositionen und -abmessungen für jedes Symbol in Ihrem Sheet.
Intelligente Layouts
Wählen Sie zwischen vertikalen, horizontalen oder optimierten Rasterlayouts. Passen Sie den Abstand an, um ein "Ausbluten" zwischen den Symbolen während der Skalierung zu verhindern.
Wie man ein CSS-Sprite-Sheet erstellt
Laden Sie Ihre Symbole hoch
Ziehen Sie alle kleinen Bilder oder Symbole, die Sie zusammenführen möchten, per Drag & Drop. Wir unterstützen PNG, JPG, WebP und AVIF.
Sprite-Einstellungen konfigurieren
Wählen Sie das Layout, passen Sie den Abstand an und legen Sie Ihr CSS-Klassenpräfix fest. Die Vorschau wird sofort aktualisiert.
Sprite & CSS exportieren
Laden Sie das endgültige Sprite Sheet und den entsprechenden CSS-Code als ZIP-Datei herunter. Einfach kopieren und in Ihr Projekt einfügen.
Häufig gestellte Fragen
Warum sollte ich CSS-Sprites verwenden?
CSS-Sprites sind eine klassische Performance-Technik. Sie reduzieren die Anzahl der HTTP-Anfragen, was besonders bei langsameren Verbindungen oder Seiten mit vielen kleinen Assets wie Icons oder UI-Elementen vorteilhaft ist.
Welches Layout sollte ich wählen?
Vertikale und horizontale Layouts sind am einfachsten zu debuggen. Das Rasterlayout ist am effizientesten, um die endgültige Bildfläche und Dateigröße zu minimieren.
Wie sieht es mit hochauflösenden (Retina) Bildschirmen aus?
Sie können ein Sprite-Sheet mit doppelt so großen Icons generieren und in Ihrem CSS "background-size" verwenden, um es für eine scharfe Darstellung auf hochauflösenden Displays herunterzuskalieren.