Czym są sprite'y CSS?

Sprites CSS to metoda optymalizacji, która pozwala na połączenie kilku obrazów w jeden duży obraz. Zamiast ładować każdy obraz osobno, przeglądarka ładuje jeden duży plik, a następnie używa właściwości CSS background-image, background-position oraz width/height, aby wyświetlić odpowiednią część tego obrazu.

Zalety korzystania ze sprite'ów CSS:

• Zmniejszenie liczby żądań HTTP: Ładowanie jednego pliku zamiast wielu zmniejsza obciążenie serwera i przyspiesza czas renderowania strony.
• Buforowanie: Duży obraz jest buforowany przez przeglądarkę, co poprawia wydajność przy kolejnych odwiedzinach.
• Zmniejszenie rozmiaru pliku: W niektórych przypadkach łączenie obrazów może prowadzić do niewielkiego zmniejszenia łącznego rozmiaru plików dzięki optymalizacji kompresji.

Przykład użycia (HTML):

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

Przykład użycia (CSS):

.icon {
  width: 32px; /* Szerokość ikony */
  height: 32px; /* Wysokość ikony */
  background-image: url('sprites.png'); /* Ścieżka do pliku sprite */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Pozycja ikony "home" w sprite */
}

.icon.settings {
  background-position: -32px 0; /* Pozycja ikony "settings" w sprite */
}

W tym przykładzie sprites.png to plik zawierający ikony "home" i "settings". Właściwość background-position ustawia przesunięcie, aby wyświetlić żądany ikonę.