Silverf0x

Gambar atau IMAGES pada web pada masa sekarang ini sudah menjadi kebutuhan. Gambar sering digunakan sebagai banner, header, button, gambar pendukung artikel, dokumentasi, dan lain sebagainya. Tapi harus diakui dengan semakin banyaknya pemakaian gambar di web, bandwitdh sering tersedot hanya untuk gambar. Hal ini sering mengakibatkan loading time web jadi lambat, sehingga seringkali di berbagai instansi, baik perusahaan maupun universitas melakukan blokir terhadap situs-situs Social Network (Friendster, Face Book, dsb) karena situs Social Network banyak ditampilkan foto-foto yang ukurannya sangat lumayan besar.

Namun ada beberapa tips untuk mengakali hal tersebut di atas :

1. Gunakan attribute Height dan Width pada tag images <IMG>
   Contoh : <IMG SRC=”url-file-gambar” HEIGHT=”200″ WIDTH=”200″>
   Dengan penambahan attribute height dan width, browser langsung mengetahui panjang dan lebar layout yang harus dipersiapkan untuk gambar tersebut. Sedangkan jika tidak ada attribute tersebut, browser harus mendownload terlebih dahulu gambar tersebut, mencari ukuran panjang dan lebar, baru kemudian mempersiapkan layout gambar tersebut. Tips ini memang hanya menghemat sedikit loading time untuk 1 gambar, tapi bayangkan berapa banyak yang bisa dihemat jika 1 halaman situs memiliki 10-20 gambar.
2. Jangan terlalu banyak menggunakan file animasi.
   Animasi memang sangat menarik, tapi ukuran file animasi cukup besar. Bijaksanalah dalam penggunaan animasi.
3. Gunakan format gambar dengan baik.
   Gunakan format JPG untuk gambar dengan warna kompleks (foto, degradasi warna), tapi jika gambar sederhana seperti clip-art, button atau chart, gunakan format GIF.  Format PNG juga dapat digunakan, terutama jika gambar tersebut adalah transparent image.
4. Use thumbnails
   Thumbnails yang dipasang pada halaman web jangan file gambar file, tapi ditampilkan dengan atribut yang diperkecil.
   Contoh : gambar A memiliki size width 200, height 200, size 10 kb.
   Thumbnails jangan menggunakan gambar A, dengan mengubah atribut widht dan height menjadi 100, sebab tag tersebut tetap akan me-load gambar dengan ukuran 10 kb. Lebih baik membuat gambar baru, misalnya B, width 100, height 100, size 5 kb.
5. Manfaatkan browser cache.
   Untukmemanfaatkan browser cache dapat dilakukan dengan cara menaruh gambar di folder yang sama.
   Contoh : di page A dan B sama-sama ditampilkan gambar Z. Sebaiknya gambar Z ditaruh di folder tertentu, misalnya folder “gambar”. Di page A dan B, sama-sama memanggil gambar dengan URI “gambar/z”. Hal ini membantu loading time.
6. Slice gambar yang besar.
   Potong-potong (slice) gambar yang ukurannya cukup besar. Saya pribadi selalu memotong gambar yang ukurannya di atas 150 kb, sehingga tiap gambar ukurannya tidak lebih dari 100 kb.
   Logikanya, dengan hitungan kasar, dengan menggunakan dial-up, 56 kbps, gambar tersebut akan di loading kurang lebih1-2 detik.
7. Setelah melakukan semua hal di atas, jika masih tetap lambat, tips terakhir, batasi penggunaan gambar
   Buang atau tidak usah menampilkan beberapa gambar yang sifat nya tersier, gambar yang tidak terlalu berpengaruh besar dalam proses penyampaian informasi.