Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

Sudah lama saya ga membahas mengenai web design di blog matre ini, dan saya juga mohon maaf buat sobat blogger karena memang beberapa bulan belakangan ini saya sangat di sibukkan, sehingga jarang membalas komentar yang masuk maupun berkunjung balik ke blog sobat. Buat sobat blogger yang tertarik dan menekuni web design pasti tidak asing lagi dengan teknik CSS sprites yang mengoptimalkan penggunaan image sehingga loading page web site atau blog akan menjadi cepat dan hal ini sangat berpengaruh pada performance website baik dari segi hal traffik maupun pagerank karena pernah saya baca artikel dari suhu jalooe mengenai kecepatan loading website merupakan salah satu kriteria yang di masukkan ke dalam algoritma perhitungan pagerank oleh om google, dan saya juga pernah baca juga di artikel beliau mengenai teknik css sprite yang merupakan salah satu cara untuk mengoptimasi kecepatan loading blog.
Teknik CSS sprites memang lumayan sulit karena teknik ini mengabungkan beberapa gambar tersebut ke dalam satu gambar, tetapi ada hal yang menguntungkan dengan menggunakan teknik css sprite ini adalah:

Menggunakan satu gambar yang intinya irit bandwith karena hanya satu request ke url penyimapanan image di bandingkan dengan penggunakan banyak image yang lebih boros bandwith karena meminta lebih dari satu request ke url penyimpana masing-masing gambar.
Less images = Less http requests = faster loading 

Kerugian menggunakan teknik css sprite ini adalah tidak semua browser mendukung teknik css sprite namun saya rasa untuk masa akan datang pasti akan ada improvement untuk browser tersebut untuk mendukung teknik css sprites.

Nah, buat para webmaster di bawah ini saya akan melist CSS sprites generator yang tentunya akan membuat efisiensi waktu dalam pembuatan image yang di gabungkan menjadi satu.

 1. css-sprit.es




 2. CSS Sprite Generator



 3. spriteme


 4. spritegen

 5. spritr

Semua css generator di atas bisa sobat coba untuk mengoptimasi kecepatan blog dengan menggunakan teknik css sprite. Silahkan sobat bereksperimen dengan menggunakan tool free css generator online di atas. Happy blogging.

About Subagya

Hello readers, im Guruh Subagya, i'm start blogging at 2008, i'm person who interest with technology, blogger, and others stuff related to internet marketing. Hope you enjoy with my post information. Happy Blogging
«
Next
Newer Post
»
Previous
Older Post

38 comments:

  1. Wah thanks bgt nih infonya, Ini yang saya cari selama ini. thanks...

    ReplyDelete
  2. nice info sob, baru tau ada css sprite, salam kenal :)

    ReplyDelete
  3. makasih info nya.. aku malah baru tau kalo kecepatan loading website ikut menentukan PR..

    ReplyDelete
  4. aku sebenarnya pengen banget belajar css nich sob.. cuman pusing melihat kode-kodenya. gimana ya solusi nya ??

    ReplyDelete
  5. bener blog matre keren euy.. jadi ngiri neh :D

    ReplyDelete
  6. ah saya ribed ama css, html,dll. saya masih betah n setia pake template hasil kang subagya. udah saya uji pake keyword apapun yg berhubungan dg artikel blog saya, tetep ada di page 1 google walau bukan urutan paling atas saingan dengan wikipedia.org tapi anehnya blog saya sepi pengunjung,hhhehe, templatenya kang subagya seo friendly coab lirik ke Sinjay school web education, salah satu blog saya yg memakai template kang subagya

    ReplyDelete
  7. wah, yang bagus, keren, dan friendly yg aman yaaa???cocok banget buat saya blogger pemalasyang males utak atik mikir css,hhe

    ReplyDelete
  8. ane blom paham nyang beginian... disimpen dulu ya kang bagya....

    ReplyDelete
  9. Wah kalau soal web design saya harus lebih banyak belajar lagi biar lebih mengerti..
    Thanks untuk informasinya.

    ReplyDelete
  10. wah desain css nya bagus sekali trima kasih tipsnya

    ReplyDelete
  11. Coba - coba ah... Kali aja ane bisa...

    ReplyDelete
  12. Butuh banget neh om... Coba dulu ya...

    ReplyDelete
  13. Bisa neh jadi bhan tutorial q... Thank's banget neh... Hehehehe

    ReplyDelete
  14. tambah keren aja nih blognya.

    pa kabar sob, lama tak bersua :)

    ReplyDelete
  15. saya belum paham tentang css sprite, sepertinya saya harus mencoba dulu supaya lebih mengerti

    makasih untuk infonya, langsung ke TKP

    ReplyDelete
  16. dicoba ah, skalian pengen tau efeknya bagaimana. Thanks :)

    ReplyDelete
  17. dicoba ah, skalian pengen tau bagaimana efeknya. Thanks :)

    ReplyDelete
  18. informasi yang suangat berguna Bro..ini termasuk artikel penting..aku save as yach..

    ReplyDelete
  19. halo salam kenal...mau ajakin tukeran link nih.
    link u dah gw pasang di web gw.
    klo berkenan pasang link gw juga ya
    link : http://film-komedi.blogspot.com
    nama : film komedi
    terimakasih sebelumnya

    ReplyDelete
  20. suaopay ngga pake table ya ? ngga mudeng sih

    ReplyDelete
  21. Terima kasih atas sharingnya

    ReplyDelete
  22. wah.. bisa dicoba tuh . . . makasih infonya Mas. . .


    mampir y

    ReplyDelete
  23. Oh ya Mas, cara penggunaan css sprite ini gmn ?

    ReplyDelete
  24. nice tutorial mas..
    ditunggu tulisan berikutnya

    ReplyDelete
  25. @damar : penggunaannya memang agak cukup sulit kang, harus tahu dasar CSS dulu

    ReplyDelete
  26. Wah design nya keren banget tuh.

    ReplyDelete
  27. Bagus sekali tipsnya, sungguh bermanfaat

    ReplyDelete
  28. makasih nih.. ane jadi bisa css sprite :)

    ReplyDelete
  29. Nice list gan, klo buat ane si enak ngesprite sendiri deh

    ReplyDelete
  30. mantap pak ini yg saya cari... makasih untuk css sprite generator nya nya...

    Salam,

    Jasa Web

    ReplyDelete
  31. orang bule sekarang sudah ada trend (FLAT UI) , indonesia kapan bisa biki trend

    ReplyDelete


Top