CSS Sprite Tekniği Nedir? Bu teknik nasıl uygulanır? Oval köşeler nasıl yapılır?

2 Şubat 2015 - 29 Okunma
CSS Sprite Tekniği Nedir? Bu teknik nasıl uygulanır? Oval köşeler nasıl yapılır?
CSS üzerine araştırma yaparken böyle bir tekniğin varlığını keşfettim. Konuyu baştan sonra yazmaktansa, konuyla ilgili bir kaç şey verdikten sonra, konuyu en güzel anlatanların linklerini vermenin daha akıllıca olduğunu düşündüm. Sprite, bir imaj dosyasıdır. Bu imaj dosyasını diğerlerinden ayıran farksa bir çok imajı tek dosya içinde bulundurması ve koordinatlar vererek her resmi sitenin istediğimiz yerine […]

CSS üzerine araştırma yaparken böyle bir tekniğin varlığını keşfettim. Konuyu baştan sonra yazmaktansa, konuyla ilgili bir kaç şey verdikten sonra, konuyu en güzel anlatanların linklerini vermenin daha akıllıca olduğunu düşündüm.

Sprite, bir imaj dosyasıdır. Bu imaj dosyasını diğerlerinden ayıran farksa bir çok imajı tek dosya içinde bulundurması ve koordinatlar vererek her resmi sitenin istediğimiz yerine tek tek çağırabilmemizdir.

Böylece HTTP çağrıları azalacağından ve tüm resimler tek imaj dosyasında olduğundan sıkıştırma daha iyi olacak, böylece imaj dosyasının boyutu düşmüş olacaktır.

Nasıl bir Performans Kazancı sağlanacak?

Deminde bahsettiğim gibi tek tek kaydedilen her imaj büyük ve tek bir dosyadakine oranla daha fazla boyut anlamına gelmektedir. Bu teknik ile sunucudan sadece bir imaj dosyası çekilir ve sitenin her yerine dediğim koordinat sistemi çerçevesinde görseller yüklenir. Sunucudan bir imaj dosyası çektiğimiz içinse HTTP çağrısı minimuma iner ve sayfa ziyaretçiye daha çabuk ulaşır.

CSS Sprite Tekniği Nasıl Uygulanır?

Bu tekniğin nasıl uygulandığı konusunu ben anlatmayacağım, online olarak bu işlemi yapan SpriteCow sitesi oldukça güzel bir uygulama yapmış.

İlk önce sitenizde kullanacağız bütün grafikleri Photoshop benzeri bir program ile birleştirin. (Arka alanı saydam bir PNG olarak saklayın) Daha sonra http://www.spritecow.com/ adresine girin ve Open Image a tıklayın. Dosyanızı yükleyin, dosya ekrana yüklendikten sonra Select Sprite aracı yardımıyla bir görseli seçin. Siz görseli seçtiğinizde aşağıda o görseli CSS dosyanızda kullanmak için gerekli kodlar çıkacak.

css-sprite-teknigi-kullanimi-nedir

Bu şekilde sprite dosyanızı kolayca kullanabilirsiniz.

ITC | İlkteknoloji