Jika sebelumnya telah dijelaskan mengenai keuntungan dan kelebihan menggunakan
CSS Sprite untuk mengurangi http request. Maka kali ini saya akan berbagi cara manual membuat dan menggunakan CSS atau image sprite. Sebetulnya ada layanan online untuk mengkombinasikan beberapa image menjadi CSS/ image sprite salah satunya adalah SpriteMe.
Selain itu ada pula plugin wordpress yang menggunakan cara serupa yaitu cSprites. Namun bagi saya sendiri layanan itu kurang memuaskan karena file image justru ukurannya malah menjadi jauh lebih besar. Sehingga saya lebih suka membuat image sprite secara manual. Seperti tema styleicious pada blog ini (udah ganti) tadinya menggunakan 35 file image (kecil-kecil), namun
setelah dibuat image sprite menjadi 4 file saja, terkecuali loggo. Klik di sini untuk melihat image sprite yang digunakan pada tema styleicious blog ini. Contoh Sederhana Image sprite Di samping adalah salah satu gambar yang telah digabungkan menjadi satu image sprite. Dan gambar itulah yang kini digunakan dalam tema styleicious pada blog ini. Mungkin Sobatpun bisa menerka kira-kira pada bagian mana saja gambar tersebut diletakan. Seperti telah dijelaskan sebelumnya bahwa Image sprite atau disebut pula CSS sprite pada dasarnya adalah menggabungkan 2 atau lebih file image menjadi satu file saja dan mengatur positioning masing-masing bagian gambar dengan CSS. Penggabungan gambar pada CSS sprite ini pada dasarnya tidak terbatas, artinya sebanyak apapun file gambar maka bisa digabungkan menjadi image sprite. Namun yang perlu diperhatikan adalah kesamaan posisi dan sifatnya, sebab posisi gambar ada yang ditempatkan secara “no-repeat” dan adapula yang “repeat” atau berulang. Maka penggabungan gambarpun harus disesuaikan berdasarkan kesamaan posisi tersebut. Di samping itu tidak semua gambar bisa disatukan dalam image sprite, biasanya berkaitan dengan fungsi tertentu dalam suatu tema itu seperti background atau bullet. Bagaimana, bingung? Wah, sama seperti saya pada awalnya 😀 Namun setelah saya trial dan error dan sedikit mengerti dasarnya akhirnya sayapun berhasil menyesuaikan positioning gambar dengan CSS. Oke deh, sayapun akan berbagi pada sobat semua untuk membuat dan menyesuaikan image sprite dengan CSS-nya. Adapun untuk keperluan test, disarankan menggunakan server local seperti Appserv, XAMPP ataupun WAMPP. Positioning Image vs CSS
Demikian dan seterusnya penyesuaian image sprite dengan CSS stylesheet dapat dilakukan sesuai dengan posisinya masing-masing. Selain manfaatnya dalam mengurangi http request dan mempercepat loading blog. Ukuran file yang digabungkan sebagai image sprite-pun ternyata menjadi lebih kecil dibandingkan dengan jumlah file image satu persatu. Adapun format image yang dapat digunakan dalam image sprite ini baiknya adalah transparent PNG, baik PNG 24 ataupun PNG 8. Namun jika file PNG tersebut justru menjadi lebih besar, maka sobat masih bisa mengakalinya dengan Tips Memperkecil Ukuran Image ala DVS atau dapat pula menggunakan file optimizer (baca tentang review dan dapatkan file optimizer di sini). Demikian, semoga bermanfaat. Ammiin… Updated 1 Agustus 2020 Artikel TerkaitDean's Virtual Studio Silahkan bagikan artikel ini jika bermanfaat dan Terima Kasih untuk tidak Copy Paste tanpa izin dan menghindari Plagiasi, dilindungi DMCA. Ingin berlangganan artikel blog ini melalui Email? Masukan email Anda di bawah ini. Cek email untuk konfirmasi |