Cekerholic

Dalam tutorial theme WordPress kemarin, saya menggunakan teknik CSS Sprites untuk membuat efek rollover pada logo blog. Nah, kali ini saya akan menjelaskan tentang CSS Sprites dan penggunaannya.

Konsep CSS Sprites kira-kira seperti ini:

• Beberapa gambar yang berbeda digabungkan menjadi satu gambar dengan software pengolah gambar, atau istilahnya membuat gambar master.
• Gambar master itu ditampilkan dalam beberapa elemen HTML pada suatu halaman web dengan posisi atau ukuran yang berbeda dengan menggeser posisi gambar menggunakan CSS

Untuk lebih jelasnya silakan lihat ilustrasi berikut ini:

Mengapa Menggunakan CSS Sprites?

Kelebihan utama CSS Sprites adalah mengurangi HTTP Request dari sebuah halaman web. Misalnya saja kita ingin menampilkan 5 buah ikon sosial media di blog kita, anggaplah 1 ikon ukurannya 2 KB, jadi total ukurannya 10 KB. Kemudian 5 ikon itu kita gabungkan dengan photoshop dan ukurannya menjadi 8 KB, ada penghematan 2 KB kan? Dengan menggunakan CSS Sprites selain mengurangi ukuran file juga mengurangi HTTP Request, dari 5 menjadi hanya 1. Bagi situs sekelas Yahoo atau Google yang mempunyai pengunjung ratusan juta, pengurangan sekecil itu adalah sebuah efisiensi yang sangat besar.

Salah satu contoh blog Indonesia yang menggunakan CSS Sprites adalah Navinot. Di blog ini hampir semua gambar dalam CSS dikombinasikan dalam sebuah gambar master berukuran besar, jumlahnya kurang lebih ada 20! Saya perkirakan nilai efisiensinya mencapai 50%.

Elemen yang dilingkari menggunakan CSS Sprites

Gambar yang digunakan untuk CSS Sprites

Bagaimana cara menggunakan CSS Sprites?

Pada prinsipnya CSS Sprites adalah menggeser koordinat X dan Y suatu gambar dengan CSS. Lihat baris kode berikut:

h1 a {
   background-image:url(images/logo.png);
   background-position:0 0;
   height:86px;
   text-indent:-9999px;
   width:334px;
}
h1 a:hover{background-position:0 86px;}

Penjelasannya begini:
CSS mengatur agar elemen anchor (link) pada h1 menampilkan sebuah gambar (logo.png) dengan koordinat X dan Y masing-masing 0. Kemudian CSS mengatur agar ketika elemen anchor(link) pada h1 di-hover koordinat Y berpindah ke posisi 86px. Jadi CSS Sprites itu sebenarnya cuma memindah-mindah posisi gambar pada suatu elemen.

Anda masih bingung? Jika iya silakan baca-baca tulisan tentang CSS Sprites berikut :

1. A List Apart – CSS Sprites: Image Slicing’s Kiss of Death
2. CSS Tricks | CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
3. Smashing Magazine | The Mystery Of CSS Sprites: Techniques, Tools And Tutorials