Kas yra CSS sprite'ai?

CSS-sprite — tai optimizacijos technika, kurioje keli maži vaizdai sujungiami į vieną didelį vaizdą. Tada naudojant CSS savybes background-image ir background-position, rodomas tik reikalingas šio didelio vaizdo dalis.

CSS sprite naudojimo privalumai:

• HTTP užklausų skaičiaus sumažinimas: Vietoj kiekvieno vaizdo atskirai įkėlimo, naršyklė siunčia tik vieną užklausą įkelti sprite. Tai žymiai pagreitina puslapio įkėlimo laiką.
• Talpykla: Naršyklė talpina sprite ir vėlesniuose užklausose nereikia jo vėl įkelti.
• Rendavimo pagreitis: Kadangi visi vaizdai jau įkelti viename faile, naršyklei juos rodyti lengviau.

Pavyzdys naudojimui:

/* CSS elementui, naudojančiam sprite */
.icon {
  background-image: url('sprites.png'); /* Jūsų sprite kelias */
  width: 32px; /* Rodo dalies plotį */
  height: 32px; /* Rodo dalies aukštį */
}

/* Konkretaus vaizdo pozicionavimas sprite */
.icon-home {
  background-position: 0 0; /* "home" vaizdo viršutinio kairio kampo koordinatės */
}

.icon-settings {
  background-position: -32px 0; /* "settings" vaizdo viršutinio kairio kampo koordinatės */
}

Sprite struktūros pavyzdys (vaizdas sprites.png):

Vaizdas	Pozicija
icon-home	0 0
icon-settings	-32px 0

Trūkumai:

• Sudėtingumas palaikyti: Pakeitus vieną vaizdą, reikia perkurti visą sprite ir atnaujinti CSS.
• Prieinamumas: Netinkamas naudojimas gali neigiamai paveikti prieinamumą vartotojams su ribotomis galimybėmis (pavyzdžiui, jei ikonėlės yra vienintelis būdas perduoti informaciją).
• Failo dydis: Jei sprite įtraukiama daug vaizdų, bendras failo dydis gali išaugti.

Nepaisant kai kurių trūkumų, CSS sprite vis dar yra efektyvus optimizavimo metodas tam tikrose situacijose, ypač ikonoms ir mažiems grafiniams elementams. Pastaruoju metu alternatyva tapo SVG sprite ir ikonos šriftai.