İnternet standartlarının ve css’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen konusunda birçok avantaj sağlamaktadır.

CSS Sprite Nedir?

CSS Sprite, web sitenizde kullandığınız küçük çaplı görselleri ve ikonları parça parça çağırmak yerine bütün görsellerin bir arada bulunduğu tek bir görsel üzerinden koordinat belirleyerek çağırmamıza yarayan, sitenin yüklenme hızını olumlu anlamda etkileyen bir sistemdir.

CSS Sprite Tekniğinin Avantajları

CSS Sprite tekniği kullanılarak hazırlanan bir web sayfası, bu tekniği kullanmayan aynı web sayfasından daha hızlı yüklenecektir. Çünkü sitede 10 görsel varsa, bu da her biri için sunucuya gönderilecek 10 request demektir. CSS Sprite ile 10 görseli tek bir görsel haline getirirseniz, bu da tek bir request demek olacaktır ki, sayfanızın hızlı yüklenmesini sağlayacaktır.

CSS Sprite Oluşturma

CSS Sprite oluşturmak için iki yol var. Bunlardan biri her bir görseli photoshop gibi bir programla birleştirmek ve yanyana ya da altalta dizdiğiniz bu görsellerin piksel bazında koordinatlarını hesaplamaktır. Tahmin edeceğiniz gibi bu biraz zahmetlidi ve hata şansınız vardır.

Diğer yol ise bu işlem için bir aracı kullanmak. Görsellerin herbirini ayrı ayrı imaj haline getirip, bunları zip formatında sıkıştırarak, CSS Sprite Generator‘a (CSS Tümleşik Resim Üreteci) yükleyelim. Bu servis görselleri tek bir imaj haline getirecek ve görsellerin css kodlarında kullanmak üzere koordinatlarını bize verecektir.

Bu adres ise HTML5 tekniğini kullanan başka bir oluşturucudur. Bilgisayarınızdaki resim dosyalarını sürükle bırak yöntemi ile buraya atabilir, Generate butonuna tıklayarak sağındaki Sprite ile kombine edilmiş tek bir resim dosyasını, Stylesheet ile kullanabileceğiniz css dosyasını görüntüleyebilirsiniz.

CSS Sprite Kullanımı

Yukarıdaki site bize gerekli kodları verecektir ama yine de anlatmakta fayda var. CSS Sprite tekniği ile kodlama yapmak için css’in background özelliği kullanılır.

Örneğin; almak istediğimiz görsel, bütün görselin yukarıdan 10 piksel aşağısında ve soldan 20 piksel solundaysa, css aşağıdaki şekilde kullanılır.

span #sprite {  background-image: url(gorsel.png);  background-position: -10px -20px;}

CSS Sprite Tekniği Örneği

Büyük sitelerin çoğu css sprite tekniğini kullanmaktalar. Google bunlardan sadece biri