Domājams, daudzi būs dzirdējuši par CSS spraitiem, tomēr, domājams, ne visi zin, kas tas tāds ir un kā to izmantot. CSS spraiti ir vairāki atšķirīgi attēli, kuri apvienoti vienā kopīgā, veselā attēlā. Šis attēls tiek uzstādīts kā fons (background) div-blokam, vai jebkuram citam elementam, ar noteiktu augstumu un platumu. Ar parametra background-position palīdzību mēs pozicionējam mūsu attēlu tā, lai tas izskatītos kā viens konkrēts attēls. Uzskatāmības dēļ, lūk piemērs. Pieņemsim, ka mums ir attēls-saite un mums nepieciešams, lai uzvedot peles kursoru uz šīs bildes, tā mainītos. Bez problēmām.
  Un lūk kods tam, ko mēs paveicām :

HTML

<a href="http://dimonblog.ru” class=”sprite-demo"> </a>

CSS

1
2
3
4
5
6
7

a.sprite-demo {
 display:block;
 width:100px;

 height:30px;
 background:url(http://dimonblog.ru/wp-content/img/css-sprite.png) left top;

 }
a.sprite-demo:hover {background-position:left 30px;}

Zemāk redzams attēls-spraits, ar kura palīdzību mēs to paveicām. Pievērsiet uzmanību - tas ir tikai VIENS attēls.

Protams, mēs varētu sasniegt tādu pat efektu, izmantojot divus atšķirīgus attēlus. Bet, izmantojot CSS spraitus, mēs samazinām pieprasījumu skaitu no pārlūka web-serverim, tādējādi samazinot lapas ielādes laiku. Vienlaikus samazinās servera noslodze, kas ir nozīmīgi pie lielas web-lapas apmeklētības. Piedevām mēs novērsām aizturi pirms otrā attēla ielādes, jo pārlūkam vairs nav nepieciešams ielādēt otru attēlu pēc peles kursora uzvešanas uz saites - vienīgais attēls jau vienreiz ir ielādēts. Un pēdējais, izmantojot CSS spraitus, mēs samazinām kopējo grafikas failu apjomu. Piemēram, attēla izmērs, kurš tika izmantots - 2098 baiti. Ja izmantotu 2 atsevišķus attēlus, tad to abu kopīgais apjoms būtu 2410 baiti. Piedevām, ieteicams visu sīko mājaslapas grafiku (tajā skaitā noapaļotie stūrīši u.c.) veidot ar CSS spraitu palīdzību. Pie kam, pēc iespējas - visu vienā failā. Lūk, piemērs:

Kā likums, tāda attēla apjoms nav visai liels. Parasti tas sastāda vidēji 1.5 Кb. Turklāt tādu attēlu var iebūvēt pašā stila failā ar data:url palīdzību, pateicoties kam normālu pārlūku lietotājiem tiks attēlota visa sīkā grafika, arī noapaļotie stūrīši, pat ja grafikas ielāde būs atslēgta pārlūka uzstādījumos. Bet par cik IE neatbalsta data:url , speciāli tam var noteikt attēlu ielādi no servera. CSS spraitu nepilnība varētu būt tā, ka tos ir samērā neērti izmantot un priekšlaikus jāsagatavo speciāli attēli, kam tiek patērēts zināms laiks.