Cara Praktis Membuat dan Menggunakan Image dalam CSS Sprite

Jika sebelumnya telah dijelaskan mengenai keuntungan dan kelebihan menggunakan CSS Sprite untuk mengurangi http request. Maka kali ini saya akan berbagi cara manual membuat dan menggunakan CSS atau image sprite. Sebetulnya ada layanan online untuk mengkombinasikan beberapa image menjadi CSS/ image sprite salah satunya adalah SpriteMe. Selain itu ada pula plugin wordpress yang menggunakan cara serupa yaitu cSprites. Namun bagi saya sendiri layanan itu kurang memuaskan karena file image justru ukurannya malah menjadi jauh lebih besar. Sehingga saya lebih suka membuat image sprite secara manual. Seperti tema styleicious pada blog ini (udah ganti) tadinya menggunakan 35 file image (kecil-kecil), namun setelah dibuat image sprite menjadi 4 file saja, terkecuali loggo. Klik di sini untuk melihat image sprite yang digunakan pada tema styleicious blog ini.

Contoh Image Sprite

Di samping adalah salah satu gambar yang telah digabungkan menjadi satu image sprite. Dan gambar itulah yang kini digunakan dalam tema styleicious pada blog ini. Mungkin Sobatpun bisa menerka kira-kira pada bagian mana saja gambar tersebut diletakan. Seperti telah dijelaskan sebelumnya bahwa Image sprite atau disebut pula CSS sprite pada dasarnya adalah menggabungkan 2 atau lebih file image menjadi satu file saja dan mengatur positioning masing-masing bagian gambar dengan CSS. Penggabungan gambar pada CSS sprite ini pada dasarnya tidak terbatas, artinya sebanyak apapun file gambar maka bisa digabungkan menjadi image sprite. Namun yang perlu diperhatikan adalah kesamaan posisi dan sifatnya, sebab posisi gambar ada yang ditempatkan secara “no-repeat” dan adapula yang “repeat” atau berulang. Maka penggabungan gambarpun harus disesuaikan berdasarkan kesamaan posisi tersebut. Di samping itu tidak semua gambar bisa disatukan dalam image sprite, biasanya berkaitan dengan fungsi tertentu dalam suatu tema itu seperti background atau bullet.

Bagaimana, bingung? Wah, sama seperti saya pada awalnya 😀 Namun setelah saya trial dan error dan sedikit mengerti dasarnya akhirnya sayapun berhasil menyesuaikan positioning gambar dengan CSS. Oke deh, sayapun akan berbagi pada sobat semua untuk membuat dan menyesuaikan image sprite dengan CSS-nya. Adapun untuk keperluan test, disarankan menggunakan server local seperti Appserv, XAMPP ataupun WAMPP.

1. Pertama, kelompokkanlah jenis gambar sesuai dengan apa yang telah dijelaskan di atas.
2. Perhatikan perbedaan gambar pertama (di atas) dengan gambar kedua (di samping). enggabungan gambar di atas adalah berdasarkan kesamaan posisi dimana semua gambar di atas diletakan secara horizontal pada tema. Adapun gambar kedua dikelompokkan berdasarkan kesamaan ukuran.
3. Dalam menggabungkan gambar sprite ini berilah jarak seperlunya seperti gambar di samping sehingga gambar tidak akan bertumpuk. Jarak bisa ditentukan dengan ukuran fix (untuk mempermudah posisi), atau bisa diperkirakan sesuai dengan posisinya pada tema sebelum digabungkan dalam image sprite.
4. Untuk mempermudah mengenali posisi gambar, saya menggunakan fungsi ruler pada Photoshop dan set ukurannya dengan pixel. Setelah gambar hasil gabung fix, save dan simpan pada directory “images” sesuai dengan tema yang digunakan.
5. Untuk mulai memasang image sprite dan menyesuaikannya dengan CSS, perhatikan gambar di samping. Sama halnya dengan grafik pada mode perhitungan matematika, hanya saja positioning dalam image sprite adalah dalam nilai minus. Angka “0” adalah patokan, dimana positioning gambar dimulai dari sudut “0” ini. Garis berwarna biru adalah posisi X, sementara garis berwarna merah adalah posisi Y.
6. Untuk menggunakan image sprite, maka dalam CSS menggunakan tambahan kode berikut:
   

   background :url (images/dvsproperties.png); background-position: Xpx Ypx;

7. Mengacu pada gambar, gambar pertama (buku dan pena) dapat dilihat memiliki posisi X = 0 dan Y = 0, maka penyesuaian image dengan kode pada CSS menjadi seperti ini:
   

   background :url (images/dvsproperties.png); background-position: 0px 0px;

   Adapun untuk gambar berikutnya (folder berwarna biru) posisi X = 0 tidak mengalami perubahan (bergeser ke kiri atau ke kanan) namun posisi Y yang justru bergeser ke bawah dan memiliki nilai Y = -40 dari sudut “0“, jadi penyesuaian image dengan kode pada CSS menjadi:

   background :url (images/dvsproperties.png); background-position: 0px -40px;

8. Adapun untuk posisi X yang mengalami perubahan dapat dilihat pada gambar pertama di atas. Sebagai contoh kita ambil posisi gambar “comment“. Posisi X bergeser ke sebelah kanan dari sumbu 0 sebesar 50px, sementara Posisi Y bergeser ke bawah dari dari sumbu 0 sebesar -70px. Maka posisi gambar disesuaikan menjadi:
   

   background:url (images/dvsproperties.png); background-position: 50px -70px;

   Harap dicatat bahwa setelah melewati separuh dimensi gambar, positioning background X juga mengalami perubahan nilai menjadi minus.

Demikian dan seterusnya penyesuaian image sprite dengan CSS stylesheet dapat dilakukan sesuai dengan posisinya masing-masing. Selain manfaatnya dalam mengurangi http request dan mempercepat loading blog. Ukuran file yang digabungkan sebagai image sprite-pun ternyata menjadi lebih kecil dibandingkan dengan jumlah file image satu persatu. Adapun format image yang dapat digunakan dalam image sprite ini baiknya adalah transparent PNG, baik PNG 24 ataupun PNG 8. Namun jika file PNG tersebut justru menjadi lebih besar, maka sobat masih bisa mengakalinya dengan Tips Memperkecil Ukuran Image ala DVS atau dapat pula menggunakan file optimizer (baca tentang review dan dapatkan file optimizer di sini). Demikian, semoga bermanfaat. Ammiin…