Css sprite'ları gibi ilginç bir araca daha yakından bakalım. Birçok deneyimli düzen tasarımcısı ve web yöneticisi bu basit tekniğin avantajlarının farkındadır. Sprite kullanmanın olumlu tarafı, tek tek görsellerin sayısı azaltılarak sayfa yükleme süresinin önemli ölçüde azalmasıdır. Modern düzen standartlarında, küçük simgeleri ve tema görsellerini özel bir görsel koleksiyonu halinde gruplandırmak gelenekseldir. Basitçe söylemek gerekirse, hareketli resim, bir temanın bir dizi küçük resmini içeren bir resimdir.

Bu şekilde küçük resimleri grupladığımızda sunucuya gelen isteklerin sayısını azaltıyoruz. Sayfamız 30 küçük resim yerine yalnızca bir resim yüklüyor. Bu, yükleme hızında önemli bir artış sağlar.

Özetle: CSS Sprite'ları, performansı önemli ölçüde artırmak amacıyla bir web sitesinde kullanılmak üzere birden fazla resmi tek bir dosyada birleştiren bir araçtır. Sprite kavramı, küçük resimlerle çalışmak yerine büyük bir resim oluşturduğunuzu düşünürsek biraz yanıltıcı görünebilir.

Özetlemek gerekirse: "Sprite" terimi, video oyunlarında en sık kullanılan bilgisayar grafiği tekniğinden gelir. Buradaki fikir, bir görüntüyü hafızada saklamak ve ardından o görüntünün yalnızca bir kısmını görüntülemekti; bu, yeni görüntüler getirmekten daha hızlıydı.

CSS Sprite'lar hemen hemen aynı teoridir: resmi bir kez alın, arka planı taşıyın ve yalnızca bir kısmını görüntüleyin. Bu, birden fazla görsel alınırken ek yükü azaltır.

İnternette sprite oluşturmaya yönelik çok sayıda hizmet var. Bir arama motoruna uygun sorguyu yazmanız yeterlidir. Arama yapamayacak kadar tembelseniz, işte bu konuyla ilgili bazı popüler kaynaklar. toptal sprite oluşturucu, inettools sprite oluşturucu. Diyelim ki şablonunuzu kestiniz, tüm küçük simgeleri seçtiniz, ondan bir hareketli grafik oluşturdunuz, sırada ne var?

Bir hareketli grafikteki simgeler nasıl kullanılır?

Şimdi bir hareketli resimle çalışma prosedürüne bakalım.

• Genel bir sınıf oluşturalım, örneğin buna .sprite adını verelim; bunun arka planı sprite.png oluşturucusu kullanılarak oluşturulmuş bu görüntüdür. Aynı sınıfa, aynı boyutta olmaları durumunda hareketli ikonların yüksekliği ve genişliği olacak olan yüksekliği ve genişliği ayarlayacağız.
• Bu simgeyi kullanmanız gereken bloklar için, background-position css özelliğini kullanarak arka plan uzaklığını istediğiniz miktara ayarlayın. Arka planlar hakkında daha fazla bilgiyi önceki makalede bulabilirsiniz.

Örnek:

.sprite {
 genişlik: 30px;
 yükseklik: 30px;
 arka plan: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 background-position: 0 -80px;
}

İyi çalışmalar