CSS-Sprite-Sheet-Generator: Bilder mit CSS-Code kombinieren

Was sind CSS-Sprite-Sheets

Ein Sprite Sheet kombiniert mehrere kleine Bilder zu einer einzigen größeren Bilddatei. Jedes einzelne Bild belegt einen definierten Bereich innerhalb des Sheets. In der Webentwicklung wird die CSS-Eigenschaft background-position verwendet, um nur den Teil des Sprite Sheets anzuzeigen, der für das jeweilige Element benötigt wird. Das reduziert HTTP-Anfragen und verbessert die Ladeleistung der Seite.

Sprite Sheets waren in der frühen Web-Performance-Optimierung unverzichtbar, als jedes Bild eine eigene HTTP-Anfrage erforderte. Selbst mit dem modernen HTTP/2-Multiplexing bleiben Sprite Sheets wertvoll für Icon-Sets, UI-Elemente und Spiel-Animationen, bei denen Dutzende kleiner Bilder zusammen verwendet werden und davon profitieren, als einzelne, gecachte Datei geladen zu werden.

So funktioniert das Sprite-Sheet-Werkzeug

Laden Sie mehrere Bilder hoch, wählen Sie eine Layout-Richtung und erhalten Sie sowohl das Sprite-Sheet-Bild als auch fertigen CSS-Code.

• Bilder hochladen – wählen Sie mehrere kleine Bilder wie Icons, Buttons oder Animationsframes aus
• Layout wählen – entscheiden Sie sich für einen horizontalen Streifen, einen vertikalen Streifen oder eine Rasteranordnung und konfigurieren Sie den Abstand zwischen den Sprites
• Sprite Sheet und CSS herunterladen – exportieren Sie das kombinierte Bild und kopieren Sie den automatisch generierten CSS-Code mit den exakten background-position-Werten für jedes Sprite

Wann sich Sprite Sheets lohnen

Sprite Sheets optimieren die Auslieferung von Assets und vereinfachen Animations-Workflows.

• Web-Performance – kombinieren Sie Icon-Sets und UI-Elemente in einem einzigen Sprite Sheet, um die Anzahl der Bildanfragen zu reduzieren, was besonders bei Seiten mit vielen kleinen Icons von Vorteil ist
• Spieleentwicklung – packen Sie Animationsframes in Sprite Sheets für effizientes Rendering in Canvas-basierten oder CSS-animierten Spielen, bei denen aufeinanderfolgende Frames durch Verschieben der background-position angesteuert werden
• E-Mail und Legacy-Support – erstellen Sie Sprite Sheets für HTML-E-Mails und Legacy-Umgebungen, in denen moderne Techniken zum Laden von Bildern nicht verfügbar sind

Häufig gestellte Fragen

Welches Layout sollte ich wählen?

Horizontale Streifen eignen sich gut für Animationsframes, die nacheinander abgespielt werden. Vertikale Streifen sind gut für Menüs und Navigations-Icons. Ein Rasterlayout ist bei großen Icon-Sets am platzsparendsten. Das Werkzeug generiert für jedes gewählte Layout die korrekten background-position-Werte.

Generiert das Werkzeug CSS-Code?

Ja. Das Werkzeug generiert automatisch CSS-Code mit dem exakten background-position-Versatz für jedes Sprite im Sheet. Sie können den CSS-Code direkt in Ihr Stylesheet kopieren und die bereitgestellten Klassennamen verwenden, um einzelne Sprites anzuzeigen.

Welche Bildformate eignen sich am besten für Sprites?

PNG ist ideal, weil es Transparenz unterstützt, die für Icons und UI-Elemente mit nicht-rechteckigen Formen unverzichtbar ist. Das Sprite Sheet wird als PNG exportiert, um alle transparenten Bereiche Ihrer Ausgangsbilder zu erhalten.