Resimlerde Sprite Yöntemi

Css Sprite Tekniği

Bu yazımızda sizlerle CSS Sprite tekniğinden bahsedeceğiz. Türkçe ve yabancı kaynaklardan bahsedeceğiz.

CSS Sprite kullanımı itibariyle bir “image replacement” (resimlerde yer değiştirme) tekniğidir. CSS Spriteçok yeni bir teknik olmamasının yanında uzun süredir büyük siteler tarafından düzenli bir biçimde kullanılmaktadır. CSS Sprite tekniği kendi içinde birden fazla resmi barındıran “tek” bir resim arkaplan durumlarının değiştirilmesi sonucu gösterilme mantığını ifade etmektedir. Bu yazdıklarımızı uygulamalı bir şeklide gördüğünüz zaman ne anlatmak istediğimizi daha net anlayacaksınız.

CSS Sprite tekniği pek çok yönden hem ziyaretçileri hem de site sahiplerini mutlu eder. Sebebi ise birçok resim, bağlantı ve resim öğesinin kullanılmış olduğu bir sayfada bu resimlerin her bir tanesi için sunucunuza bir istek gönderilmektedir. Sizinde bildiğiniz gibi HTTP request’lerin çok olması sunucuya olan yükü arttırmakta ve sitenin açılış hızını olumsuz yönde etkilemektedir. CSS Sprite bu yönde kullanılan bir tek resim dosyanı sebebiyle birçok bağlantı isteğine gerek duymadan görevini yerine getirmektedir. Bunun yanında sitenizi ziyaret eden insanlarda kullanmış olduğunuz resim bağlantılarında (kısa süreliğine de olsa) yeni resim yüklenmesini beklemeyecektir.

Yazımızın başında da belirttiğimiz gibi CSS Sprite tekniğini pek çok büyük site kullanmaya devam etmektedir. Youtube, Google, Amazon, Yahoo, Digg gibi siteler bu büyük sitelerin başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha kapsamlı anlayabilmek için örneklere göz atalım. CSS Sprite tekniği kullanarak yapılan bir örnek de iki farklı resmi sadece bir dosyada birleştirelim. Sonra resmin en ve boy genişliklerini de ayarladıktan sonra iki resmi tek resim dosyasında toplayalım.

Oluşturmuş olduğumuz örnekte basit bir şekilde bir informaion ikonu ve hakkımda yazısı bulunmakta. Resmin alt kısmında ise bu resim hover etiketi ile etiketlendiği zaman görünecek şekle bürünür. Aslına bakacak olursanız iki aynı boyutta resim ve tek bir resim dosyasının içinde birleştirilmiş durumdadır. Tekil olarak 200px*50px olan resim her iki resmin alt alta gelmesiyle 200px*100px bir boyut kazanmaktadır. Bu tekniği uyguladığımız zaman resmin ilk bölümünde görmüş olacağız. Resim ile fare resim bağlantımızın üstüne geldiğinde ise resmin hover ile görünmesini istediğimiz diğer bölümü görünmeye başlayacak. Tam bu noktada ise CSS’nin nimetlerinden faydalanarak “background-position” (arkaplan resim pozisyonu) parametresi ile beraber hover anında meydana gelecek ve görüntüyü elde etmiş olacağız.

Şimdi ise kullanmış olduğumuz Xhtml ve CSS kodunu biraz daha detaylandırarak uygulamamız ile ilgili bilgiler vermeye devam edelim. CSS kodunun başında gördüğünüz gibi isimli bir ID meydana geldi. Bu alanın içine 200PX genişlik verdik. Sonrasında ise aynı şekilde #alan içinde li ve ul etiketlerini birbirlerinden ayrı tanımladık. Tam bu noktada eğer sizde dikkat ettiyseniz alan isimli olan div’in li etiketini tanımlama yaparken text-indent:9999px; gibi bir değer kullanıldı. Bu değer Xhtml kodu içinde bağlantımıza yer verilmiş olunan metin linkinin tarayıcıda görünmemesi için gerekli bir işlemdi. Aynı şekilde li içinde float:left özelliğini kullanarak resimlerin sola doğru yassı bir biçimde olmasını sağlayabiliriz.

Şu an ise belki de işin en önemli olan bölümüne geldik. Artık #alan içine bir “a” etiketi tanımlaması yapacağız. Bu kısımda hazırlamış olduğumuz resmi görüntüleyeceğiz. Örnek kodları incelediğiniz takdirde hakkında.gif isimli resmi arkaplan resmi olarak görüntülemeyi başardık. Resmin kendi içinde tekrarlanmamasını istedik ve pozisyon itibari ile de 0px 0px değerlerinden faydalandık. Resmin enini ve boyunu piksel olarak yazdık. Sizde dikkat ettiniz mi bilmiyoruz ama hakkında.gif resmi 200px*100px boyutlarında olmasına rağmen resmi en boy biçiminde 200px*50px tanımlamayı başardık. Bu şekilde resmin görünebilir bölgelerini çok az daha daraltmış olduk. Tanımlamış olduğumuz “a” etiketinin a:hover alanında ise arkaplan değerlerinde bazı değişiklikler yaptık. İlk olarak 0px 0px olarak verilmiş olan arkaplan pozisyon değerini bu defa 0px -50px şeklinde değiştirdik. Bu şekilde hakkinda.gif isimli resmin belirtilmiş olan pozisyonlardaki görüntüsü alınabilecekti.

