Mengoptimalkan File-File Gambar (Image) untuk WEB  

Diposting oleh maskury_news

Hampir semua website memiliki file-file gambar yang ditampilkan dengan ukuran, jumlah, dan posisi yang berbeda-beda. Gambar-gambar tersebut ditampilkan dengan tujuan yang beragam; iklan, memperjelas uraian, galeri photo, dan lain sebagainya.

Memang, tanpa gambar sebuah web akan tampak membosankan dan kurang menarik!

Gambar sebenarnya bisa menjadi salah satu faktor dalam meningkatkan traffic untuk web kita. Karena selain kaka-kata kunci, gambar-gambar merupakan salah satu bagian yang diindeks oleh search engine, sehingga seseorang bisa saja berkunjung ke web kita bukan melalui penginputan kata kunci, tetapi melalui pencarian gambar. Bukankah kita sering menggunakan search engine seperti Google untuk melakukan pencarian gambar?

Namun, penggunaan gambar yang berlebihan akan membuat proses loading web lebih lama. Sebuah dilema tampaknya, karena di satu sisi kita menginginkan web kita dapat me-load lebih cepat, tapi di sisi lain kita ingin mempertahankan kualitas gambar yang kita tampilkan.
Pada dasarnya, file-file image di web bukanlah untuk tujuan pencetakan. Lain halnya apabila image tersebut digunakan untuk tujuan dicetak, kita tentu tidak perlu mengoptimasi image tersebut dan tanpa harus memperhatikan ukuran, karena dalam hal ini kualitas gambar yang diharapkan.

Untuk mengoptimasi file-file gambar di web atau blog, kita bisa menempuh beberapa cara berikut:

Memilih format yang tepat. Format image yang umum digunakan untuk web adalah, JPEG (Joint Photograpich Expert Group), GIF (Graphics Interchange Format) dan PNG (Portable Network Graphics).

Ketiga format image di atas memiliki kelebihan dan kekurangan masing-masing. JPEG, misalnya lebih cocok digunakan untuk image-image foto dengan jumlah warna yang banyak, sedangkan GIF digunakan untuk gambar dengan warna atau garis-garis tegas seperti logo atau banner. PNG sebenarnya tidak jauh berbeda dengan GIF, namun PNG memiliki tingkat kompresi yang lebih baik dari GIF. Tidak seperti JPEG atau GIF, kompresi file gambar dengan format PNG biasanya lebih bagus kualitasnya.

Apabila Anda kesulitan menentukan format mana yang paling cocok, cobalah ketiga format di atas, dan perhatikan format mana yang paling kecil ukurannya dengan kualitas gambar yang cukup bagus.

Mengurangi jumlah warna (color depth). Gambar dengan jumlah warna yang banyak tentu akan memiliki ukuran yang lebih besar daripada gambar dengan jumlah warna yang sedikit. Untuk yang satu ini kita bisa menggunakan program seperti Photoshop.

Bukalah gambar yang akan dikurangi warnanya, kemudian pilih Save for web pada menu File

Pada bagian, Color Table, pilih warna-warna yang akan dihapus, kemudian klik gambar yang menyerupai tong sampah pada sudut kanan bawah. Tekan tombol Ctrl pada keyboard untuk memilih lebih dari satu warna sekaligus. Anda bisa menghapus warna sebanyak yang Anda inginkan. Akan tetapi harus diingat, warna-warna-yang dihapus sebaiknya tidak merubah warna utama.

Biasakan untuk menyebutkan tag “height” (tinggi) dan “width” (lebar) pada kode-kode HTML web Anda. Misalnya, . Hal ini memungkinkan browser untuk terus me-render (membaca kode-kode HTML dokumen web) seluruh halaman web Anda pada saat yang gambar tersebut melakukan proses loading.

Kompresi gambar dengan Image Optimizer. Cara lain untuk mengoptimasi file-file gambar adalah dengan menggunakan software khusus pengompres image, misalnya JPEG Optimizer. Anda bisa mendowload versi trial-nya di http://www.download3k.com/Install-JPEG-Optimizer.html. Dari percobaan yang saya lakukan, software tersebut dapat melakukan kompresi image sebanyak 20%-30%, dengan kualitas gambar yang tetap terjaga. Lumayan besar, kan?



Manfaat Optimasi Image

Ada beberapa keuntungan yang kita peroleh dengan optimasi file-file gambar tersebut. Selain tentunya proses loading web kita akan lebih cepat, pengunaan bandwidth serta beban kerja server akan berkurang secara signifikan.

This entry was posted on 19.50 . You can leave a response and follow any responses to this entry through the Langganan: Posting Komentar (Atom) .

0 komentar