Was sind CSS-Sprites?

CSS-Sprites sind eine Optimierungsmethode, die es ermöglicht, mehrere Bilder in ein großes Bild zu kombinieren. Anstatt jedes Bild einzeln zu laden, lädt der Browser eine große Datei und verwendet dann die CSS-Eigenschaften background-image, background-position und width/height, um den gewünschten Teil dieses Bildes anzuzeigen.

Vorteile der Verwendung von CSS-Sprites:

• Reduzierung der HTTP-Anfragen: Das Laden einer einzigen Datei anstelle vieler verringert die Serverbelastung und beschleunigt die Seitenrenderzeit.
• Caching: Ein großes Bild wird vom Browser zwischengespeichert, was die Leistung bei wiederholten Besuchen verbessert.
• Reduzierung der Dateigröße: In einigen Fällen kann die Zusammenführung von Bildern zu einer leichten Verringerung der Gesamtgröße der Dateien führen, dank Optimierung der Kompression.

Beispiel für die Verwendung (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Beispiel für die Verwendung (CSS):

.icon {
  width: 32px; /* Breite des Symbols */
  height: 32px; /* Höhe des Symbols */
  background-image: url('sprites.png'); /* Pfad zur Sprite-Datei */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Position des "home"-Symbols im Sprite */
}

.icon.settings {
  background-position: -32px 0; /* Position des "settings"-Symbols im Sprite */
}

In diesem Beispiel ist sprites.png die Datei, die die Symbole "home" und "settings" enthält. Die Eigenschaft background-position legt die Verschiebung fest, um das gewünschte Symbol anzuzeigen.