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 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.

DAHA FAZLA İÇERİK

C# (Sharp) Nedir? C# (Sharp) Nedir?

7 Aralık 2015, Pazartesi

Open DNS ile engelleri kaldırın Open DNS ile engelleri kaldırın

1 Aralık 2014, Pazartesi

HTML 5 contentEditable Kullanımı HTML 5 contentEditable Kullanımı

23 Aralık 2015, Çarşamba

SİZDE YORUM YAPIN

Facebook Gruba Toplu Arkadaş Ekleme

Facebook Gruba Toplu Arkadaş Ekleme 20 Şubat 2016, Cumartesi

Bilgisayarda DNS Ayarları

Bilgisayarda DNS Ayarları 24 Aralık 2015, Perşembe

Google’dan da büyüğü var

Google’dan da büyüğü var 11 Ağustos 2015, Salı

the Dress ve Sırrı

the Dress ve Sırrı 27 Şubat 2015, Cuma