Spirite CSS

« Border Radius Untuk IE

Tutorial CSS Sprites

CSS sprites (image sprites) adalah sebuah metode untuk menggabungkan banyak gambar menjadi satu, dengan maksud agar HTTP Request dapat diturunkan sehingga menghemat bandwidth dan mempercepat loading web. Kali ini saya akan menulis lagi tutorial membuat CSS Sprite lengkap dengan bagaimana menggabungkan images dengan Photoshop.
Pertama, Anda perlu tau fungsi CSS Sprite lebih dulu tentunya. CSS Sprite berfungsi untuk menghemat HTTP Request dengan menyederhanakan gambar-gambar yang senantiasa ditampilkan berulang-ulang, menggunakan aturan CSS yang dioptimisasi. Jika gambar-gambar itu dipanggil menggunakan tag img, maka bayangkan betapa banyaknya HTTP Reuquest yang dihasilkan, sehingga ini merupakan pemborosan bandwith.
Sebagai contoh:
Di bawah ini adalah gambar yang saya jadikan satu, yang semula adalah 8 gambar terpisah:

Gambar icon di atas akan saya gunakan sebagai Menu Navigasi. Jika tanpa CSS Sprite, browser akan memanggil 8 gambar icon di atas (8 HTTP Request). Maka setelah digabungkan, browser hanya akan memanggil 1 file gambar saja. Coba bayangkan, 1 banding 8. Bagaimana jika icon yang akan digunakan dalam web adalah 100 atau lebih?

Cara Membuat Image Sprites

Anda perlu Photoshop untuk melakukan ini. Pertama-tama, siapkan gambar-gambar yang akan digabungkan menjadi 1 gambar. Kemudian ketahui ukuran gambarnya. Dalam contoh ini, gambar icon saya berukuran 48 x 48 pixel. Dan karena jumlahnya 8, maka saya akan membuat gambar baru dengan ukuran 192 x 96 pixel.
Buka Photoshop, tekan CTRL + N, kemudian Set ukurannya: 192 x 96 pixel. Klik menu View, klik New Guides, dan berikan value vertikal 48px, 96px, 144px, serta Horizontal 48px.
Kemudian letakkan gambar-gambar icon sesuai panduan garis (Guides) yang sudah Anda buat tadi, sehingga akan menjadi seperti ini:

Kemudian klik menu File, klik Save For Web and Devices.. atau cukup tekan Alt + Shift + CTRL + S (ini akan mengompres ukuran file menjadi lebih kecil dengan kualitas yang tetap baik), simpan dengan ekstensi .png transparent.

Cara Membuat CSS Sprites

Sekarang Anda sudah memiliki gambar icon yang digabungkan menjadi 1 file. Berikutnya adalah bagaimana menggunakannya untuk menu-menu di website. Berikut ini tutorial singkat membuat CSS Sprites:
Buka Notepad atau file CSS Anda dengan Notepad, kemudian tambahkan baris CSS seperti di bawah ini:

#navigasi {
  width: 192px;
  height: 96px;
}
#navigasi a {
  background: url(sprite.png) no-repeat;
}
#navigasi a.home, #navigasi a.home:hover,
#navigasi a.prev, #navigasi a.prev:hover,
#navigasi a.next, #navigasi a.next:hover,
#navigasi a.refresh, #navigasi a.refresh:hover {
  display: block;
  width: 48px;
  height: 48px;
  float: left;
  color: #fff;
  overflow: hidden;
  font-size: 0px;
}
#navigasi a.home {
  background-position: 0 -48px;
}
#navigasi a.home:hover {
  background-position: 0 0;
}
#navigasi a.prev {
  background-position: -48px -48px;
}
#navigasi a.prev:hover {
  background-position: -48px 0;
}
#navigasi a.next {
  background-position: -96px -48px;
}
#navigasi a.next:hover {
  background-position: -96px 0;
}
#navigasi a.refresh {
  background-position: -144px -48px;
}
#navigasi a.refresh:hover {
  background-position: -144px 0;
}

Mari saya jelaskan sedikit tentang penghematan bandwidth.
Kita akan memanggil gambar satu kali yaitu pada elemen #navigasi a, yaitu sprite.png. Sedang untuk properti lain, kita jadikan satu dengan memisahkannya dengan tanda koma ( , ). Dalam contoh ini, mereka adalah:
#navigasi a.home, #navigasi a.home:hover, #navigasi a.prev, #navigasi a.prev:hover, #navigasi a.next, #navigasi a.next:hover, #navigasi a.refresh, #navigasi a.refresh:hover
Kemudian untuk setiap class di atas, kita deskripsikan posisi background-nya satu per satu. Sebagai informasi, properti untuk posisi background adalah sebagai berikut:
background-position: x y;
Value x digunakan untuk menyatakan posisi horizontal, sedang y digunakan untuk menyatakan posisi vertical. Sehingga dari gambar dengan ukuran 192 x 96 pixel di atas, Anda tinggal membaginya dengan nilai 48 (ukuran asli dari gambar icon sebelum digabungkan).
Oke…, sekarang bagaimana menampilkannya pada HTML? Berikut ini caranya:
Sisipkan dalam HTML Anda kode seperti ini:

<div id="navigasi">
  <a class="home" href="#" title="Home">Home</a>
  <a class="prev" href="#" title="Previous">Prev</a>
  <a class="next" href="#" title="Next">Next</a>
  <a class="refresh" href="#" title="Refresh">Refresh</a>
</div>

Bagaimana Hasilnya..? Di bawah ini adalah contoh Link Navigasi dengan menggunakan CSS Sprite di atas:

HomePrevNextRefresh

Arahkan mouse Anda ke setiap tombol di atas. Anda akan melihat bagaimana CSS Sprite bekerja untuk menampilkan gambar dinamis sementara dengan signifikan menghemat bandwidth.
Lagi pula, 8 gambar terpisah total ukuran file-nya akan lebih besar dibanding jika setelah disatukan menjadi 1 gambar. Ini berarti juga menghemat ruang hosting Anda. Tidak percaya..? Silahkan coba sendiri.

Download Demo CSS Sprite Di Sini

Oke teman..?
Anda bisa bereksperimen sendiri dengan CSS Sprite. Di atas adalah file tentang contoh yang sedang dibicarakan di atas. Silahkan download untuk koleksi Anda.
Enjoy!
^_^