Yukarıdaki basit örnekte de gördüğünüz gibi aslına bakacak olursanız Css sprite tekniğinde önemli olan şey kullanmış olduğumuz resmi çok iyi ayarlamak ve arkaplan pozisyonlama tekniklerini iyi bir şekilde bilmek. Örnekte resim tekniğini dikey yani vertical biçimde kullanmıştık. Bu nedenden dolayı arkaplan pozisyonlamamızı yapma işleminde buna göre bri CSS değeri kullandık.

Aslında kodları incelediğimiz zaman ilk örnekten farklı olmadığını görüyoruz. Bu noktada değişiklik olarak şunları yapmaya çalıştık. İlk olarak örnek2 isimli div alanı oluşturduk. Yine aynı şekilde bu bölüme ait olan birer li ve ul tanımladık. Daha sonra ise ilk örnekten biraz farklı olarak her bir “a” etiketinin içine id ataması yaptık. #ornek2 a#anasayfa olarak belirlemiş olduğumuz bölüme ise arkaplan resmini atadık. Pozisyon itibari ile sol üst bölgeden 0px uzaklıkta yer almasını ve en üst kısma dayalı durmasını sağladık. Bu işlemden sonra #ornek2 a#anasayfa:hover verme işlemi yaparak tanımladık. Aynı olan CSS kodu üzerinde üzerinde a#hakkinda id’sinde de buna benzer bir tanımlama oluşturduk.

CSS SPRITE’ Tekniği ile Sayfa İçerisinde Resim Nasıl Kullanılır?

Sizin için araştırıp yazmış olduğumuz bu yazı hem herkesi anlayacağı şekilde oldukça mantıklı ve SEO bakımından da oldukça önemli.

Resim Sayısı Toplamı

Web sayfalarımızda yer alan resim sayıları artamaya devam ettikçe, sayfanın toplam boyutu da aynı şekilde artmaya devam etmekte ve sayfada yer alan sorgulama sayısı da artarak, sayfa hızını direk olarak etkilemektedir. Bu SEO açısından oldukça zararlı bir durumdur. Sayfada kullanılmış olan resim sayısının azaltılması gerekir ve kullanılması gereken resmileri boyutları mutlaka sıkıştırılması ve küçültülmelidir. Resim sayısını ve haliyle sorgulama sayını aşağılara çekmenin en ideal yolu, resmilerinizde CSS Sprite tekniğini kullanmanızdır.

CSS Sprite Tekniği ile Resimleri Tek Kaynak Üzerinde Kullanmak

trans.png: Saydam olan bir görsel png dosyasıdır. Bu resmi çağırdıktan sonra arkaplan olarak istediğimiz resmi göstermiş olacağız.

İlk olarak birleştirmiş olduğumuz resmi pikselleri ya da Fireworks ölçüm yapabileceğimiz bir editör ile açıyoruz. Sayfada göstermek istediğimiz resmin boyutlarını ölçmeye başlıyoruz. Bizim resim klasörümüz 16x14 piksellik bir resim olduğundan dolayı, CSS kodlarının içinde .file parametresinin genişliğine 16 yükseklik değerine ise 14 veriyoruz.

Sonrasında arkaplan resmi olarak images.png dosyasını çağırıyoruz. Bu aşamdan sonra yazmış olduğumuz iki rakama dikkat edelim. Bunlar, çağırmış olduğumuz bütünleşik görsel dosyanın hangi alanından itibaren kullanılacağını belirler. Resmin ilk bölümünde klasör resmi bulunduğu için .file parametresi içinde bu değerleri 0 0 yapıyoruz. Ancak eğer .calendar parametresine göz atacak olursanız, 0 -14px piksel değerlerini görmüş olursunuz. İlk sıfır soldan sağa olan girintiyi ifade eder. Herhangi bir girinti bulunmadığından dolayı “0” değerini verdik. -14px ise yukarıdan aşağıya doğru kaç piksel aşağıdan başlamamız gerektiğini ifade etmektedir. Başında eksi(-) işareti, görselin yukarı doğru çekilip ortadan başlanması gerektiğini ifade temek için kullanılır. Yani sıfır “0” ekseni işaretini koymadığınız takdirde, resim 14px aşağıya doğru itilmeye başlar ve 14 piksellik boşluktan sonra resim görülmeye başlar.