#

Bagaimana menggunakan image sprites

Assalamualaikum dan salam sejahtera,

artikel kali ini adalah perkongsian bagaimana untuk menggunakan image sprites dalam laman sesawang kita. Kelebihan image sprites ini, ia akan menjimatkan panggilan atau capaian data seperti gambar yang kita gunakan dalam laman sesawang kita. Selain itu, ianya akan membantu laman sesawang kita untuk load lebih laju kerana gambar yang telah dimuat turun akan tersimpan dalam cache browser pelawat kita.

Mungkin ramai yang seringkali mengabaikan fungsi ini kerana ianya agak leceh dan rumit jika ingin dilakukan secara manual. Namun begitu, ada cara mudah yang boleh kita gunakan untuk mencapai tujuan yang sama. Salah satu langkah adalah dengan melanggan servis Eizil Network untuk optimasi bahagian ini, dan satu lagi cara dalah dengan menggunakan alat pengurusan image sprite oleh pihak www.spritebox.net.

Sebelum kita boleh menggunakan alat pengurusan tersebut, kita perlu terlebih dahulu menyediakan image sprite yang diperlukan oleh laman sesawang kita. Contoh image sprite adalah seperti berikut:

eizil-network-sprites

Kita akan memasukkan semua image yang kita ingin gunakan dalam satu fail gambar seperti contoh di atas, selepas anda selesai menyusun semua dalam satu fail, tiba masa untuk kita menggunakan alat pengurusan image sprite dari spritebox tadi.

Anda boleh muat naik terus ke SpriteBox atau memuat naik ke pelayan laman sesawang anda sebelum menggunakan pautan gambar tersebut di SpriteBox. Kemudian dengan menggunakan tetikus anda, lakarkan kotak untuk setiap image yang anda ingin gunakan, contoh lakaran seperti gambar di bawah.

contoh-lakaran-image-sprites

Anda perlu menamakan setiap lakaran anda, tujuan penamaan ini adalah untuk rujukan pada CSS yang akan kita gunakan pada laman sesawang kita nanti. Anda perlu menamakan setiap lakaran yang anda buat kemudian tekan enter. Seterusnya selepas siap semua lakaran (seperti gambar di bawah), anda boleh tekan butang Create CSS.

Contoh Lakaran Image Sprites Oleh Eizil Network

Contoh lakaran yang telah siap

Contoh kod CSS selepas anda menekan butang Create CSS.

.logo-eizil {width:254px;height:64px;background-position:-22px -16px;background-repeat:no-repeat;}
.youtube {width:33px;height:31px;background-position:-42px -99px;background-repeat:no-repeat;}
.twitter {width:32px;height:32px;background-position:-88px -99px;background-repeat:no-repeat;}
.facebook {width:32px;height:32px;background-position:-132px -99px;background-repeat:no-repeat;}
.gplus {width:32px;height:32px;background-position:-176px -98px;background-repeat:no-repeat;}
.instagram {width:31px;height:32px;background-position:-222px -99px;background-repeat:no-repeat;}
.keek {width:31px;height:32px;background-position:-266px -99px;background-repeat:no-repeat;}
.rss {width:32px;height:32px;background-position:-311px -100px;background-repeat:no-repeat;}
.chrome {width:33px;height:34px;background-position:-454px -36px;background-repeat:no-repeat;}
.firefox {width:33px;height:32px;background-position:-492px -36px;background-repeat:no-repeat;}
.ie {width:32px;height:32px;background-position:-530px -37px;background-repeat:no-repeat;}
.netscape {width:32px;height:32px;background-position:-569px -36px;background-repeat:no-repeat;}
.opera {width:32px;height:31px;background-position:-606px -37px;background-repeat:no-repeat;}
.safari {width:31px;height:32px;background-position:-645px -37px;background-repeat:no-repeat;}

.logo-eizil, .youtube, .twitter, .facebook, .gplus, .instagram, .keek, .rss, .chrome, .firefox, .ie, .netscape, .opera, .safari {
background-image:url();
}

Anda perlu menambah url image pada bahagian akhir kod tersebut, Contoh seperti di bawah.

.logo-eizil, .youtube, .twitter, .facebook, .gplus, .instagram, .keek, .rss, .chrome, .firefox, .ie, .netscape, .opera, .safari {
background-image:url("images/eizil-network-sprites.jpg");
}

 

Semua kod CSS ini anda boleh masukkan ke dalam style.css theme laman sesawang anda, kemudian penggunaannya adalah seperti berikut.

<div class="logo-eizil"></div>

 

Anda boleh melihat contoh bagaimana paparan image sprites ini di halaman Contoh Image Sprites. Jika anda mempunyai sebarang soalan atau cadangan, bolehlah sampaikan di ruangan komen.

Kongsi pendapat anda

CommentLuv badge

Pendapat yang dikongsikan

Affan

20 August 2013, 02:12 AM

Rasanya pernah jugak guna website spritebox tu, sbb masih teringat lagi interface die tu hehe.

Alternatif utk image sprites, guna je Font Icons 😀 Haritu perasan ada juga developer plugin social button yg update plugin diorang daripada guna image sprites to font icons. Kalau setakat simple2 tu guna font icons dah ok, tapi kalau nak guna custom image mcm logo ke, terpaksa lah guna image sprite.

Reply

Anarm

20 August 2013, 02:41 AM

Terbaik.. Boleh try.. Dah lama aku cuba belajar guna image sprites ni tapi kurang faham.. Guna SpriteBox tu nampak macam lebih mudah nak buat..

p/s: Link SpriteBox ada ralat

Reply

hafizrahim

20 August 2013, 05:00 AM

aduhai..dah baca 2-3 kali.still tak faham jugak..lambat betul nak faham..hehe

Reply

Mus

26 August 2013, 01:13 PM

tutorial yang menarik.. tq bro

Reply