CSS sprite oluşturma aracı (Google PageSpeed için)


CSS ile tasarım yapmak candır, tasarıma dahil birden fazla resmi tümleşik hale getirip CSS ile ayrıştırmak (sprite tekniği) ise canan. Büyük sitelerin çoğu gerek sayfa açılış sürelerini kısaltmak gerekse trafik tüketiminden tasarruf etmek için bu tekniği kullanıyorlar. Ayrıca son zamanlarda oldukça popüler olan Google PageSpeed aracı da, bu tekniği tasarımcılara sayfa hızını doğrudan etkileyen bir unsur olarak “önemle” tavsiye ediyor.

Sprite tekniğinin sunduğu avantajlardan nasıl faydalanacağınız konusunda fikriniz yoksa veya halihazırda bu tekniği kullanan fakat zamandan tasarruf etmek isteyen bir tasarımcıysanız şu siteyi sık kullanılanlarınıza eklemenizde fayda var: http://tr.spritegen.website-performance.org Site sayesinde zipli halde yüklediğiniz resimleri kolayca birleştirebilir ve çıktıya ait CSS kodlarını sadece bir kaç tıklamayla alabilirsiniz.

Facebook Yorumları

8 Yorum

  1. paylaşım için teşekkürlerde bana biraz boş iş geldi, geçen gece üşenmeden oturup hemide senin verdiğin bu linkteki siteden yaptım olayı ve sitemde denedim, ya benim görseller zaten hepsi birlikte 6kb tutuyor, css sprite yapınca da 6 kb tutuyor, ekstradan css dosyasına yük getirmiş oldum 🙂 ha ne kadar önemli? Bilemem SEO cu amcamlar yap yap iyidir diyor, Firebug testte kafaya bunu yazıyor, ne bileyim hıza da büyük katkısı olduğunu ben hissetmedim belki düşük bağlantılı ziyaretçilerde eder ya da hakikatten kıl google bunu önemsiyordur 🙂 bir ara sitemde kalıcı olarak kullanacağım, test ettim yapabildiğimi gördüm ve kaldırdım 😛

  2. Caner
    Yazar

    Bir de şu var Esat, günde kaç bin kişi ziyaret ediyor siteni? 🙂 Ben de normalde kullanmıyorum ama sağlam, prof bir projeye girersem mutlaka kullanırım. Herkes öneriyor abi vardır bir bildikleri 🙂

  3. Kırıldım ama 🙁 tamam kendi yağında kavrulan güccücük bir sitem var ama, bu kadar ağır eleştiriyi de hak etmiyorum. İdare edemem Caner idare edememmmm. 😛 ehehhii dün gece çok uykum vardı yazamamıştım yukarıdaki satıları şimdi koşa koşa geldim yazdım. 😀

    Bu olay büyük resimlerde falan işe yarayabilir belki bilmiyorum dedim ya bendeki 9 görselin toplamı zaten 6 kb. sprite yapıncada tek dosya olarak 6 kb tutuyor, ben buradaki mantığı kavrayamadım? Tek bir resmi bir sefer yüklüyor olması mı hıza katkı yapıyor, sanırım öyledir.

  4. Caner
    Yazar

    Hehe yok ben eleştirmek için söylemedim cidden olanı söyledim, yazıda da söylüyorum ya genelde büyük siteler kullanırlar diye.

    9 görseldeki olay şudur bence, 9 resmi göstermek için 9 ayrı çağrı/yükleme yapıyor tarayıcı sen bunu teke indirdiğinde haliyle iş yükünü de haliyle teke indirmiş oluyorsun.

  5. Caner’ in linkini verdiği site css yi de veriyor, gerçi ben verdiği css yi kullanmadım, örnekler üzerinden kendi css mi yapmıştım,

    misal:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    #sprite {width:800px; height:80px;}
    #sprite ul {margin:0;padding:0;list-style:none;}
    #sprite li {float:left;text-indent:-9999px; list-style:none; }

    #sprite a#anasayfa{
    width:80px;
    height:80px;
    display:block;
    background:url("xxx.jpg") no-repeat 0px top;
    }

    #sprite a#login{
    width:80px;
    height:80px;
    display:block;
    background:url("xxx.jpg") no-repeat -85px top;
    }

    #sprite a#arama{
    width:80px;
    height:80px;
    display:block;
    background:url("csg-4eee336867204.jpg") no-repeat -425px top;
    }

    gibi, azcık potoşop kullanıp azcıkta css yapabilen herkes kendisi yapabilir aslında, eğer üzerine gelince başka bir görsel getirmesini istiyorsanız ayrıca her link için #hover özelliğinide yazmanız gerekiyor, faideli ama gereksiz 😛

  6. olay şu ki beyler canerin dediği gibi resim toplam boyutu az olsa da tek link üzerinden resimleri çağrıyoruz bu durumda da site yüklenme hızı artmış oluyor resim yollarını tek tek bulmaya uğraşmıyor tek seferde yüklemiş oluyor
    ayrıca resmi birleştirirken png değilde gif i seçerseniz resim boyutlarının azaldığını görürsünüz bende şimdi yapmaya çalışıyorum bi halledeyimde etkisi var mı yokmu yazarım 🙂

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir