Anda disini » Home » , » CSS Sprites dengan CSS Sprite Generator

CSS Sprites dengan CSS Sprite Generator

Rabu, September 28, 2011 Agus Hadi

Penggunaan CSS Sprite merupakan salah satu teknik yang dapat dilakukan untuk mengoptimalkan performa loading website/blog. Simple-nya, CSS Sprite dapat diartikan begini : “menggabungkan beberapa gambar dalam 1 file sehingga kita dapat mengoptimalkan rendering image yang membuat loading website/blogpun menjadi lebih ringan.”

Contoh sederhana lihat pada gambar di bawah ini. Terdapat 7 gambar Social Bookmark Button (Facebook, Twitter, Delicious, Digg, Stumbleupon, RSS, dan Favorites). Dalam setiap proses loading sebuah blog/website, ketujuh gambar tersebut berdiri sendiri-sendiri, maksud saya : Tiap kali blog dibuka maka ke-7 gambar tersebut akan mengantri untuk di-load satu persatu dan itu artinya terdapat 7 HTTP Request hanya untuk memanggil/memunculkan gambar-gambar tersebut ! 

SEBELUM DIGABUNG :
facebooktwitterdeliciousdiggstumbleuponrssfavorites
Total File : 7
Total Size semua gambar : 8,1 KB
Total HTTP Request : 7

SETELAH DIGABUNG :
sprite-social-bookmark-button
Total File : 1
Total Size semua gambar : 6,6 KB
Total HTTP Request : 1

Dapat dilihat dari perbandingan di atas, terdapat sebuah perubahan yang relatif kecil namun bagi saya cukup berarti dan setidaknya ini merupakan sebuah langkah kecil untuk meningkatkan performa blog. Sampai sini sudah paham khan maksud saya ?

Kalo semua gambar dijadikan satu lalu bagaimana kalo gambar-gambar tersebut terletak di posisi yang berbeda-beda dalam pemasangannya di blog? Disinilah kita kelak akan menggunakan fungsi Background Position, gambar yang muncul hanyalah gambar yang dipanggil, jadi biarpun semua gambar dijadikan satu namun hanya gambar yang kita perintahkan untuk muncul saja yang akan keluar pada posisi dan tempat tertentu. Baca aja dulu ntar pasti tambah bingung agak paham.

Pada postingan sebelumnya saya juga sudah membahas tentang :”Css Sprites Otomatis dengan SpriteMe” Pada postingan tersebut saya menulis tentang penggunaan SpriteMe yang dapat memudahkan proses CSS Sprite secara otomatis. Namun ada kalanya SpriteMe tidak memberikan hasil seperti yang benar-benar kita inginkan, contohnya saja ada beberapa gambar yang tidak terdeteksi oleh SpriteMe sehingga gambar-gambar tersebut terlewatkan padahal keinginan untuk melakukan CSS Sprite terhadap gambar-gambar tersebut begitu besar.

Bagi yang mengerti Photoshop saya rasa ini bukanlah perkara sulit, karena sebagian orang berpendapat bahwa CSS Sprite yang paling ampuh adalah dengan menggunakan Photoshop, namun bagi orang malas seperti saya yang tidak paham photoshop dan bisanya hanya menggunakan fasilitas gratisan maka alternatifnya adalah dengan menggunakan CSS Sprite Generator agar saya tetap dapat melakukan CSS Sprite terhadap gambar-gambar yang saya inginkan tanpa perlu repot-repot membuka Photoshop.

Buseeeeeeeet.. Ini postingan kok panjang banget basa-basinya. Langsung deh, untuk mendukung postingan ini saya akan menggunakan contoh “Social Bookmark Button” (gambar-gambar button ini hanya saya gunakan sebagai contoh saja, adapun bagi anda yang ingin menggunakan social bookmark button untuk blog sih saya sarankan untuk menggunakan versi gratisan dari Addthis saja yang sekarang sudah dimutakhirkan).

Berikut ini cara CSS Sprite dengan menggunakan CSS Sprite Generator (karena saya menggunakan Social Bookmark Button maka judul proyeknya adalah  : CSS Sprite untuk Social Bookmark Button, halah) :
  1. Siapkan gambar-gambar yang akan digabung.
  2. Ekstrak gambar-gambar tersebut ke dalam format .ZIP
  3. Buka : http://spritegen.website-performance.org/
  4. Upload file gambar yang sudah berformat .ZIP
  5. Pada pengaturan bisa diubah sesuaikan :
  • Sprite Output Options
      Build Direction    :  Horizontal (Posis Sprite Image Horizontal)

      Horizontal Offset :  1px  (jarak per-gambar horizontal saya seting menjadi 1 px)

      Vertical Offset    :  1px   (jarak per-gambar vertical saya setting menjadi 1 px)

      Compress Image with OptiPNG : (Diconteng untuk mengoptimalkan kompres gambar)

