Anda disini » Home » , » Css Sprites Otomatis dengan SpriteMe

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.cara-sprite-image-css-otomatis-blogger

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 :

agus-hadi-photo-authorSetiap 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
>> Ditulis dalam kategori ,

Anda dapat meninggalkan komentar, atau trackback dari blog anda.
Ada 12 Komentar tentang "Css Sprites Otomatis dengan SpriteMe"
  1. 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 :)

    [Balas Komentar]

    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.

    [Balas Komentar]

    saya dulu pernah baca tentang css sprite, tapi apa ini benar-benar efektif untuk kecepatan blog?

    [Balas Komentar]

    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

    [Balas Komentar]

    thanks infonya brother.

    [Balas Komentar]

    HCST, Oke brother. thanks for visit

    [Balas Komentar]

    Iya nih mas, lagi nyari cara combine image with css sprites, bingung soale haha :D
    Makasih mas infonya,

    [Balas Komentar]

    mas., apa ini berfungsi buat wp.,? maaf newbie hehe

    [Balas Komentar]
    red :

    bisa kasih tutorial export CSS dari spriteme ke file CSS kita masbro? karena dititik ini gue bingung :D

    [Balas Komentar]

    thanks for tips

    [Balas Komentar]

Posting Komentar

Silahkan tulis komentar maupun pendapat anda pada kolom di bawah ini :

© Panduan - Info 2010 is proudly powered by Blogger.com | Template by Agus Hadi Wijaya