CSS Sprite nedir, Blogger ve Wordpress için nasıl uygulanır?

CSS Sprite nedir?

Son zamanlarda blog yazarlarının fenomen olma ya da daha fazla para kazanma hırsı uğruna Youtube fenomenliğine soyunmuş olduklarını görmek üzücü olsa da, hala bir ümit yazmaya devam eden siz değerli blog yazarlarına bugün pek yaygın olmayan bir CSS Sprite tekniğinden bahsedeceğim.

Ancak CSS Sprite nedir sorusuna değinmeden önce şunu bilmenizi isterim ki; hiçbir şey görüldüğü kadar zor değildir. Belki birçoğunuz başlığı okuduğu anda "ben SEO’dan anlamam, böyle şeylerle hiç uğraşamam" diye düşünüyor olabilirsiniz. Bu yüzden gerçekten bu konu hakkında hiçbir şey bilmediğinizi varsayarak, temel seviyede detaylı bir şekilde CSS Sprite tekniğini ve mantığını anlatmaya çalışacağım.

Önereceğim taktik ile hem sitenize SEO açısında artı bir puan sağlamış olacak, hem de sitenizin kesinlikle daha hızlı yüklenmesini sağlayacaksınız.

Blogger ya da Wordpress kullanıyor olmanız önemli değil! Hatta bir blog olması da önemli değil! Joomla, Asp, Php gibi yazılımlarda da CSS Sprite işlemini rahatlıkla uygulayabilirsiniz.

Daha önce bir yerlerde duymuş ya da az da olsa bu konuda bilgiler edinmiş olabilirsiniz. Ancak temel seviyede CSS Sprite nedir, nasıl uygulanır, faydaları nelerdir öncelikle biraz bunlardan bahsedelim.

CSS Sprite tekniği nedir?

Sitenizin yüklenmesi sırında fotoğrafların tek bir kaynaktan çağrılmasını sağlayarak, sayfa açılış hızını arttırmaktır. Kafanızda tam olarak bir şeyler canlanmış olabilir ama sizlere daha iyi anlamanız için bir örnek vereyim.

Web siteniz/bloğunuzun Google Maps üzerinde bir yerde tıpkı bir ev gibi işaretli olduğunu düşünün. Beni de evinize ziyarete gelen bir misafir olarak kabul edin. Eve misafir geldiği zaman şöyle ufaktan da olsa sağa sola çeki düzen veririz değil mi? Misafirimizin karnı açsa yemek yapar ya da olmadı bir çay koyarız. Ben geldim ve oturma odanızda TV seyrediyorum. Siz bir şeyler hazırlamak için mutfağa gittiniz. Aklınızda bir menü var ama ihtiyacınız olan sebzeler olmadığı için pazara gitmeniz gerekiyor. Bu sırada ben hala bekliyorum.

Koşa koşa pazara gittiniz ve sadece tek bir şey alıp eve döndünüz. Bu gidip gelme süreniz size 5 dk zaman kaybettirdi diyelim. Ama alacaklarınız daha bitmedi. Bu yüzden tekrar pazara gittiniz ve bir poşet daha bir şeyler alıp tekrar geldiniz. Bu durumda 10 dk zaman kaybetmiş ve beni bekletmiş oldunuz. Bunu böyle birkaç kez daha tekrar ettiğinizi düşünün. Doğal olarak ben bunun yemek falan yapacağı yok diyerek kalkıp gidiyorum.

İşte bu teknik tam olarak şudur: Madem alacağım çok şey var ve onları aynı pazardan alacağım, kendime bir pazar arabası alayım da bütün alacaklarımı içine koyup tek seferde gidip geleyim. Böylelikle sadece 5 dk da bütün alacaklarımı almış olurum.

CSS Sprite tekniğini web için düşünürsek;

Şimdi bu örneği asıl uygulamamız gereken blog sayfamız için düşünelim.

Blogunuzda küçük resimler ve ikonların her biri farklı URL adreslerine sahiptir. Dolayısıyla sayfa açılışı sırasında her birinin yüklenmesi için ayrı bir zaman harcanır. Biz bu küçük resimlerin tamamını pazar arabamıza doldurup tek seferde yüklenmesini sağlayacağız.

Daha iyi anlamanız için şöyle bir örnekle açıklayayım:

CSS Sprite görsel URL

Diyelim ki bogunuzda bu şekilde ayrı URL adreslerine sahip üç adet küçük resim bulunuyor. Site açılışı sırasında her resim birbirinden farklı olduğu için sayfanın yüklenmesi de buna bağlı olarak artıyor. Fakat biz CSS Sprite tekniği ile bu resimleri şöyle birleştireceğiz.

CSS Sprite görsel URL

Böylece bu üç resmin tek bir adresi olacak ve bu tek adres üzerinden hepsini aynı anda çağırmış olacağız. Ben örnek olarak bu oluşturmuş olduğum resimlerim için kucukresimler adını verdim ama siz istediniz bir ismi verebilirsiniz.

CSS Sprite tekniğini nasıl uygulayacağız?

İnanın hiç öyle sanıldığı kadar karmaşık ya da zor değil. Az da olsa blogger kullanırken kodlarla oynayarak bir şeyler öğrendiyseniz, emin olun bunu da kolaylıkla yaparsınız. Çünkü ben, kendi kendime öğrendim.

Öncelikle hangi resimleri birleştirmek istediğinize karar verin. Bu iş için gtmetrix.com gibi sitelerden faydalanabilirsiniz. Çünkü site analizi yaptığınız zaman sonuç ekranında hangi resimlerin sayfa açılışını geciktirdiğini ve optimize etmeniz gerektiğini açık açık söylüyor.

Örneğin şu anda wordpress altyapısına sahip kendi sitem olan ciplakyazar.com için gtmetrix.com sitesine girerek hemen bir analiz yapalım. Analiz sonuçlarına göre YSLOW sekmesinde bazı resim ve JS dosyaları için CDN kullanmam gerektiğini söylüyor. Şu anda sitemin CDN kullanımına çok fazla ihtiyacı olmadığını düşünüyorum. Ancak yine de birkaç resmi CSS Sprite ile birleştirip sayfa açılış hızına küçük de olsa bir katkı sağlayabilirim.

Blog sayfam için gtmetrix değeri şöyle:

Çıplak Yazar gtmetrix değeri

Aralarından küçük resimleri seçiyorum. (Küçük olması önemli) Çünkü bu işlemi büyük resimler için uygulamak yanlış bir seçimdir. Hatta kaş yapayım derken göz çıkarmaktır.

Gördüğünüz gibi kendime CSS Sprite tekniğini uygulamak üzere dört adet farklı resim seçiyorum.

1. Ciplak-logoalt.png
2. Sadri-alisik.jpg
3. Bumerang-tacli.jpg
4. Ciplakyazar-stickylogo.png

CSS Sprite ile resim birleştirme

Bu işlem için farklı birçok site mevcut ama benim kullandığım site https://www.toptal.com/developers/css/sprite-generator sitesidir. Ama siz alternatif olarak şu siteyi de kullanabilirsiniz: http://www.spritecow.com/ Adrese tıklıyorum ve karşıma iki pencere çıkıyor. Açılan sayfanın solundaki pencerede bulunan Choose File butonuna tıklıyor ve birleştirmek istediğim resimlerin hepsini seçiyorum. Resimleri birleştirdikten sonra ise karşıma şöyle bir pencere çıkıyor. Burası önemli!

CSS Sprite png

Öncelikle sağ taraftaki resminizi download diyerek masaüstüne indirin. Muhtemelen indirdiğiniz resmin adı css_sprites.png olarak inecektir. Siz bu adı blog adınıza uygun hatırlayabileceğiniz farklı bir isimle değiştirebilirsiniz. Kucuk-resimler.png gibi.

Daha sonra sol kısımda bulunan CSS kodlarını tek tek kopyalayıp yine masaüstünde açmış olduğunuz bir TXT dosyasının içine yapıştırın. Böylece CSS kodlarımızın son hali aşağıdaki gibi olmuş olacak. Ancak eğer benim gibi resmi kaydederken adını değiştirdiyseniz kucuk-resimler.png gibi. Aşağıdaki kırmızı olarak işaretlediğim alana da o ismi yazmalısınız. Ben kendi dosya adımı ciplak_bg olarak kaydettim.

CSS Sprite kod

Yukarıdaki resmi lütfen dikkatli bir şekilde inceleyin. Her resim için verilen background url kısmından sonraki pixel değerleri birbirinden farklıdır. Bu pixel değerlerini birleştirmiş olduğumuz resmin içindeki her resmin kendine özel koordinatları olarak düşünün.

Yani ciplakyazar_stickylogo resmimizi kullanmak istersek onun koordinatları -10px - 275px olarak verilmiş.

CSS Sprite png

CSS kodlarımız ve resmimiz hazır olduğuna göre artık blog sayfamıza yerleştirme işlemine geçebiliriz.

Wordpress kullanıcıları için anlatım:

Öncelikle admin panelinden ortam ekle diyerek birleştirme yaptığınız resmi kütüphaneye yükleyin. C panelde özel bir img klasörü yaratarak oraya da yükleyebilirsiniz. Ben kendi C panelimde temaimg adındaki klasörüme yükledim.

Yüklemiş olduğunuz resmin URL adresini kopyalayın. Benim şu anda kullandığım URL adresi şu şekilde: http://ciplakyazar.com/temaimg/ciplak_bg.png

Daha sonra masaüstündeki CSS kodlarınızın olduğu TXT dosyamı tekrar açın ve yukarıdaki resimde kırmızı çerçeve içinde belirtmiş olduğum css_sprites.png adreslerini /temaimg/ciplak_bg.png olarak hepsini değiştirip kaydedin. Burası önemli!

Eğer tek bir harf hatası bile yaparsanız resimlerin hiçbiri gözükmeyecektir.

CSS kodlarım artık tamamen hazır olduğuna göre sıra bu kodları temama tanıtmak. Ben özel tema kullandığım için admin panelinden özelleştir ve CSS ekle kısmına gelerek TXT dosyamın içine yapıştırmış olduğum bütün CSS kodlarını buraya ekliyor ve yayınla diyorum.

Hepsi bu kadar! Artık istediğiniz resmi bir satırlık kod ile çağırabiliriz.

Eklediğimiz alanda (örneğin wordpress bileşenlerinde özel html alanına) hangi resmi kullanmak istiyorsak o resmin CSS içindeki adını yazıyoruz.

<div class=' bg-sadri_alisik ></div>
<div class=' bg-bumerang_tacli ></div>

gibi..

Blogger kullanıcıları için anlatım:

Öncelikle birleştirdiğiniz resmin URL adresini almak için kullanmadığınız bir sayfaya yükleyin. Ardından sağ tık yaparak resmin url adresini kopyalayın. Muhtemelen uzun bir adres olacaktır. Dilerseniz bu uzun adresi Google short url kullanarak kısaltabilirsiniz.

Daha sonra tıpkı wordpresste uyguladığımız işlem gibi masaüstündeki CSS kodlarımızın olduğu TXT dosyamızı açıyoruz ve içinde background: url('css_sprites.png') koyu ile belirtmiş olduğum kısımların tümünü kısaltmış olduğunuz URL adresi ile değiştirin.

Tebrikler sona çok yaklaştınız!

Şimdi blogger admin panelinizden HTML düzenle kısmına gelerek

</head>

kodunu aratın ve hemen üzerine CSS kodlarınızı yapıştırın. Kodları, kod gibi değil de düz yazı gibi gösterecektir. Çünkü style açılış ve kapanış kodları eksik. Bu yüzden kodların en üstüne

<style>

en altına da

</style>

ekleyin ve kaydet butonuna tıklayın.

Şimdi widget ekle bölümüne gerek HTML bir widget ekleyin. Eklemiş olduğunuz widget için mesela sadece bumerang logosunu kullanmak istiyorsunuz.

<div class=' bg-bumerang_tacli ></div>

Ekleyerek kaydet demeniz yeterli olacaktır. Widget alanında sadece bumerang resmi gözükecektir.

Anlatım, kendi kaydetmiş olduğum resim isimlerine göre olduğundan, div class eklerken kendi resminizin adı neyse onu yazmalısınız.

Değerli yorumlarınızı eksik etmeyin lütfen.

Bu içerik Çıplak Yazar (Kişisel Blog ve Öyküler) adlı blogun yazarı Ayhan tarafından Blog Tecrübem için hazırlanmıştır.