Dalam bidang desain website (interface), memang ada beberapa hal yang akan ditemui dan berbeda dari desain print. Jika kita desainer grafis yang terbiasa dengan desain print lalu ingin mencoba di bidang desain website atau interface, kemungkinan akan menemukan hal-hal teknis yang tidak biasa. Salah satunya adalah teknik slicing pada desain interface.
Teknik image slicing merupakan teknik untuk memecah atau memotong gambar agar menjadi bagian yang lebih kecil pada website. Teknik ini digunakan untuk membuat gambar atau desain suatu website lebih fleksibel, cepat dan menarik. Kemudian pecahan gambar yang telah anda buat akan disatukan kembali menggunakan kode css dan HTML. Mengapa harus dipecah? Website yang kita lihat ini bisa muncul terlihat utuh tidak seperti jika kita melihat sebuah brosur yang benar-benar mencetak hasil utuh dari sebuah desain.
Desain web dan kecepatan akses website terkadang menjadi dua hal yang kontradiktif. Web yang sarat dengan image berukuran besar tentu tampilannya akan lebih lambat daripada web yang hanya mengandung unsur text singkat. Padahal menurut survey yang dilakukan oleh Zona research (April, 1999) menyatakan bahwa 80% pengunjung akan menutup browser (atau memindahkan Address/URL ?) bila halaman Web yang ia buka tidak tampil dalam 7-8 detik.
Untuk mengakalinya biasanya webmaster biasanya men-slice image (image slicing) menjadi dimensi yang lebih kecil. Pada artikel ini akan dijelaskan tentang apa itu image slicing.
Kenapa harus di slicing
Bisa dilihat size kedua file tadi, file pertama ‘tidak di slicing’ sebesar (393Kb + 205b) sedangkan yang di slice hanya 2kb. Disini kita bisa mengambil kesimpulan bahwa teknik slicing ini dapat menghemat size dan bandwidth. Didunia web desain, kita harus memperhatikan betapa pentinggnya accessiblity ‘dalam hal ini kecepatan pemuatan’ semakin besar file size yang di unduh maka semakin lama pula waktu pemuatan(asumsi: hosting sama), sebaliknya jika file yang di unduh relatif kecil maka semakin cepat pula waktu pemuatan, Itulah sebab kenapa harus di slicing.
Tools yang digunkan
Dilingkungan Photoshop, ada dua tool yang dapat Anda gunakan yaitu ‘crop tool’ dan ‘slice tool’. Saya sendiri lebih suka menggunakan ‘slice tool’ karena kita bisa menyeleksi beberapa bagian/objek sekalius sehingga lebih menghemat waktu. Dan jika menggunakan Crop tool, akan sangat lengket/lama jika komputer yang digunakan berkemampuan standard. Silakan plih tool yang ingin digunakan, selagi suka dengan yang itu ‘ya pakai yang itu
Kemampuan Paralel Request Browser
Browser memiliki kemampuan untuk me-request pada web server secara paralel agar loading website lebih cepat dan kemungkinan kegagalan satu transaksi data akan digantikan secara cepat oleh transaksi yang lain.
Secara default Internet Explorer memiliki 4 paralel request. Sedangkan pada Firefox dan Opera kemampuan paralel download dapat di atur secara mudah tanpa mengkutak - katik registry.
Kemampuan request paralel inilah yang dimanfaatkan oleh para webmaster dengan men-slice image yang ditampilkan di web. Dengan maksud secara bersamaan browser akan berusaha mendownload beberapa image yang berbeda sekaligus sehingga loading halaman website menjadi lebih cepat. Sedangkan apabila image tersebut di tampilkan sebagai image tunggal maka hanya satu transaksi data yang terjadi.
Jangan terlalu banyak
Ada kalanya teknik image slicing ini malah memperlambat proses loading sebuah halaman web. Hal ini dikarenakan image di slice dalam jumlah yang terlalu banyak sehingga dalam satu waktu browser diharuskan mendownload banyak gambar sekaligus. Hal ini menyebabkan kelambatan loading image karena semakin banyak image tersebut di slice, maka browser akan membutuhkan waktu yang lebih lama karena proses negosiasi untuk mendownload banyak file akan lebih lama daripada mendownload sedikit file saja.
Sumber: jakhoster & blog.uad.ac.id