6. Klik “Create Sprite Image & CSS”

7. Lalu akan muncul Link download gambar dan CSS Rules dari gambar (Sprite Image) tersebut.

  •  » Download Sprite Image : Klik untuk mendownload gambar yang sudah digabung. Untuk menggunakan gambar ini kita perlu meng-uploadnya di media penyimpanan gambar (image hosting) untuk mendapatkan link URL dari gambar tersebut (bagi pengguna WP diperlukan untuk upload gambar ke site’s directory menggunakan File Manager atau FTP Client) 
  • CSS Rules : Digunakan sebagai panduan dalam penulisan CSS kelak yang berfungsi sebagai koordinat (Background Positioning) untuk memanggil gambar tertentu agar bisa muncul di tempat tertentu pula. Contoh CSS Rules : 
.sprite-delicious{ background-position: 0 0; width: 32px; height: 32px; } 
.sprite-digg{ background-position: 0 -33px; width: 32px; height: 32px; } 
.sprite-facebook{ background-position: 0 -66px; width: 32px; height: 32px; } 
.sprite-favorites{ background-position: 0 -99px; width: 32px; height: 32px; } 
.sprite-rss{ background-position: 0 -132px; width: 32px; height: 32px; } 
.sprite-stumbleupon{ background-position: 0 -165px; width: 32px; height: 32px; } 
.sprite-twitter{ background-position: 0 -198px; width: 32px; height: 32px; }

Setelah men-download sprite image tersebut lalu meng-uploadnya ke hosting gambar artinya sekarang kita sudah memiliki link URL dari gambar tersebut sekaligus CSS Rules sebagai dasar dalam penulisan CSS, maka langkah selanjutnya adalah membuat CSS sebagai dasar pengaturan dan membuat HTML sebagai pemanggil perintah dari CSS tersebut (aduh blepotan ngomongnya).


CSS

