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

CSS спрайтовете се реализират чрез обединяване на няколко малки изображения в един голям файл (спрайт), а след това чрез CSS се показва необходимата част от този голям файл върху елементите на страницата.

Основни стъпки:

Създаване на спрайт: Всички изображения, които трябва да бъдат обединени (иконки, малки фонове и т.н.), се поставят в един файл. Това може да стане ръчно в графичен редактор или с помощта на автоматични инструменти/генератори за спрайтове.
Прилагане на CSS: За всеки елемент, в който трябва да се "вмъкне" изображение от спрайта, се задават следните CSS свойства:
- background-image: указва пътя към файла със спрайта.
- background-repeat: no-repeat;: деактивира повторението на изображението.
- background-position: определя координатите на горния лев ъгъл на частта от спрайта, която трябва да се покаже. Тези координати показват хоризонталното и вертикалното отместване от горния лев ъгъл на елемента.
- width и height: задават размерите на областта, в която ще се показва частта от спрайта. Тези размери обикновено съответстват на размера на оригиналната иконка или изображение.

Пример за използване за две иконки в спрайт:

/* Файл спрайт: icons.png */

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

/* Икона 1: намира се в спрайта на адрес 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Икона 2: намира се в спрайта на адрес -40px, 0 (например, ако между иконите има 8px отстъп) */
.icon-settings {
  background-position: -40px 0;
}

Предимства:

Намаляване на HTTP заявките: Вместо няколко заявки, браузърът трябва да зареди само един файл със спрайт, което съкращава времето за зареждане на страницата.
Кеширане: Зарежда се един голям файл, вместо множество малки.

Недостатъци:

Сложност при поддръжка: При добавяне/промяна на изображения, трябва да се създаде отново спрайтът и да се актуализират CSS координатите.
Не е подходящ за големи или много различни изображения.

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