Pernahkah anda menunggu loading lamaa sekali untuk sebuah gambar dengan ukuran kecil? Padahal koneksi internet lancar-lancar saja. Kondisi komputer juga baik-baik saja. Kira-kira kenapa ya?

Saya juga pernah mengalami hal demikian. Tidak jarang saya memencet tombol close sebelum gambar benar-benar ditampilkan karena bosan menunggu. Salah satu kemungkinannya adalah karena gambar tersebut belum dioptimalisasi. Jika anda seorang desainer atau fotografer hal ini akan sangat mengganggu. Tidak semua orang yang melihat desain atau foto kita bisa sabar menuggu lama. Jangan sampai teman, saudara, kerabat atau calon klien potensial kita kabur hanya karena sebuah gambar yang tidak teroptimalisasi dengan baik.

Di sini saya akan menyampaikan beberapa tips cara mengoptimalkan gambar untuk website. Hal pertama yang perlu diketahui adalah format gambar yang umum digunakan untuk web, perbedaannya, serta kelebihan dan kekurangannya. Dengan mengetahui hal ini akan sangat membantu kita untuk menentukan format file yang cocok untuk gambar kita.

JPEG (Joint Photographic Experts Group)

Format ini adalah format yang paling umum digunakan karena kemampuannya untuk menampikan foto dengan kualitas baik namun dengan ukuran file yang relatif kecil. Keunggulan lain dari format ini adalah fleksibilitasnya. Format JPEG dapat ditampilkan di semua perangkat komputer apapun operating system-nya. Jika gambar kita berupa foto yang kaya dengan warna, maka sebaiknya pilih format ini. JPEG mendukung sampai 16 juta warna, sehingga kita tidak akan mengalami distorsi warna yang berarti pada foto kita.

PNG (Portable Network Graphic)

PNG merupakan format kedua paling populer di jagat internet setelah JPEG.  Kelebihan utamanya adalah mendukung transparansi seperti format GIF namun dengan ukuran file yang lebih kecil. Ada dua macam format PNG yang biasa digunakan untuk keperluan web, yaitu PNG 8 bit dan PNG 24 bit. Keduanya memiliki kelebihan dan kekurangan masing-masing.

PNG 8 biasa digunakan untuk gambar-gambar yang memiliki warna solid seperti kartun dan logo. Apabila gambar kita berupa gambar kartun atau logo yang memiliki warna-warna solid maka gunakanlah format file PNG 8. Namun, jika gambar kita merupakan sebuah foto dan kita memerlukan background transparan maka kita bisa menggunakan PNG 24.

GIF (Graphics Interchange Format)

Format GIF biasa digunakan untuk gambar animasi bergerak. GIF umum digunakan untuk animasi karena format JPEG dan PNG tidak mendukung hal ini. Jika gambar kita bukan merupakan gambar animasi maka lupakan format file ini, karena ukurannya akan sangat besar dan warnanya akan sangat terdistorsi.

Optimalisasi Gambar Untuk Web dengan Photoshop

Buka gambar yang ingin di optimalkan di photoshop, lalu pergi ke menu
File > Save for Web & Device (Ctrl+Alt+Shift+S)

Sisi kanan merupakan gambar original dan sisi kiri adalah gambar yang telah dioptimalkan. Perhatikan sisi sebelah kanan. Ukuran file originalnya adalah 704K. Sangat besar untuk sebuah gambar web. Coba bandingkan ukurannya dengan gambar sebelah kiri yang ukurannya 91K. Waw, perbedaannya sangat besar bukan? Dengan kualitas yang sama perbedaannya hampir sepuluh kali lipat .

Angka 5 sec @ 256Kbps artinya gambar kita akan bisa ditampilkan sempurna setelah 5 detik dengan menggunakan koneksi internet yang kecepatannya 256Kbps. Kita bisa mengatur kecepatan internet kita dengan meng-klik tanda panah kecil disamping angka tersebut.

Di kanan atas terdapat kolom pengaturan format file (JPEG,PNG,GIF), kualitas serta ukuran gambar. Karena gambar yang akan saya optimalisasi berupa foto yang memiliki ribuan warna maka saya menggunakan format JPEG. Ubah angka di kolom quality sampai gambar benar-benar terlihat baik sesuai kebutuhan. Setelah puas hasil optimalisasi, klik save lalu simpan gambar di komputer kita

Tips : Kita perlu mempertimbangkan juga untuk siapa gambar kita. Jika kira-kira orang yang melihat web kita memiliki koneksi internet yang cepat maka kita bisa memperbesar kualitas gambar sampai ke quality 80-100.

Hasil Optimalisasi Gambar Web di Photoshop

Optimalisasi Gambar Untuk Web dengan CorelDRAW

Sekarang kita akan optimalisasi gambar untuk web di CorelDRAW. Buka file vector CorelDRAW yang akan di eksport menjadi gambar web, kemudian pergi ke menu
File > Eksport For Web

Kebetulan gambar vector yang akan saya eksport adalah sebuah logo yang hanya memiliki dua warna utama yang solid. Oleh karena itu, saya akan eksport dengan format PNG8. Pertama ubah formatnya menjadi PNG di kolom format, setelah itu ubah color mode menjadi Paletted (8-bit). Langkah selanjutnya adalah memilih jumlah warna. Tersedia pilihan antara 2-256 warna. Di sini saya memilih angka 8.

Tips : Ceklis kolom transparency jika anda ingin gambar anda transparan.  Coba bereksperimen dengan mencoba berbagaimacam pilihan warna. Pilih jumlah warna paling kecil namun dengan kualitas yang baik.

Setelah itu ubah resolusi gambar dari 300 ke 72, kecuali jika anda ingin mencetak gambar yang di-eksport. Kemudian ubah ukuran gambar pada kolom width dan height sesuai kebutuhan. Size gambar sekarang menjadi 8,44KB, jauh lebih kecil dibanding original file nya. Klik save as jika telah selesai.

Dibawah ini adalah hasil optimalisasi gambar untuk web dengan CorelDRAW.

Demikian tips Optimalisasi Gambar Untuk Web dari saya. Semoga bermanfaat, Kawan!

• Tweet
• "&title=""">