CSS-Sprite-Generator
Kostenloser Online-CSS-Sprite-Generator
Was ist ein CSS-Sprite?
Ein CSS-Sprite kombiniert mehrere kleine Bilder in einer einzigen Bilddatei (Sprite-Sheet). CSS background-position wird dann verwendet, um einzelne Bilder aus der kombinierten Datei anzuzeigen. Dies reduziert die Anzahl der HTTP-Anfragen und verbessert die Seitenlade-Performance.
CSS-Sprite erstellen
Laden Sie mehrere Bilder hoch. Waehlen Sie ein Layout (horizontal, vertikal oder Raster). Das Tool kombiniert sie zu einem einzigen Sprite-Sheet und generiert das CSS mit background-position-Werten fuer jedes Bild.
▶Sind CSS-Sprites noch nuetzlich?
Mit HTTP/2-Multiplexing hat der Performance-Vorteil von Sprites abgenommen. Sprites helfen jedoch noch, wenn viele winzige Icons bereitgestellt werden oder wenn Icon-Systeme mit Single-File-Caching verwendet werden.
▶Was ist das beste Layout fuer Sprites?
Horizontales Layout ist kompakt fuer wenige Bilder. Raster-Layout funktioniert gut fuer viele Icons aehnlicher Groesse. Vertikales Layout ist nuetzlich, wenn alle Bilder dieselbe Breite haben.
▶Wie verwende ich das generierte CSS?
Das CSS verwendet background-image auf dem Sprite-Sheet und background-position fuer jedes Icon. Wenden Sie die generierten Klassen auf Ihre HTML-Elemente an.