Cara Membuat CSS Image Sprite | Blog

Cara Membuat CSS Image Sprite | Blog - Sebelum melanjutkan membaca postingan ini silahkan baca dulu "Kurangi http Request Cara Mempercepat Blog", disana dijelaskan mengapa http request mempengaruhi kecepatan loading sebuah blog. Jika Anda sudah membaca mari kita lanjutkan ke tahap berikutnya yaitu cara membuat CSS image sprite agar http request bisa diminimalisir . Karena prosesnya bisa dibilang rumit jadi sebaiknya backup dulu theme / template Anda, atau gunakan blog lain khusus untuk uji coba template.

Pertama buka blog kita di web browser kemudian buka www.spriteme.org di tab baru.

Gambar

Lihat SpriteMe di sana ada tulisan "SpriteMe drag this link!" klik link tersebut, tahan, lalu drag / geser ke tab blog kita. Tunggu beberapa saat maka akan muncul kota dialog SpriteMe dengan dua keterangan yaitu: "Suggested Sprites" dan "Non Sprited Images". Jika tidak ada keterangan "Suggested Sprites" itu berarti tidak ada image yang perlu di-sprite, selanjutnya klik "make sprite" pada dialog "Sugested Sprites".

Gambar

Klik disini untuk melihat screenshotnya

SpriteMe akan melakukan sprite pada image background kita, "Suggested Sprites" image yang tadinya banyak akan di-sprite menjadi satu. Selanjutnya klik "export CSS".

Akan muncul tab baru dari SpriteMe. Perhatikan:

Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed! Replace these URLs with the URLs where you host the images.
http://www.jaredhirsch.com/...spriteme1.png

Simpan image yang sudah di-sprite tadi di imagehost yang Anda suka, Saya rekomendasikan Picasa atau imageshack, jadi nanti URL www.jarredhirsch.com/...spriteme1.png diganti dengan URL di mana image tersebut kita simpan. Selanjutnya kita tinggal mengikuti instruksi dari SpriteMe dengan merubah URL image yang sudah di-sprite dengan CSS baru pada HTML atau CSS pada template.

Contohnya seperti ini:

Gambar

Klik disini untuk melihat screenshotnya

Ganti CSS yang dicoret dengan CSS image sprite yang ada di bawahnya.

Jika semua URL image sebelumnya sudah diganti dengan CSS image sprite simpan template maka jumlah http request akan berkurang pada blog kita, ini akan berpengaruh pada loaing blog yang lebih cepat - Cara Membuat CSS Image Sprite | Blog.

Baca juga artikel dan informasi Kualitas Blog Bukan Sekedar Bounce Rate.

Berbagi :