Css Sprites Otomatis dengan SpriteMe
Sudah agak lama ga’ update di blog ini, bukan karena sibuk dan ga’ punya waktu tapi karena lebih karena sedikit males nulis postingan di blog ini. Kenapa males ? karena saya emang pemalas, halah. Melanjutkan tulisan saya sebelumnya yang membahas tentang : Analisa & Optimasi Performa Blog dengan Firebug dan Pagespeed
Kali ini saya mau berbagi tentang css sprites secara praktis dan otomatis. Kalo anda sudah menggunakan firebug dan pagespeed maka saya yakin anda sudah tidak asing lagi dengan hal ini. Salah satu optimasi untuk meningkatkan sebuah web/blog adalah dengan menggabungkan beberapa gambar yang ada di dalam sebuah web/blog menjadi satu. Teori simple-nya : Jika anda memiliki 5 gambar di dalam blog anda maka akan dilakukan 5 kali load pemanggilan gambar secara satu-persatu ketika blog tersebut dibuka, jauh lebih praktis jika beberapa gambar tersebut digabung menjadi satu sehingga tiap kali blog dibuka maka proses loading hanya akan memanggil 1 gambar saja.
Yang jadi pertanyaan adalah bagaimana cara melakukan css sprites? Ada banyak sekali tutorial yang menjelaskan tentang css sprites dan bagaimana cara meng-implementasikannya, namun saya terlalu malas untuk belajar. Berkah untuk pemalas seperti saya adalah adanya banyak layanan otomatis untuk melakukan css sprites yang biasanya ribet menjadi sangat simple untuk dibuat. Salah satu layanan gratis tersebut adalah SpriteMe.
Dengan spriteMe kita bisa melakukan melakukan css sprite secara otomatis dan sangat mudah. Ini bukan software melainkan sebuah bookmarklet jadi yang perlu anda lakukan cukup taruh SpriteMe di bookmark bar anda. Kemudian buka blog/website yang ingin anda analisa dengan cara meng-klik bookmark spriteMe lalu akan muncul sebuah tampilan SpriteMe di sisi kanan layar anda.
SpriteMe akan menganalisa web/blog anda kemudian menyarankan mana saja yang perlu di-sprites.
- Klik “make sprites” maka prosespun akan langsung berjalan secara otomatis.
- Klik “export CSS” untuk melihat bagaimana cara memasukkan css sprites yang baru saja dibuat ke dalam css blog anda.
- Klik “new sprite” jika dirasa masih ada gambar yang perlu di sprites menurut anda sendiri.
Setelah melakukan css sprites dengan cara di atas, coba analisa kembali web/blog anda dengan menggunakan firebug dan pagespeed lalu lihat apakah ada kemajuan yang terjadi.
SpriteMe hanyalah salah satu cara untuk mempermudah kita dalam melakukan optimasi gambar dalam sebuah web/blog, tidak selamanya cara ini benar-benar berhasil dan sesuai seperti yang kita inginkan, seperti kata Chris Coyi (css-trick.com) : “we all know sites are never "complete". Lakukan sprites seadanya dan bila dirasa benar-benar perlu maka pelajari tentang css sprites lebih mendalam yang mungkin penerapannya harus dilakukan secara manual dan masih belum bisa dicapai dengan hanya menggunakan layanan otomatis semacam SpriteMe.
Referensi :
 | Setiap tutorial atau file download yang Anda temukan pada blog ini bebas digunakan untuk apapun sesuai dg keinginan anda, baik dengan maupun tanpa kredit ke blog ini. Tentang | Profil Google | Profil Blogger | Berlangganan via email |
Ada yg lebih praktis toh kang, baru tau aku hahaa.. tapi perasaan aku juga gak pernah melakukan sprite haha... lha wong bisa nulis aja udah untung apalagi segala mikirin CSS hhe.. paling klo libur doank :)
Wah ada kang ferdinand disini,saya juga kebetulan lg iseng aja sob, sekalian aja saya tulis disini kali-kali aja ada yang terinspirasi utk ikutan sprite jg, halah.
saya dulu pernah baca tentang css sprite, tapi apa ini benar-benar efektif untuk kecepatan blog?
Angga Wahyu : CSS Sprite hanya salah satu upaya utk meng-optimalkan kecepatan loading blog. CSS Sprite jg merupakan saran optimasi yg selalu diberikan oleh google webmaster. Ga' selamanya hal ini bs bnr2 efektif, krn kalo penerapannya ngawur bukannya cepat yg didapat tp justru tambah lelet yg didapat.Setidaknya ada usaha khan.hehehe
thanks infonya brother.
HCST, Oke brother. thanks for visit
Iya nih mas, lagi nyari cara combine image with css sprites, bingung soale haha :D
Makasih mas infonya,
zholieh : kadang2 combine image dengan css sprites bisa bikin frustasi kalo gagal terus sob, tapi disanalah yang bikin tambah penasarannya. SpriteMe hanya bersifat membantu, lebih tau tentang css sprite secara manual tentu lebih baik.. :D
mas., apa ini berfungsi buat wp.,? maaf newbie hehe
@djawa yuupz, untuk wp hosting sendiri kok mas,duh saya malah lebih newbie mas..hehe
bisa kasih tutorial export CSS dari spriteme ke file CSS kita masbro? karena dititik ini gue bingung :D
thanks for tips