Saya menggunakan paragraph element untuk css tombol social bookmark ini :
.addthis_toolbox {padding: 15px 0 5px 10px;text-align: justify;} 
.addthis_toolbox a{background: url(https://lh6.googleusercontent.com/-dw6ZKZW9b-A/Tm2nzzKFnMI/AAAAAAAAAG0/oU41m89orh4/sprite-social-bookmark-button.png)no-repeat;margin: 0 4px 0 4px;padding: 0;} 
.addthis_toolbox a.sprite-facebook:hover,.addthis_toolbox a.sprite-facebook,.addthis_toolbox a.sprite-twitter:hover,.addthis_toolbox a.sprite-twitter,.addthis_toolbox a.sprite-delicious:hover,.addthis_toolbox a.sprite-delicious,.addthis_toolbox a.sprite-digg:hover,.addthis_toolbox a.sprite-digg,.addthis_toolbox a.sprite-stumbleupon:hover,.addthis_toolbox a.sprite-stumbleupon,.addthis_toolbox a.sprite-rss:hover,.addthis_toolbox a.sprite-rss,.addthis_toolbox a.sprite-favorites:hover, 
.addthis_toolbox a.sprite-favorites {display: block;width: 32px;height: 32px;float:left;color: #fff;overflow: hidden;font-size: 0px;} 
.addthis_toolbox a.sprite-delicious:hover {background-position: 0 0; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-delicious {background-position: 0 0; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-digg:hover {background-position: 0 -33px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-digg {background-position: 0 -33px; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-facebook:hover {background-position: 0 -66px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-facebook {background-position: 0 -66px; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-favorites:hover {background-position: 0 -99px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-favorites {background-position: 0 -99px; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-rss:hover {background-position: 0 -132px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-rss {background-position: 0 -132px; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-stumbleupon:hover {background-position: 0 -165px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-stumbleupon {background-position: 0 -165px; width: 32px; height: 32px;opacity: 0.85;} 
.addthis_toolbox a.sprite-twitter:hover {background-position: 0 -198px; width: 32px; height: 32px;opacity: 1;} 
.addthis_toolbox a.sprite-twitter {background-position: 0 -198px; width: 32px; height: 32px;opacity: 0.85;}

  • Ganti tulisan yang berwarna merah dengan URL gambar sprite .PNG milik anda. (atau pake’ yang itu juga ga’ ada yang ngelarang)

  • Background-position merupakan koordinat gambar yang ingin ditampilkan dan ini merupakan bagian yang penting, keliru sedikit saja dalam penentuan koordinat maka gambar yang ingin ditampilkan bisa jadi kurang sempurna atau bahkan tidak tampil sama sekali. Gunakan background position yang sudah diberikan pada CSS Rules 

  • Hover dan Opacity : Ini merupakan pengaturan keadaan tombol ketika diam (opacity : 0.85) maupun keadaan ketika mouse diarahkan ke tombol (opacity : 1).

HTML

  • Bagi pengguna blogger bisa memasang kode HTML di bawah ini di : “Edit Layout >> Add Page Elements >> HTML/JavaScript”.
  • Bagi pengguna WP : masukkan kode HTML di bawah ini pada : “Add Text/HTML” pada sidebar.
<div class="addthis_toolbox"> 
  <a class="sprite-facebook" href="http://www.facebook.com/pages/panduan-infoblogspotcom/102059353180136" title="Facebook">Facebook</a> 
  <a class="sprite-twitter" href="http://twitter.com/joker_here" title="Twitter">Twitter</a> 
  <a class="sprite-delicious" href="http://del.icio.us/post?url=http://panduan-info.blogspot.com" target="_blank" title="Save On Del.icio.us">Delicious</a> 
  <a class="sprite-digg" href="http://digg.com/submit?url=http://panduan-info.blogspot.com" target="_blank" rel="nofollow" title="Digg">Digg</a> 
  <a class="sprite-stumbleupon" href="http://www.stumbleupon.com/refer.php?url=http://panduan-info.blogspot.com" rel="nofollow" target="_blank" title="StumbleUpon EAB">Stumbleupon</a>  
  <a class="sprite-rss" href="http://feeds.feedburner.com/Panduan-Info" target="_blank" title="Subscribe Via RSS" rel="nofollow">Rss</a> 
  <a class="sprite-favorites" href="javascript:bookmarksite('Panduan-Info', 'http://panduan-info.blogspot.com')" title="favorites">Favorites</a></div>

Ganti tulisan yang saya beri highlight dengan url sesuai dengan website/blog anda.

CSS Sprite untuk Social Bookmark Button telah selesai. Setelah melakukan tindakan CSS Sprite ini coba cek kembali blog/website dengan SpriteMe dan lihatlah gambar yang baru saja kita tanam tersebut sudah terdeteksi oleh SpriteMe dan mungkin disarankan untuk dilakukan tindakan sprite kembali untuk digabung dengan gambar-gambar lainnya.

Prinsip CSS Sprite yang saya tulis di atas pada dasarnya dapat digunakan untuk melakukan CSS Sprite pada gambar yang berbeda sesuai dengan keinginan masing-masing. Perlu ditekankan disini, melakukan CSS Sprite bukanlah metode yang paling ampuh ataupun paling super untuk meningkatkan performa loading sebuah blog, namun hanya merupakan salah satu usaha untuk bisa mencapainya.

Bagi anda yang tidak paham dengan apa yang saya tulis di atas karena terlalu njelimet namun masih ngotot ingin mempelajari tentang “CSS Sprite” lebih jauh, saya sarankan untuk mengunjungi beberapa blog ciamik di bawah ini yang juga membahas tentang hal serupa namun dengan cara, aplikasi, dan penjelasan yang sedikit berbeda :

Semoga bermanfaat.

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 ,
Posting lain yang berhubungan :


Anda dapat meninggalkan komentar, atau trackback dari blog anda.
Ada 7 Komentar tentang "CSS Sprites dengan CSS Sprite Generator"
  1. Unknown :
    (28 September 2011 pukul 15.40)

    Memang menarik penggunaan CSS Sprites .. (",)

    Unknown :
    (29 September 2011 pukul 01.30)

    Yuupz, CSS Sprite selalu menarik dan membuat penasaran untuk diterapkan.

    roomantik :
    (2 November 2011 pukul 22.20)

    tutorialnya berhasil kuterapkan, namun ketika di-repeat, seluruh gambar jadi muncul semua sedangkan gambar yg dibutuhkan adalah gambar urutan terakhir. gimana caranya agar gambar terakhir tersebut dapat diulang vertikal dan horisontal.? mohon dijawab di blogku.
    atas bantuannya saya ucapkan terima kasih.

    [Balas Komentar]
    Unknown :
    (24 November 2011 pukul 23.59)

    cb perhatikan kembali dasar css yg anda gunakan apakah sudah sesuai dg kode pemanggil yg digunakan pd html.Perbedaan nama karakter tentu akan membuat css dan html mjd tidak sinkron atau nyambung antara satu sama lain. Semoga Membantu

    Unknown :
    (25 November 2011 pukul 06.47)

    Satu tambahan ilmu yang sangat bermanfaat sob.Apalagi bila dengan CSS Sprite membuat loading blog jadi ringan.Ijin menyimak dan mempelajari yo.Makasih banyak untuk infonya,happy blogging.

    Faisal :
    (12 Februari 2012 pukul 21.51)

    Thankyu sob, kebetulan saya lagi nyari referensi untuk bikin sprite image. Terima kasih banyak.

    [Balas Komentar]
    Unknown :
    (24 Februari 2012 pukul 02.42)

    Senang bisa membatu.. :D

Posting Komentar

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

Langganan: Posting Komentar (Atom)

    Cari di Blog Ini

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