Css Sprite Tekniği, Kullanımı, Örnek ve Faydalı Kaynaklar
Yeniden merhabalar. Bu gönderimizde sizlerle Css Sprite tekniğini konuşacak, hazırlamış olduğumuz örnekler ile konumuzu destekleyecek, Türkçe ve yabancı kaynakları paylaşaçağız. Dilerseniz hemen başlayalım.
Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite çok yeni bir teknik olmamakla birlikte uzun zamandır büyük siteler tarafından kullanılmaktadır. Css sprite tekniği özünde birden fazla resmi bünyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gösterilmesi mantığını taşımaktadır. Bu söylediğimi uygulamalı olarak gördüğünüzde ne demek istediğimi daha iyi anlayacaksınız.
Css sprite birçok yönden hem site sahiplerini hem de ziyaretçileri mutlu etmektedir. Çünkü birçok resim bağlantı ve resim ögenin kullanıldığı bir sitede bu resimlerin her biri için sunucumuza bir istek gitmektedir. Sizlerin de bildiği üzere Http request’lerin fazla olması sunucuya olan yükü fazlalaştırmakta ve site açılış hızını etkilemektedir. Css sprite bu yönden kullandığı tek bir resim dosyası nedeniyle birçok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretçiler de kullandığımız resim bağlantılarda (kısa bir süre de olsa) yeni resmin yüklenmesini beklemeyecektir.
Makalemizin başında söylediğimiz gibi Css sprite tekniğini birçok büyük site kullanmaktadır. Google, Youtube, Yahoo, Amazon, Digg gibi siteler bunların başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha iyi anlayabilmek için örneğimize geçelim.
