Wie werden CSS-Sprites auf einer Seite oder Website…

CSS-Sprites sind eine Methode, um mehrere Bilder zu einem großen Bild zusammenzuführen. Dies wird mit CSS umgesetzt, indem die Sichtbarkeit des benötigten Ausschnitts des großen Bildes über die Eigenschaften background-image, background-position und background-repeat gesteuert wird.

Vorteile:

Reduzierung der HTTP-Anfragen. Statt vieler kleiner Bilder wird ein großes geladen.
Beschleunigung des Seitenladens. Weniger Anfragen an den Server, schnellere Darstellung.
Traffic-Einsparung. Die Gesamtgröße der Datei ist oft kleiner als die Summe der einzelnen Bilder.

Implementierung:

Erstellung des Sprites: Bilder werden mit Grafikeditoren oder speziellen Online-Tools/Build-Tools (z.B. Webpack mit dem Plugin css-spritesmith-plugin) zu einem Bild zusammengefügt.

CSS: Für Elemente, die Bilder aus dem Sprite verwenden, gelten folgende Stile:

.icon {
  background-image: url('path/to/sprite.png'); /* Pfad zur Sprite-Datei */
  background-repeat: no-repeat; /* Bild wird nicht wiederholt */
  display: block; /* oder inline-block, je nach Element */
  width: 32px; /* Breite des benötigten Icons */
  height: 32px; /* Höhe des benötigten Icons */
}

.icon-home {
  background-position: 0 0; /* Position des benötigten Ausschnitts für das "Home"-Icon */
}

.icon-settings {
  background-position: -32px 0; /* Position des benötigten Ausschnitts für das "Einstellungen"-Icon */
}

Im bereitgestellten CSS-Code legt .icon die allgemeinen Eigenschaften für alle Elemente fest, die das Sprite verwenden. Klassen wie .icon-home und .icon-settings bestimmen die spezifische Position des benötigten Bildausschnitts im Sprite mittels background-position.

Wie werden CSS-Sprites auf einer Seite oder Website implementiert?