Как се реализират CSS спрайтовете на страница или…

CSS спрайтовете са техника за комбиниране на няколко изображения в едно голямо изображение. Реализира се чрез CSS, като управлението на видимостта на необходимия фрагмент от голямото изображение става чрез свойствата background-image, background-position и background-repeat.

Предимства:

Намаляване на броя HTTP заявки. Вместо да се зареждат множество малки изображения, се зарежда едно голямо.
Ускоряване на зареждането на страницата. По-малко заявки към сървъра, по-бързо рендиране.
Спестяване на трафик. Общият размер на файла често е по-малък от сумата на отделните изображения.

Реализация:

Създаване на спрайт: Обединяване на изображенията с помощта на графични редактори или специални онлайн инструменти/компилатори (например, Webpack с плъгина css-spritesmith-plugin).

CSS: За елементите, които използват изображения от спрайта, се прилагат следните стилове:

.icon {
  background-image: url('path/to/sprite.png'); /* Път към файла със спрайта */
  background-repeat: no-repeat; /* Изображението не се повтаря */
  display: block; /* или inline-block, в зависимост от елемента */
  width: 32px; /* Ширина на необходимата икона */
  height: 32px; /* Височина на необходимата икона */
}

.icon-home {
  background-position: 0 0; /* Позиция на необходимия фрагмент на иконата "Начало" */
}

.icon-settings {
  background-position: -32px 0; /* Позиция на необходимия фрагмент на иконата "Настройки" */
}

В предоставения CSS код .icon задава общите свойства за всички елементи, използващи спрайта. Класовете като .icon-home и .icon-settings определят конкретното положение на необходимото изображение в спрайта чрез background-position.

Как се реализират CSS спрайтовете на страница или сайт?