Ako sa na stránke alebo webe implementujú CSS…

CSS sprite-ovi su tehnika za kombinovanje više слика у једну велику слику. Ово се реализује помоћу CSS-а, контролишући видљивост потребног фрагмента велике слике преко својстава background-image, background-position и background-repeat.

Предности:

Смањење броја HTTP захтева. Уместо да се учита више малих слика, учитава се једна велика.
Убрзање учитавања странице. Мање захтева ка серверу, брже рендеровање.
Уштеда у саобраћају. Укупна величина фајла је често мања од збирa појединачних слика.

Имплементација:

Креирање sprite-а: Спајање слика помоћу графичких уређивача или специјалних онлајн алата/компилатора (нпр. Webpack са плагином css-spritesmith-plugin).

CSS: За елементе који користе слике из sprite-а, примењују се следећи стилови:

.icon {
  background-image: url('path/to/sprite.png'); /* Путања до фајла sprite */
  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 дефинише опште особине за све елементе који користе sprite. Класe као што су .icon-home и .icon-settings одређују конкретну позицију потребне слике унутар sprite-а помоћу background-position.

Ako sa na stránke alebo webe implementujú CSS sprite-ové?