Küçük resimler, dijital çağın yarattığı en saf kullanım özelliklerinden biridir. Özünde küçük resim bir önizleme, bağlantıyı tıklarsanız göreceğinize dair bir sözdür. Daha az veriye sahip küçük bir bakış, daha hızlı yükleme ve ekran mülkiyeti için tam boyutlu varlıktan daha az açgözlülük. Görüntüler için idealler, ama videoya ne dersiniz?
Düğme durumları için kullandığımız bir tekniği genişleterek, temel CSS ve biraz jQuery ile inanılmaz animasyonlu küçük resimler oluşturabiliriz.
Günümüzde, indirme hızları web geliştiricileri için böyle bir sorun değildir. Tabii ki, küçük dosya boyutları hala arzu edilir, ancak çoğu sitede gerçek performans, HTTP isteklerinin sayısıdır. Siteniz her zaman bir öğe yüklediğinde, tarayıcı gönderilen, işlenen ve daha sonra iade edilen bir HTTP isteği yapar. Konsolunuzu kontrol edin, sitenizdeki gecikmenin çoğunun görüntü boyutuyla ilgisi olmadığını görürsünüz, bir sunucu yanıtı beklemek için harcanır.
Çözelti CSS sprite tekniğidir; Birden fazla görüntüyü tek bir görüntü dosyasına dikmek ve daha sonra CSS kullanarak bu görüntünün farklı bölümlerini seçici olarak görüntülemek.
Geleneksel olarak, temel CSS stilleri ile oluşturamadığımız herhangi bir düğme için üç durum oluştururuz; bir kapalı , bir aşağı ve bir:
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Bu, sunucudan üç resmin indirilmesine ve üç HTTP isteği oluşturulmasına yol açar.
Bunu bir CSS sprite olarak yaptığımızda, her üç görüntüyü de tek bir dosyada saklıyoruz (böylece üç adet 200 piksel genişliğinde resim yerine 600 piksel genişliğinde bir resme sahip olmak yerine) ve CSS'nin arka plan konumu özelliğini kullanarak görüntünün konumunu değiştiriyoruz. :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Öğeyi, görüntüyü görüntülediğiniz bir pencere olarak düşünün. Görüntüyü hareket ettirebilirsiniz, ancak pencere aynı konumda kalır. Öğenin, görüntüyü göstermek istediğiniz görüntünün bölümüyle aynı boyutta olmasını sağlamanız şartıyla, kesintisizdir: