Jak na stronie lub stronie internetowej realizuje się…

CSS-sprites to technika łączenia kilku obrazów w jeden duży. Realizuje się ją za pomocą CSS, kontrolując widoczność potrzebnego fragmentu dużego obrazu przez właściwości background-image, background-position i background-repeat.

Zalety:

Zmniejszenie liczby zapytań HTTP. Zamiast ładować wiele małych obrazów, ładuje się jeden duży.
Przyspieszenie ładowania strony. Mniej zapytań do serwera, szybsze renderowanie.
Oszczędność transferu. Całkowity rozmiar pliku jest często mniejszy niż suma poszczególnych obrazów.

Implementacja:

Tworzenie sprite'a: Łączenie obrazów w jeden za pomocą edytorów graficznych lub specjalnych narzędzi online/kompilatorów (np. Webpack z wtyczką css-spritesmith-plugin).

CSS: Dla elementów korzystających z obrazów ze sprite'a stosuje się następujące style:

.icon {
  background-image: url('path/to/sprite.png'); /* Ścieżka do pliku sprite */
  background-repeat: no-repeat; /* Obraz się nie powtarza */
  display: block; /* lub inline-block, w zależności od elementu */
  width: 32px; /* Szerokość potrzebnej ikony */
  height: 32px; /* Wysokość potrzebnej ikony */
}

.icon-home {
  background-position: 0 0; /* Pozycja potrzebnego fragmentu ikony "Dom" */
}

.icon-settings {
  background-position: -32px 0; /* Pozycja potrzebnego fragmentu ikony "Ustawienia" */
}

W podanym kodzie CSS .icon ustawia ogólne właściwości dla wszystkich elementów korzystających ze sprite'a. Klasy takie jak .icon-home i .icon-settings określają konkretną pozycję potrzebnego obrazu w sprite za pomocą background-position.

Jak na stronie lub stronie internetowej realizuje się CSS-spirale?