Pernahkah Anda mencoba menggabungkan gambar-gambar statis bawaan tema menjadi sebuah gambar? Itu akan memperkecil ukuran CSS tema sehingga menambah kecepatan loading blog Anda. Misalnya untuk gambar icon daftar kategori, background tanggal, banner di header blog, gambar footer, atau background tema. Dengan tehnik sprite, gambar-gambar itu akan digabungkan dan dapat ditampilkan pada posisi yang sesuai dengan merubah atau menambahkan sedikit atribut pada CSS Anda.
Caranya langsung saja menuju spriteme.org, dan Anda lihat pada Installation. Di situ ada link SpriteMe, simpan ke bookmark dan tampilkan bookmark bar untuk menggunakannya. Mungkin pada setiap browser berbeda-beda cara untuk menampilkan bookmark bar. Jika Anda menggunakan Google Chrome, tekan Ctrl+Shift+B untuk menampilkan bookmark bar, kemudian drag (seret) link SpriteMe ke bookmark bar. Untuk Firefox, yang mudah adalah dengan klik kanan pada window Firefox (bagian atas), kemudian aktifkan atau centang pada bilah alat markah / bookmark bar, dan kemudian drag link SpriteMe ke bookmark bar. Sedangkan pada IE, caranya sama dengan Firefox, klik kanan di bagian window dan centang Favorites bar lalu drag SpriteMe.
Setelah terpasang bookmark SpriteMe, Anda bisa menggabungkan gambar di halaman mana saja pada blog Anda. Misalnya gambar-gambar untuk single page / single post. Mungkin di situ Anda menampilkan share form yang ada gambar-gambar iconnya. Dan mungkin ada gambar lain sebagai icon untuk menuju next page, icon subscribe / rss, dan icon daftar related post, seperti pada Blog Reyzha. Anda buka salah satu single post di blog Anda, kemudian klik bookmark SpriteMe yang sudah tersimpan tadi. SpriteMe akan mendeteksi gambar-gambar yang ada pada halaman tersebut. Kemudian anda dapat menggabungkan gambar-gambar tersebut menjadi satu. Anda klik pada make sprite, dan simpan gambar yang muncul, kemudian upload ke database anda. Kemudian klik pada export CSS untuk melihat panduan memodifikasi file CSS Anda.
Buka style.css pada editor tema Anda. Dan cari gambar-gambar yang sesuai dengan yang ditampilkan SpriteMe Export CSS. Rubahlah link atau nama gambar di CSS sesuai dengan gambar yang Anda upload tadi. Karena gambar-gambar yang semula terpisah sendiri-sendiri kini menjadi satu, maka perlu tag tambahan untuk memanggil gambar-gambar tersebut sesuai pada posisi masing-masing. Untuk melakukan ini, Anda perlu fokus dan konsentrasi. Karena salah mengedit, gambar bisa berantakan atau mungkin tidak muncul. Alangkah baiknya jika Anda membackup css terlebih dahulu untuk mengembalikan seandainya terjadi kesalahan. Ubah link pada gambar di CSS semula dengan link gambar hasil gabungan tadi, dan tambahkan tag posisi yang ditunjukkan di SpriteMe Export CSS.
Yang perlu diperhatikan dalam merubah url gambar, yang pertama format gambar. Kemungkinan gambar bawaan tema bermacam-macam, ada yang png dan ada yang gif. Untuk itu rubahlah sesuai gambar yang Dihasilkan dari SpriteMe. Kemudian perhatikan jika ada tag repeat, letakkan kode background-position setelah tanda titik koma di belakang atribut repeat. Perhatikan url gambar, rubah saja link nya, jangan copas langsung dari SpriteMe Export CSS. Karena akan selalu diikuti titik koma setelah url,sedangkan atribut repeat berada di dalam tag background, tidak terpisah dengan url. Sedangkan background-position harus dipisahkan dengan tag repeat.
Setelah semua url gambar yang termasuk dalam sprite tadi selesai Anda modofikasi, simpan CSS, dan lihat hasilnya. Jika masih ada kesalahan posisi atau gambar tidak muncul, periksa lagi CSS Anda. Pastikan tag yang Anda rubah sudah benar, jika tidak bisa menemukan kesalahannya, kembalikan dengan CSS yang di backup sebelumnya. Lalu mulai modofikasi lagi sampai berhasil dengan benar. Setelah berhasil melakukan sprite, Anda bisa cek dengan membuka halaman blog Anda dan klik SpriteMe di bookmark bar. Jika semua gambar telah disprite, maka yang muncul hanya Non-Sprited Images.
Mensprite gambar tema mempengaruhi kecepatan loading blog Anda. Test kecepatan loading bog Anda di Page Speed. Hasil test tidak akan menunjukkan rekomendasi untuk sprite gambar, jika Anda sudah mensprite gambar-gambar tema. Mungkin agak repot, tapi ini akan bermanfaat untuk Anda. Mengurangi beban loading, mengurangi pemakaian diskspace, karena gambar-gambar sebelumnya yang terpisah-pisah dapat Anda hapus. Selain itu juga menghemat penggunaan bandwith. Dan yang terpenting ini mempengaruhi SEO, sudah tahukah prediksi SEO Rank blog Anda.
Semoga sedikit informasi tadi bermanfaat untuk Sobat Rey semuanya. Salam :)
8 komentar:
Saya udah coba, trus saat klik pada export CSS kok gak muncul panduannya...
munculnya di tab baru. kalau boleh tahu browsernya menggunakan apa? saya test di Firefox, Chrome dan IE bisa semua.
Kaya yg di test mas Rey kecuali IE, tapi tadi pakai safari bisa tp gak sengaja ke close dicoba lagi gak bisa :(
Coba kosongkan cache di browser, trus refresh halamannya.
Tetep aja mas, gak bisa :(
Ada cara yg lebih praktis gak sih mas ?
Kalau lebih praktis saya rasa sama saja. Tapi yang lebih efektif, bisa coba gabungkan sendiri dengan photoshop. Kan ada rullernya untuk menentukan background-position buat ditambahkan di CSS, buat ukurannya menjadi px, trus atur gambarnya secara vertikal. Gabungkan jadi 1 file .png dengan background transparan.
Kalau gambarnya sih udah disave mas, cuma gak bisa klik export aja...
kalo udah dapet gambar yg digabungin gitu diapain lagi mas ?
Buka dengan photoshop, lalu arahkan kursor ke bagian salah satu gambar lihat di rullernya berada di pixel berapa, lalu coba ganti salah satu gambar di css dengan nama gambar gabungan, lalu pada stylenya setelah background-image url tambahkan background-position -Xpx -Ypx; . Oh iya, BTW habis refresh halamannya klik bookmarknya lagi kluar gak engine spritenya?
Posting Komentar
Tahukah anda, berkomentar menggunakan nama dan url bisa meningkatkan kunjungan balik ke Blog anda? Gunakan form komentar dengan bijak. Tingkatkan Backlink secara efektif hanya dengan meninggalkan komentar menggunakan Name/URL.