Ի՞նչ են CSS sprite-ները։

CSS-спрайտները — դա վեբ էջերի օպտիմալացման տեխնիկա է, որի ժամանակ մի քանի փոքր պատկերներ միավորվում են մեկ մեծ պատկերում: Այնուհետև, օգտագործելով CSS background-image և background-position հատկությունները, ցուցադրվում է միայն այդ մեծ պատկերից անհրաժեշտ մասը:

CSS-спрайտների օգտագործման առավելությունները՝

• HTTP հարցումների քանակի նվազեցում: Փոխարենը յուրաքանչյուր պատկեր բեռնելուն, բրաուզերը միայն մեկ հարցում է կատարում սպրայթը բեռնելու համար: Սա զգալիորեն արագացնում է էջի բեռնման ժամանակը:
• Կեշավորում: Բրաուզերը կեշավորում է սպրայթը, և հաջորդ հարցումների ժամանակ կրկնակի բեռնում չի պահանջվում:
• Արագացում ռենդերինգի: Քանի որ բոլոր պատկերները արդեն բեռնված են մեկ ֆայլում, բրաուզերը հեշտությամբ է ցուցադրում:

Օգտագործման օրինակ՝

/* CSS սպրայթ օգտագործող տարրերի համար */
.icon {
  background-image: url('sprites.png'); /* Ձեր սպրայթի ուղին */
  width: 32px; /* Ցուցադրվող մասի լայնությունը */
  height: 32px; /* Ցուցադրվող մասի բարձրությունը */
}

/* կոնկրետ պատկեր սպրայթում տեղադրելու համար */
.icon-home {
  background-position: 0 0; /* "home" պատկերակի վերևի ձախ անկյունի կոորդինատներ */
}

.icon-settings {
  background-position: -32px 0; /* "settings" պատկերակի վերևի ձախ անկյունի կոորդինատներ */
}

Սպրայթի կառուցվածքի օրինակ (նկարը sprites.png):

Պատկեր	Կոորդինատներ
icon-home	0 0
icon-settings	-32px 0

Անբավարարությունները՝

• Աջակցման բարդություն: Մի պատկեր փոխելու համար անհրաժեշտ է ամբողջ սպրայթը վերականգնել և CSS-ը թարմացնել:
• Հասանելիություն: Սխալ օգտագործումը կարող է բացասաբար ազդել հասանելիության վրա՝ օգտվողների սահմանափակ հնարավորություններով (օրինակ, եթե պատկերները միակ միջոցն են տեղեկատվությունը փոխանցելու համար):
• Ֆայլի չափը: Եթե սպրայթում շատ պատկերներ են, ընդհանուր ֆայլի չափը կարող է մեծանալ:

Չնայած որոշ թերություններին, CSS-спрайտները մնում են արդյունավետ օպտիմալացման մեթոդ որոշ իրավիճակներում, հատկապես իկոնների և փոքր գրաֆիկական տարրերի համար: Վերջին ժամանակներում որպես այլընտրանք օգտագործվում են SVG-спрайտները և իկոնային ֆոնտերը։