Mau Buka Situs Lebih Cepat CSS Sprite

Mau buka situs lebih cepat terapkan CSS sprite. Begitu komentar setelah blog ini diuji ‘WebPageTest’, Google ‘Page Speed’, ‘GTmetrix’, dan ‘Zoompf’. Pfff… serius sekali urusan buka situs lebih cepat dengan gambar ya, belum cukup dan tuntas dengan 2 posting lalu? Belum. Masih ada, CSS sprite. ‘CSS sprite’? Cuma istilah, gabungan sejumlah gambar jadi 1 gambar besar lalu mengatur tayang gambar masing-masing.

Bisa begitu, hebat sekali.

CSS sprite

zodiac-spriteLangsung ke ‘tkp’. Misalkan kita punya gambar simbol zodiak kembar, ‘putih’ (38 kB) dan ‘hitam’ (38 kB) seperti di samping. Kalau disatukan 76 kB. Ya iyalah, tanya anak kelas tiga.

Ceritanya kita ingin terjadi efek ‘menu’ saat melewatkan mouse di atas gambar zodiak putih. Lihat contoh penggalan gambar di bawah (jangan klik). Mouse lewat, zodiak berganti warna jadi hitam. Untuk bisa begitu komputer harus pergi ke server di luar mengambil zodiak hitam dan menayangkannya di atas zodiak putih. Mouse pindah ke zodiak lain, komputer kembali ke server mengambil zodiak hitam yang sesuai dan menayangkan di atasnya. Begitu seterusnya.

Kalau servernya dekat oke, kalau jauh nun di sana entah di mana? Pasti lama.
 
 
Jadi gambar zodiak putih dan hitam disatukan. Komputer cukup pergi sekali ke server dan semua gambar zodiak putih dan hitam sudah berada di komputer kita. Pilih zodiak, tinggal cuplik di komputer kita sendiri. Selesai. Cepat, fast!
 

 

Contoh CSS sprite lain

Itulah yang dilakukan pada menu navigasi seperti ‘Home’, ‘About’, … . Berikut contoh CSS sprite menu Amazon.com,
CSS sprite Amazon (contoh)

Kalau tidak di’sprite’kan bisa-bisa Amazon gulung situs. Lemot! YouTube sama, menu dilayani 1 gambar besar dengan ketinggian (height) 2.800 piksel! Wa..aw. Kalau berikut termasuk CSS sprite juga? Idenya dari game komputer jaman ‘baheula’ (kuno), lumayan rumit, tapi saya suka,
CSS sprite Pokemon (contoh)
(tahu ‘kan game ini)

Kesimpulannya…

Buka situs lebih cepat dengan CSS sprite

Selain teknik ‘rampingkan’ gambar (dimensi, ukuran berkas) dan ‘isikan data’ gambar, diperlukan juga teknik manajemen atau tata kelola yang baik untuk gambar jumlah banyak agar buka situs lebih cepat. Namanya CSS sprite.

Membuat CSS sprite

Buat pemula yang (baru) mau belajar membuat CSS sprite 3 artikel di bawah mungkin dapat membantu. Bahasa inggeris, tetapi mudah diikuti.
1. ‘What is a CSS Sprite?’, ini demonya.
2. ‘Turning a list into a navigation bar’, ini demonya.
3. ‘Creating easy and useful CSS Sprites’. Baca pendahuluannya, bagus.

Silakan eksperimen pakai gambar zodiak di atas.
 
:D  (asyik juga CSS sprite; artikel ini dikoreksi/diupdate 17 nov 2012)
 

Tagged with: , , , , , , , , , , , , ,
Ditulis dalam Blog Tips dan Trik, Blogging, Wawasan
4 comments on “Mau Buka Situs Lebih Cepat CSS Sprite
  1. oborooodagiri mengatakan:

    asli gak ngerti !!!! *melongo*

    heheheheee ngeblog cuma sebatas menulis dan sedikit belajar tentang teknik seo tingkat cetek.

    mudah – mudahan kedepannya bisa support nih otak saya dengan css sprite .. hehehe

    salam kenal!!!

  2. Ejawantah Wisata mengatakan:

    Walau masih agak-agak gimana gitu Kang. tapi hal ini merupakan suatu pelajaran baru untuk saya. dan mohon ijin disimpan untuk dipelajari.

    Sukses selalu
    Salam Wisata

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: