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

CSS sprite-ները օպտիմալացման մեթոդ են, որը թույլ է տալիս միացնել մի քանի պատկերներ մեկ մեծ պատկերում: Փոխարենը, որ յուրաքանչյուր պատկեր բեռնվի առանձին, բրաուզերը բեռնում է մեկ մեծ ֆայլ և օգտագործում է CSS հատկությունները background-image, background-position և width/height, որպեսզի ցուցադրի այդ պատկերից անհրաժեշտ մասը:

CSS sprite-ների օգտագործման առավելությունները՝

• HTTP հարցումների քանակի նվազեցում: Մի ֆայլ բեռնելը շատերի փոխարեն նվազեցնում է սերվերի բեռը և արագացնում էջի ռենդերը:
• Քեշավորում: Մեծ պատկերն պահվում է բրաուզերի քեշում, ինչը բարելավում է կատարողականությունը կրկնվող այցերի ժամանակ:
• Ֆայլի չափի նվազեցում: Որոշ դեպքերում պատկերների միավորումը կարող է փոքր-ինչ նվազեցնել ընդհանուր ֆայլերի չափը՝ շնորհիվ սեղմման օպտիմալացման:

Օրինակ օգտագործման համար (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Օրինակ օգտագործման համար (CSS):

.icon {
  width: 32px; /* Ակնոցի լայնությունը */
  height: 32px; /* Ակնոցի բարձրությունը */
  background-image: url('sprites.png'); /* Sprite ֆայլի ուղին */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home"-ի դիրքը sprite-ում */
}

.icon.settings {
  background-position: -32px 0; /* "settings"-ի դիրքը sprite-ում */
}

Այս օրինակով, sprites.png ֆայլը պարունակում է "home" և "settings"-ի պատկերները: background-position հատկությունը սահմանում է տեղափոխումը, որպեսզի ցուցադրվի ցանկալի պատկերը: