Google Page Speed : "Combine images into CSS sprites"

Kategori : Demo, Css Yazar : alexander Tarih : 17 Nis 2011, Pa 15:25 Yorum yok

Görüntülenme : 1440

Daha önce buradaki yazımda sitemizin hız testini yapmamızı sağlayan Google Page Speed ' den bahsetmiştim. Sitemizde yer alan resimleri css sprite tekniği ile kullanmadığınız zaman Google Page Speed hız testinin sonucunda aşağıdaki uyarıyı alacaksınız :

Combine images into CSS sprites

Bu uyarıda bize resimlerimizi birleştirip css sprite tekniği ile kullanmamızı belirtiryor.

CSS Sprite Nedir ?

Css Sprite birden fazla resmi tek resimde birleştirip bu resimlerin yeni resim üzerindeki koordinatlarını belirterek gösterme tekniğidir. Burdaki Sprite resim dosyasıdır. Fakat bu resmimiz birden fazla resimi içermektedir. Kafanızda canlanmadıysa hemen örnek bir resim ile canlanmasına yardımcı olalım :)

YouTube sitesinde kullanılan resimler her biri ayrı bir resim gibi dursada aslında hepsi aşağıda gördüğünüz gibi tek resimde birleştirilmiş.

you tube css sprites

Yine Google ' da da aynı şekilde bir çok resim tek resimde birleştirilmiş.

Google css sprites

Neden Css Sprite Kullanmalıyım ?

Örneğin sayfamızda 10 adet resim kullanıyoruz. Sayfa yüklenirken bu 10 ader resim için 10 kez Http isteğinde bulunulacak ama biz bu resimleri tek resimde birleştirirsek istek sayısı 1'e düşecek ve sayfamız daha hızlı açılacak.

Örnek Uygulama

Örnek bir uygulama ile css sprite kullanımına bakalım. Konun anlaşılmasını kolaylaştırmak için uygulamamızı oldukça basit yapmaya çalışacağım.

Uygulamamızda bir buton yapalım. Bu butonumuzun bir arkaplan resmi olsun ve bu butonun üzerine gelindiği zaman arkaplan resmi değişsin.

Bu iki resmimizi tek resimde birleştiriyoruz.

Css Sprite image

Uygulamanın çalışır halini görmek için tıklayınız.

HTML

<a href="#" class="sprite-buton">Buton</a>

CSS

.sprite-buton{
    background:url("sprites.png") no-repeat scroll 0 0 transparent;
    height: 30px; 
    width: 100px;
    display : block;
    text-align: center;
    padding:4px 0;
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
}

.sprite-buton:hover{
    background-position  : -100px -0px;
    color: #1E252D;
}

Css kodumuzda dikkat etmemiz gereken iki nokta var. İlk olarak "background:url("sprites.png") no-repeat scroll 0 0 transparent;" kısmında "0 0" ile resimin hangi koordinatlarından başlayacağını belirledik. Daha sonra butonun üzerine gelindiğinde "background-position : -100px -0px;" ile resimin hangi koordinatlarından başlayacağını belirledik.

demo

Aşağıdaki css kodu yukarıdaki ile aynı görevi görmektedir. Ben daha fazla satır kod yazmamak için yukarıdaki yöntemi seçtim.

.sprite-buton{
      background-image     : url("sprites.png"); 
      background-color     : transparent; 
      background-repeat    : no-repeat;
      background-position  : 0px 0px;
      height: 30px; 
      width: 100px;
      display : block;
      text-align: center;
      padding:4px 0;
      color: #FFFFFF;
      text-decoration: none;
      font-weight:bold;
}

.sprite-buton:hover{
      background-position  : -100px -0px;
      color: #1E252D;
}

Yazıyı css sprite ile ilgili linkler vererek bitirmek istiyorum.

Css Sprite Araçları

Uygulama Linkleri

Paylaş

Benzer Yazılar

Etiketler

css sprites, css

Yorumlar >> (Yorum yok)

Henüz yorum yapılmamış.

Yorum Yap

Yorum Yazarken

Basit Html etiketlerini kullanabilirsiniz.

Kodlarınızı <pre></pre> etiketleri arasına yazınız.

serkandaglioglu.com