რა არის CSS sprite-ები?

CSS sprite-ები ოპტიმიზაციის მეთოდია, რომელიც საშუალებას აძლევს რამდენიმე სურათი ერთ დიდ სურათად გაერთიანდეს. ყოველ სურათს ცალკე ჩატვირთვის ნაცვლად, ბრაუზერი ერთ დიდ ფაილს იტვირთავს და შემდეგ CSS თვისებები background-image, background-position და width/height გამოყენებით აჩვენებს ამ სურათის საჭირო ნაწილს.

CSS sprite-ების გამოყენების უპირატესობები:

• HTTP მოთხოვნების რაოდენობის შემცირება: ერთ ფაილს იტვირთავს მრავალი ფაილის ნაცვლად, რაც ამცირებს სერვერის დატვირთვას და აჩქარებს გვერდის გაშლას.
• კეშირება: დიდი სურათი ინახება ბრაუზერის კეშში, რაც აძლიერებს შესრულებას განმეორებითი ვიზიტების დროს.
• ფაილის ზომის შემცირება: ზოგიერთ შემთხვევაში, სურათების გაერთიანება შეიძლება მცირე ოდნავ შეამციროს ფაილების საერთო ზომა ს Compression-ის ოპტიმიზაციის მეშვეობით.

გამოყენების მაგალითი (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 განსაზღვრავს გადატანას, რათა გამოჩნდეს საჭირო სიმბოლო.