Какво представляват CSS спрайтовете?

CSS спрайтовете са метод за оптимизация, който позволява да се обединят няколко изображения в едно голямо изображение. Вместо да зареждате всяко изображение отделно, браузърът зарежда един голям файл и след това използва CSS свойствата background-image, background-position и width/height, за да показва необходимата част от това изображение.

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

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

Пример за използване (HTML):

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

Пример за използване (CSS):

.icon {
  width: 32px; /* Ширина на иконата */
  height: 32px; /* Височина на иконата */
  background-image: url('sprites.png'); /* Път към файла със спрайтовете */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Позиция на иконата "home" в спрайта */
}

.icon.settings {
  background-position: -32px 0; /* Позиция на иконата "settings" в спрайта */
}

В този пример, sprites.png е файлът, съдържащ иконите "home" и "settings". Свойството background-position задава изместването, за да се покаже желаната икона.