CSS-Sprite-Generator (Icons in einem Bild zusammenfassen)

CSS-Sprite-Generator (Icons in einem Bild zusammenfassen): wofür es gut ist

Ein Sprite fasst mehrere Icons in einem Bild zusammen, und das CSS zeigt an jeder Stelle den richtigen Ausschnitt mit background-position. Der Browser macht eine Anfrage statt zehn, und Hover-Icons blinken nicht.

Wähle die Icons, die Anordnung (Raster, Zeile oder Spalte), den Abstand dazwischen und das Format. Lade das Sprite herunter und kopiere das CSS mit einer Klasse pro Icon (der Dateiname wird zum Klassennamen), Breite, Höhe und Position. Die Retina-Option zeigt in doppelter Größe gemachte Icons zur Hälfte, scharf auf Bildschirmen hoher Dichte.

So geht’s

1. Wähle die Icons.
2. Passe Anordnung, Abstand und Format an.
3. Lade das Sprite herunter und kopiere das CSS.

Wann nutzen

• Icons sozialer Netzwerke mit Hover.
• Flaggen und Abzeichen.
• Sprites von Spielen in HTML.

Häufige Fragen

Wozu dient ein Sprite?

Statt zehn einzelne Icons zu laden, lädt der Browser nur ein Bild, und das CSS zeigt an jeder Stelle den richtigen Ausschnitt mit background-position. Das verringert die Zahl der Anfragen an den Server und verhindert blinkende Icons beim Darüberfahren mit der Maus, weil der Hover-Zustand schon geladen ist.

Lohnt sich ein Sprite mit HTTP/2 noch?

Mit HTTP/2 sind die Kosten vieler kleiner Dateien stark gesunken, daher ist der Gewinn kleiner als früher. Sprites sind weiter nützlich für Hover-Icon-Sets, Flaggen, Abzeichen und Spiele im Canvas und für alle, die kein Inline-SVG nutzen können.

Was ist die Retina-Option?

Wenn deine Icons in doppelter Größe gemacht wurden, als sie erscheinen, markiere die Option: Das CSS zeigt jedes zur Hälfte mit background-size, und sie bleiben auf Bildschirmen hoher Dichte scharf, wie bei Handys und Macs.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools