CSS sprite nima?

CSS sprite'lari veb-sahifalarni optimallashtirish texnikasidir, bunda bir nechta kichik rasmlar bitta katta rasmga birlashtiriladi. Keyin, CSS background-image va background-position xususiyatlari yordamida, bu katta rasmning faqat kerakli qismi sahifada ko'rsatiladi.

CSS sprite'laridan foydalanishning afzalliklari:

• HTTP so'rovlar sonini kamaytirish: Har bir rasmni alohida yuklash o'rniga, brauzer faqat bitta so'rov bilan sprite'ni yuklaydi. Bu sahifa yuklanish vaqtini sezilarli darajada tezlashtiradi.
• Kesh: Brauzer sprite'ni keshga oladi va keyingi so'rovlar uchun bu sprite'dan rasm olish uchun yana yuklash shart emas.
• Render qilish tezligini oshirish: Barcha rasmlar allaqachon bitta faylda yuklanganligi uchun, brauzer ularni ko'rsatishda osonlik bilan ishlay oladi.

Foydalanish misoli:

/* Sprite'ni ishlatadigan element uchun CSS */
.icon {
  background-image: url('sprites.png'); /* Sprite'ga yo'l */
  width: 32px; /* Ko'rsatiladigan qismning kengligi */
  height: 32px; /* Ko'rsatiladigan qismning balandligi */
}

/* Sprite ichidagi ma'lum bir rasm uchun joylashish */
.icon-home {
  background-position: 0 0; /* "home" rasmining yuqori chap burchagining koordinatalari */
}

.icon-settings {
  background-position: -32px 0; /* "settings" rasmining yuqori chap burchagining koordinatalari */
}

Sprite tuzilishi (rasm sprites.png):

Rasm	Pozitsiya
icon-home	0 0
icon-settings	-32px 0

Kamchiliklar:

• Tuzatish qiyinligi: Bir rasmni sprite'da o'zgartirish uchun butun sprite'ni qayta yaratish va CSSni yangilash talab etiladi.
• Qulaylik: Noto'g'ri foydalanish, cheklovlarga ega foydalanuvchilar uchun kirishni qiyinlashtirishi mumkin (masalan, ikonlar ma'lumotlarni uzatishning yagona usuli bo'lsa).
• Fayl hajmi: Agar sprite ko'p rasmlarni o'z ichiga olsa, umumiy fayl hajmi katta bo'lishi mumkin.

Ba'zi kamchiliklarga qaramay, CSS sprite'lar ma'lum sharoitlarda, ayniqsa ikonlar va kichik grafik elementlar uchun samarali optimallashtirish usuli bo'lib qolmoqda. So'nggi paytlarda SVG sprite'lar va ikon shriftlar alternativ sifatida keng qo'llanilmoqda.