- engindeniz.net - http://www.engindeniz.net/v3.0 -

CSS ile Image Sprite Tekniği

Image Sprite, içinde birden fazla image bulunduran tek bir image dosyası için kullanılan terimdir.
Web sayfaları normalde birden fazla sayıda image’i sayfaya çağırırken her bir dosya için server’a birden fazla talep gönderir
sunucu talepleri teker teker alır, işler ve kullanıcının tarayıcısına gönderir.
Tüm bunlar çoğu zaman 1-2 saniyede tamamlansada aslında her talep server için bir yük oluşturur.
her bir image için harcanan bandwidth artar.
Eğer çok sayıda kullanıcınız varsa bu genel yavaşlama sorunlarına bile yol açar
elbette bu sorun için binlerce kullanıcı ve onlarca image söz konusu olmalı.
Bu yazıda, bu önemsiz gözüken ve göz arda edilen konu ile ilgili faydalı bir teknikten bahsedeceğim

2009’dan bugüne taslaklarda bekleyen bir yazım daha…
Evet evet biraz geç kalmışım :)
Temizliğim devam ediyor. Tüm taslak yazılarımı tamamlayıp yayınlayacağım
O zamanlar bir forumda bu tekniği anlatmıştım
taslaklarımdan kaldırıp kendi notlarımda da gözükmesi için yayınlamaya karar verdim.
belki birinin de işine yarar:)

CSS web sayfaları için çok önemli bir dildir.
Ne kadar iyi bir web programcısı olursanız olun yada ne kadar iyi bir fikriniz olursa olsun, ziyaretçilerin sayfanızda dolaşırken ilgilerini çekemedikten sonra içeriğiniz ziyan olmuş olur.
Kullanıcılar sayfada kalmaları ve uzun süre geçirmeleri için görsellik ve rahat kullanım çok önemlidir.

CSS tüm sayfaları kolayca tek bir yerden makyajlar ve rahat takip edilmesini sağlar.
Bu yazımızda CSS’in bir başka faydası – Image Sprite ‘ları işlememizi sağlayacak bir fonksiyonundan bahsedeceğim.

Bu fonksiyon ile tek bir resim dosyası içinde barınan birden çok resimleri CSS yardımı ile sanal olarak bölüp sayfamızda göstereceğiz.

Bu sayede;

unutmadan bu tekniği kullanan iki site söylemem , tekniğin işe yararlığının ve doğru mantık ürünü olduğunun ispatı olacaktır
www.google.com
ve
facebook.com

sanırım oldukça sağlam referanslar değilmi :)

Şimdi nasıl yapacağımıza gelelim

öncelikle şu link ile google’in kullandığı image dosyalarından bir tanesine bakalım
http://www.google.com.tr/images/nav_logo7.png [1]

görüldüğü gibi birden çok image , tek bir dosya altında toplanmış

bizde bu image üzerinde çalışacağız.
google’da aradığınızda birçok anlatım şekli var
ben kendime kolay olanı izah edeceğim. Siz istediğiniz şekilde geliştirebilirsiniz.

kullanacağımız temel CSS fonksiyonu
background-image ve background-position ‘dur

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; }

#menu {
width: 500px;
height: 500px;
}

#menu span {
    background-image:url('http://www.google.com.tr/images/nav_logo7.png');
    background-repeat:no-repeat;
    display: block;
}

#menu span.test1 {
background-position:-24px 0px;
height: 21px;
width: 21px;

}
#menu span.test2 {
background-position:0 -27px;
height: 37px;
width: 102px;
}

</style>
</head>

<body>

    <div id="menu">

    <span class="test1"></span>
    <span class="test2"></span>
    </div>

</body>
</html>

kodlarımız bunlar
öncelikle buradan [2] çalışan demo’suna bir bakalım

gördüğünüz gibi küçük G ve büyük G alt alta göründü
HTML kodlarına baktığımızda

önce #menu span içerisine background-image ile resim dosyasını arka plan olarak çağırdım.
bu resmin span içinde tekrarlanmaması için no-repeat yaptım. ve block özelliği verdim
sonrasında hangi kısımlarının gözükmesini istiyorsam o kadar daha span tanımladım
örnek olması için iki tane yeterli

(test1 ve test2 isimli spanlar)

ikisininde içinde
background-position ile resim üzerinde X ve Y kordinatlarını vererek gösterilecek kısmı seçtim
test1 küçük G harfi için -24px 0px
test2 büyük Google kelimes için 0 -27px
ilk rakam solda sağa pixel uzaklığını işaret eder
ikinci rakam ise yukarıdan aşağıya
yani yatay ve dikey.
sonrasındaki height ve width ise genişlik ve uzunluğu işaret eder
özetle yatay ve dikey noktayı işaretdikten sonraki genişlik ve uzunluk ile tam bir alan belirlenmiş oldum.

Bu rakamları değiştirerek istediğiniz kısımları rahatlıkla alabilirsiniz.

Hiç bir tool kullanmadan bunları belirlemek elbette zor olacaktır.
Dreamviwer gibi HTML editörler içinde emin değilim ama mutlaka böyle bir araç vardır diye düşünüyorum
belki firefox addonsları içindede olabilir.

benim kullandığım photoshop :)
oldukça pratik.

Herhangi bir resim düzenleme programı aracılığı ile çok sayıda resimlerinizi birbirine değmeyecek şekilde (her biri için bir çerçeve varmış gibi düşünüp) dip dibe kaydettikten sonra
toplu image dosyasını photoshop’a çağırıyoruz.
Slice Tool aracını kullanacağız
bu araçla istediğimiz kısımların çerçevelerini çizerek işaretliyoruz.
istediğimiz çerçeve üzerine gelip sağ click yaparak Edit Slice Options seçeneğine basıyoruz


açılan options pencerenin altında yükseklik-genişlik ve yatay-dikey değerler gözükecektir

(resmi büyütmek için tıklayın) [3]

yatay ve dikey değerler pozitif gözüksede bir yazarken negatif olarak belirteceğiz (yukarıdaki örnekte olduğu gibi)
sonrasında bu rakamları CSS’e kaydedip belirttiğim şekilde syafnızın istediğiniz kısmına ekleyin
hepsi budur.

Bu teknikte de dikkat edilmesi gereken bir-iki nokta var.

google ve facebook’u referans gösterdim ama dikkat ederseniz bu siteler küçük ikonlar için bu tekniği kullanmış.
yüksek boyutlu temel resimler göstermek için bu teknik kullanışsızdır
öncelikle SEO açısından haritalandırılırken sorun yaşanır.
çünkü her bir resim dosyası, SEO için “alt” ve “title” özellikleri doldurulmalıdır
bu teknik ile bu kısımlar pas geçilir.

bu nedenle küçük boyutlu sabit-her sayfada kullanılan fonksiyonel resimleriniz için bu teknik kullanılmalıdır.
Bu bir background pattern olabilir.
Yukarıdaki örnekte olduğu gibi ikon setleri yada bir logo olabilir.

umarım işinize yarar

sevgilerimle

Be Sociable, Share!
  • [4]
  • [5]
  • [6]
  • [7]