1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

Mempersingkat Loading Time dengan CSS Sprites

Discussion in 'Pemrograman Web' started by t1pt2p, May 28, 2007.

  1. t1pt2p

    t1pt2p Super Hero

    Joined:
    Jan 8, 2007
    Messages:
    862
    Likes Received:
    35
    Location:
    Di sini aja
    Setelah berhasil melakukan "Operasi Plastik" kecil-kecilan di blog saya, saya pingin sharing pengalaman ke rekan-rekan.

    Tehnik ini biasa disebut CSS Sprites. Penjelasan selengkapnya bisa tanya ke Paman Google. Tapi yang jelas, CSS Sprites ini berhasil mereduksi loading time Blog saya dari 10 detik menjadi 6 detik (mengukurnya pakai Add-On Firebug di Firefox).

    Yang saya lakukan adalah. Menggabungkan semua gambar yang selalu di loading oleh themes blog menjadi satu gambar besar.

    [​IMG]

    Caranya adalah buat sebuah file baru (menggunakan GIMP atau Photoshop) dengan ukuran yang dibutuhkan. Untuk background situs saya, lebar maksimum yang saya perlukan adalah 930 pixel dan tinggi kurang lebih 700 pixel. Kemudian set background layer menjadi transparent 90%.

    Berikutnya tambahkan (add) semua gambar yang dibutuhkan oleh template blog ke dalam file ini. Akan lebih mudah jika dibuat layer baru setiap kali add gambar untuk mengatur posisinya nanti. Atur sedemikian rupa (dengan menggeser layer) sehingga bisa meminimalisir ruang kosong diantara gambar (semakin padat posisinya, akan semakin effisien hasilnya akhirnya). Tapi CSS sprites ini tidak memungkinkan fungsi rotate (setidaknya saya belum menemukan referensi tentang itu) jadi gambar harus ditempatkan secara horizontal sebagaimana tampilan yang biasa muncul.

    Jika dirasa sudah optimal penempatannya, gabungkan semua layer menjadi satu (flatten layer). Gambar bisa dicrop juga seandainya masih ada ruang sisa di bagian samping atau di bawah. Kemudian ubah image mode menjadi index color 256 dan simpan sebagai file .png

    Buat juga sebuah file gambar baru berukuran 1pixel x 1 pixel dan simpan sebagai gif.gif File ini nantinya bermanfaat sebagai pseudo image agar tidak menyalahi aturan baku html.

    Nah setelah mempunyai satu master image dan file "gambar palsu" gif.gif, sekarang masuk ke bagian yang mengasikkan, yakni modifikasi file CSS nya. Pada prinsipnya CSS Sprites ini memanfaatkan satu gambar untuk berbagai macam fungsi background. Gambar besar itu hanya digeser-geser agar memunculkan bagian yang tepat di tempat yang diinginkan. Proser geser-menggeser ini berlangsung di sisi browser client sehingga tidak ada lagi transfer file gambar, begitu gambar masternya sudah di download oleh client. Inilah yang mempercepat waktu loading yang dibutuhkan situs kita.

    Sebagai contoh untuk background Header Blog saya, awalnya saya menggunakan

    #header{background:#EDEBD6 url(images/header-bg.png) no-repeat scroll 100% 0pt;height:143px;width:930px;padding:0;}

    kemudian saya ubah menjadi:

    #header{background:transparent url(images/imggatzet.png) top left; background-position: 0px 0px; height: 133px; width: 930px; }

    Bagian yang saya tebalkan itu adalah fungsi untuk menggeser gambar ke posisi yang diinginkan. background-position: 0px 0px menunjukkan posisi sudut kiri atas dari bagian gambar yang dimunculkan. Dan kemudian agar gambar lainnya tidak ikutan muncul di header, ukuran kotaknya harus dibatasi dengan parameter height: 133px; width: 930px; dengan demikian bagian gambar yang lainnya akan tersembunyi.

    Contoh lainnya adalah untuk background footer. Sebelumnya saya menggunakan :

    #footer{color:#FFFFFF;background:#EDEBD6 url(images/nfooter-bg.png) no-repeat scroll 100% 0pt;height:90px;clear:both;padding:25px;}

    kemudian saya ubah menjadi

    #footer{background:transparent url(images/imggatzet.png) top left; background-position: 0 -240px;height:90px;clear:both;padding:25px;}

    Pada parameter ini ada angka -240px, karena posisi gambar untuk footer yang saya butuhkan berada di 240pixel dari sisi atas master image (untuk lebih jelasnya bisa mengacu ke contoh master image yang saya sertakan), dan perintah background position: 0px -240px ini bisa diartikan geser gambar 240 pixel ke bawah.

    Contoh ketiga adalah untuk logo blog. Sebelumnya saya menggunakan image link biasa untuk memunculkan logo.

    < img src="http://www.gatzet.info/WordPress/wp-content/themes/rockinblue-3col-1/images/gatzet.png" alt="gatzet info" style="margin-left:20px;float:left;border:none;" width="338" height="110"/>

    kemudian saya ubah menjadi

    <div id="_titlepage"> < img src="http://www.gatzet.info/WordPress/wp-content/themes/rockinblue-3col-1/images/gif.gif" alt="gatzet info" width="1" height="1" style="border:none;" /></div>

    Disini gambar yang diload saya ganti menjadi gambar kosong berukuran 1x1 pixel untuk tidak menyalahi aturan HTML. Sedangkan gambar aslinya disertakan dalam fungsi <div id="titlepage"> yang saya tambahkan ke dalam CSS.

    #titlepage{background:transparent url(images/imggatzet.png) top left; background-position: -210px -118px; height: 110px; width: 320px; margin:0 0 0 20px; float:left; border:none; }

    Lagi-lagi di sini masih menggunakan gambar master yang sama, dan perhatikan juga nilai background-position yang berarti menggeser gambar 210 pixel ke kiri dan 118 pixel ke bawah.

    Prinsip CSS Sprites ini bisa digunakan di semua bagian template situs kita yang membutuhkan gambar. Misalkan icon-icon untuk social network (digg, furl, delicious.. dsb, yang biasanya di load satu per satu) bisa digabungkan menjadi satu gambar saja.

    Menurut saya, saat menggunakan CSS Sprites ini, hal yang paling melelahkan adalah menentukan posisi yang tepat untuk memunculkan gambar. Memunculkan alat bantu ruler di Photoshop atau GIMP yang saya gunakan memang sangat membantu, setidaknya untuk pedoman awal penentuan posisi gambar. Namun tetap saja mesti dilakukan fine adjustment di semua bagian saat CSS Sprites sudah berada di server. Sehingga akan lebih baik jika untuk proses uji cobanya dilakukan di server lokal anda dulu, baru setelah semua sempurna bisa di upload ke server utama.

    CSS Sprites ini kompatibel untuk semua web browser populer mulai dari IE6, Firefox, sampai Opera versi terbaru (For linux dan Windows, saya belum coba untuk Mac.... gak punya Mac je.. :p )

    Selamat mencoba, dan semoga gak bingung dengan penjelasan saya ;D
     
    comsoft likes this.
  2. yudhis97

    yudhis97 Super Hero

    Joined:
    Dec 20, 2005
    Messages:
    2,438
    Likes Received:
    16
    Location:
    Jogja
    wah coba deh ...
     
  3. born2learn

    born2learn Hero

    Joined:
    May 8, 2006
    Messages:
    579
    Likes Received:
    12
    Location:
    Pemalang - Jateng
    makasih udah share. sangat bermanfaat nih. applaud aku tambah.
     
  4. milloanget

    milloanget New Comer

    Joined:
    May 19, 2007
    Messages:
    45
    Likes Received:
    0
    apllaud juga...thanks om..
     
  5. rayofshadow

    rayofshadow Hero

    Joined:
    Nov 18, 2005
    Messages:
    583
    Likes Received:
    3
    Location:
    Jogja
    cara ini bagus untuk meminimalkan proses loading, seperti juga penggunaan menu yg menggunakan background, daripada menunggu loading background maka image digabungkan, pas hover baru posisinya di pas-in (diposisikan) tapi hal ini juga perlu diperhatikan, kalo imagenya banyak bukan tidak mungkin malah akan memperbersar ukuran css itu sendiri karena masing masing image harus didefinisikan letaknya sendiri sendiri.

    Ya harus jeli jeli mana yg bisa di sprite atau di coca cola dan mana yg sebaiknya menggunakan cara natural.

    btw nice tips
     
  6. Radian

    Radian Super Hero

    Joined:
    Aug 11, 2006
    Messages:
    1,780
    Likes Received:
    6
    pengen coba juga sich... ::)

    tapi pusing deh kayaknya... :D [dasar pemalas] ;D
     
  7. aku345

    aku345 Super Hero

    Joined:
    Feb 8, 2007
    Messages:
    859
    Likes Received:
    38
    Location:
    Ciamize And The Zogja
    ikut applaud ahh....
    .... ....... ......... .......... ........ ......... ........... .......... .... . ........... ........ .... ..... .......... ......... ........ ..... .
     
  8. Kok dulu ndak kepikiran buat yan kayak gini yah. Makasih banget inponya
     
  9. t1pt2p

    t1pt2p Super Hero

    Joined:
    Jan 8, 2007
    Messages:
    862
    Likes Received:
    35
    Location:
    Di sini aja
    he he saya juga baru tahu nih... ;D
     
  10. ..kILuA_dEatH..

    ..kILuA_dEatH.. AdSense Pro

    Joined:
    Oct 18, 2006
    Messages:
    267
    Likes Received:
    1
    Location:
    Bogor
    nice2...
    lgnsng coba.

    applaud ++
     
  11. polokiju

    polokiju AdSense Fan

    Joined:
    Jan 8, 2011
    Messages:
    119
    Likes Received:
    1
    bingung :pusing:
     
  12. comsoft

    comsoft Super Hero

    Joined:
    Mar 1, 2011
    Messages:
    898
    Likes Received:
    102
    Location:
    Jakarta
    makasih infonya, sering juga liat situs yg model kaya gini, seluruh file gambarnya jadi satu, ternyata pengaturan posisinya bisa diatur lewat css ya :D
     
  13. ikiddie

    ikiddie New Comer

    Joined:
    Jun 30, 2011
    Messages:
    9
    Likes Received:
    0
    nice share gan :ting:
     
  14. slurper77

    slurper77 AdSense Pro

    Joined:
    May 4, 2010
    Messages:
    260
    Likes Received:
    12
    Mantep gan,,,ane langsung cobain ah hihihi :D
     
  15. Suamiidaman

    Suamiidaman New Comer

    Joined:
    Jul 27, 2011
    Messages:
    9
    Likes Received:
    0
    wow, keren tipsnya
    cobain ah
    makasih mastah :)
     
  16. hanafi2020

    hanafi2020 Hero

    Joined:
    Dec 17, 2007
    Messages:
    635
    Likes Received:
    17
    Location:
    Banyuwangi
    tak kira ada pluginnya gan, ternyata harus ngutek2. hik, dasar pemalas. ada jasanya gak. wkkkkwk
     
  17. ittoong

    ittoong AdSense Pro

    Joined:
    Feb 1, 2011
    Messages:
    382
    Likes Received:
    3
    Location:
    Yogyakarta
    udah nyoba ...rada memuaskan bang :D
     

Share This Page