Ինչպես են իրականացվում CSS sprite-ները էջում կամ կայքում:

CSS sprite-ները մի տեխնիկա է, որը թույլ է տալիս միացնել մի քանի պատկերներ մեկ մեծ պատկերում: Այն իրականացվում է CSS-ի միջոցով, վերահսկելով մեծ պատկերից անհրաժեշտ հատվածի տեսանելիությունը background-image, background-position և background-repeat հատկությունների միջոցով:

Առավելություններ՝

• HTTP հարցումների քանակի նվազեցում։ Փոխարենը մի քանի փոքր պատկերների բեռնումը, բեռնվում է մեկ մեծ պատկեր:
• Էջի բեռնումը արագացնել։ Փոքր հարցումներ սերվերին, ավելի արագ ռենդեր:
• Տրաֆիկի խնայողություն։ Ֆայլի ընդհանուր չափը հաճախ փոքր է, քան առանձին պատկերների գումարը:

Իմպլեմենտացիա՝

1. Sprite ստեղծում։ Պատկերների միավորումը գրաֆիկական խմբագրիչների կամ հատուկ առցանց գործիքների/կոմպիլատորների միջոցով (օրինակ, Webpack-ով css-spritesmith-plugin պլագինով):

2. 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-ով աշխատող տարրերի համար: Որոշ դասեր, ինչպիսիք են .icon-home և .icon-settings, որոշում են անհրաժեշտ պատկերակի կոնկրետ դիրքը sprite-ի ներսում background-position-ի միջոցով։