Tip Slicing Image
Masih ingat artikel tentang artikel Slicing Memperlambat Downloading
Kali ini saya akan menyampaikan tip bagaimana menggunakan slicing pada image.Pada artikel ini, saya menggunakan Adobe Photoshop 7 untuk menslice, Anda dapat menggunakan software lain untuk melakukan slicing sesuai dengan keinginan Anda. Baiklah kita mulai :
Ikuti aturan tabel HTML
Image yang Anda slice nantinya akan di-convert oleh software menjadi folder berisi image (default pada Photoshop dan Firework) dan satu file html berisi tabel. Tabel tersebut memposisikan image agar saling berhimpit dan tidak terlihat berpisah. Tiap image disimpan dalam sebuah cell (kotak).Tabel HTML bukanlah tabel yang terdapat di Microsoft Word. Bila dalam MS Word Anda mengedit suatu cell yang berada dalam suatu row (baris), maka cell pada row lainnya tidak akan terpengaruh. Lain hal nya dengan HTML, tiap perubahan pada cell akan mempengaruhi cell lain pada row yang terpisah. Perhatikan gambar dibawah, bila cell bagian tengah kita geser, maka bagian atas dan bawahnya akan menyesuaikan.
Maka, setiap kita melakukan pengubahan ukuran tabel HTML, yang akan kita dapatkan adalah sebuah tabel dengan cell-cell yang selalu sejajar. Bahkan bila kita menggabungkan 2 cell, bentuk dasar tabel tersebut tidak akan berubah.Nah, mengingat karakteristik dari tabel HTML yang demikian, dalam melakukan slicing, sebaiknya kita mengikuti bentuk dan sifat dari tabel HTML. Buatlah slicing yang lebih teratur dan perhatikan row (baris) dan column-nya. Perhatikan gambar dibawah:
Bila Anda memiliki button dalam image Anda, (perhatikan slicing pada nomor 03, 04, 05) Anda tidak harus membagi nomor 03 menjadi 2 bagian agar selalu simetris, bayangkanlah bila gambar diatas adalah tabel dan nomor 03 adalah hasil penggabungan dari 2 cell dan pastinya bentuk tabel akan seperti pada gambar slicing diatas. Cara slicing diatas lebih memberikan Anda keleluasaan. Bila anda menghapus gambar (mis. untuk memasukan teks) pada salah satu cellnya tampilan gambar tidak akan berantakan.
Slice gambar berdasarkan jumlah warna
Slicelah gambar Anda berdasarkan perkiraan jumlah warna. Hal ini bertujuan untuk penerapan format file yang lebih tepat, agar dapat mengoptimalkan kompresi. Lihat ilustrasi di bawah:
Pada gambar 02, 03, dan 04 diperkirakan memiliki warna kurang dari 256, lebih baik pergunakan format file GIF. Sedangkan pada nomor 08 diperkirakan memiliki komposisi warna lebih dari 256, lebih baik pergunakan format file JPEG. Maka, pisahkan kedua bagian yang berbeda komposisi warnanya tersebut. Dengan demikian ukuran file image keseluruhan dapat Anda perkecil dengan menggunakan format file yang sesuai dengan jumlah warnanya.Pengubahan format file ini bila Anda menggunakan Photoshop 7 dapat Anda lakukan pada kotak Save For Web. Pada Menubar File > Save for Web. Sedangkan pada Fireworks MX dapat Anda lakukan dengan menggunakan palet Optimize.Jangan terlalu banyak men-slice image
Seperti yang pernah dibahas pada Slicing Memperlambat Downloading, slicing yang terlalu banyak akan memperlambat downloading file secara keseluruhan, selain file HTML yang dihasilkan akan lebih besar, juga dikarenakan cara kerja browser yang memiliki downloading paralel yang terbatas.Demikian beberapa tips yang mudah-mudahan bermanfaat bagi Anda yang sering menggunakan slicing pada image yang Anda publish dihalaman Web - bersambung.(Pupung Budi Purnama)
