Sprite-Sheet-Generator
Fasse mehrere Bilder zu einem Sprite-Sheet zusammen und erhalte den zugehörigen CSS-Code automatisch. Läuft zu 100 % im Browser.
Ctrl+Enter zum AusführenCtrl+Shift+C zum Kopieren
Mehr erfahren
CSS-Sprite-Sheet-Generator: Bilder mit CSS-Code kombinieren
Erfahre, wie du Sprite-Sheets mit automatisch generiertem CSS-background-position-Code für die Web-Optimierung erstellst.
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.
5 Min. LesezeitVollständigen Ratgeber lesen