Bagi template blog yang mamakai banyak gambar, CSS Sprite merupakan suatu keharusan. Bayangkan, jika template blog sobat memakai 10 gambar, maka ketika loading page akan memanggil 10 gambar tersebut satu persatu. Tentu proses ini akan memperlambat loading, apalagi jika gambar tersebut lebih dari 10 buah.
stzuriah Blog misalnya, memiliki puluhan gambar pada template-nya. Untuk social icon saja ada 27, belum lagi untuk header, search, navigation, dll. Tentu hal ini sangat memberatkan.
Dengan CSS Sprite, gambar-gambar social icon tersebut digabungkan menjadi satu gambar (lihat gambar di bawah) sehingga ketika loading page tidak memanggil (membaca) 27 gambar melainkan hanya 1. Jadi cukup ringan kan?
Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width dan hight), dan pengulangan gambar (background-repeat).
Posisi dan ukuran gambar akan menentukan peletakan gambar nantinya,
sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar
yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar-gambar yang tidak diulang (no-repeat).
Syntax CSS Sprite
Pada dasarnya gambar yang ditampilkan terletak pada koordinat (x, y), dengan x = 0px dan y = 0px. Dengan adanya penggabungan beberapa gambar maka koordinat gambar tertentu yang akan ditampilkan harus dipundurkan sebanyak q kali lebar gambar sebelumnya (jika berada pada absis atau dibuat horizontal), atau dinaikkan sebanyak q kali tinggi gambar sebelumnya (jika berada pada ordinat atau dibuat vertikal) agar gambar tersebut menjadi berada pada koordinat (0, 0).
Secara umum syntax CSS Sprite adalah sebagai berikut:
background: url(URL Gambar Sprite) xpx ypx;atau bisa juga ditulis seperti ini:
background: url(URL Gambar Sprite); background-position: xpx ypx;
Misalnya menggabungkan gambar ukuran 24 x 24 (Gbr. 1, 2, dan 3) dan ukuran 36 x 36 (Gbr. 4 dan 5) dengan tanpa jarak (padding), seperti berikut:
maka CSS untuk gambar baris pertama (ukuran 24 x 24) adalah:
CSS Gambar 1 (koordinat (0, 0)) : background: url(URL Gambar Sprite) 0px 0px; width: 24px; hight: 24px; CSS Gambar 2 (mundur 1 x 24px) : background: url(URL Gambar Sprite) -24px 0px; width: 24px; hight: 24px; CSS Gambar 3 (mundur 2 x 24px) : background: url(URL Gambar Sprite) -48px 0px; width: 24px; hight: 24px;Demikian seterusnya jika gambar tersebut diletakkan secara horizontal.
Sedangkan CSS untuk gambar baris kedua (ukuran 36 x 36), karena berada pada ordinat (sumbu y) tidak sama dengan 0 maka:
CSS Gambar 4 (naik 1 x 24px): background: url(URL Gambar Sprite) 0px -24px; width: 36px; hight: 36px; CSS Gambar 5 (mundur 1 x 36px dan naik 1 x 24px) : background: url(URL Gambar Sprite) -36px -24px; width: 36px; hight: 36px;
Jika ada gambar pada baris ketiga maka ordinatnya adalah -60px (tinggi gambar baris pertama ditambah tinggi gambar baris kedua). Demikian seterusnya.
Cara menggabungkan gambar
Untuk menggabungkan gambar bisa menggunakan Adobe Photoshop dan disimpan
dalam format file png, atau jika ingin mudah, sekarang sudah banyak
situs penyedia layanan CSS Sprite Generator, seperti: situs
csssprites.com, spritegen.website-performance.org, www.spritecow.com,
dll, yang bisa kita manfaatkan.
Contoh gambar sprite template stzuriah Blog
Ok, segitu aja sob. Semoga bermanfaat .....
