Tips Optimasi Gambar di Website Anda

Apakah Anda seorang yang pernah bermain “Temukan 5 Perbedaan” dalam 2 gambar yang serupa tapi tak sama? Pernah ataupun tidak, mari bersama-sama kita mencoba mencari perbedaan dari 2 gambar bunga dibawah, mungkin tidak perlu detail setiap titik demi titik dalam gambar, karena kedua gambar berikut rencananya akan terpasang sebagai aksesoris di website yang kemungkinan akan terlihat secara sekilas dalam 10 – 20 detik saja. Oke, Sekarang, Mari bersama – sama kita perhatikan kedua gambar di bawah ini:

Gambar A

Gambar B

Apakah secara sekilas Anda dapat menemukan perbedaan antara keduanya? Ada baiknya Anda menjawab dulu pertanyaan ini, dengan isi kolom komentar dibagian bawah, sebelum me-lanjutkan membaca artikel ini sampai selesai.

Gambar A adalah gambar dimensi 800px dengan standart kualitas Maksimal menghasilkan ukuran = 514KB. Sedangkan Gambar B adalah gambar dimensi 800px dengan standart kualitas Minimum menghasilkan ukuran < 60KB. Jauh lebih ringan, dengan hasil yang tidak nampak berbeda. Terutama jika dipasang di website anda, gambar B bisa tampil jauh lebih cepat.

Nah, bila anda ingin gambar-gambar di website anda jadi jauh lebih ringan seperti gambar B. Maka berikut saya berikan sejumlah tips optimasi gambar yang seringkali saya gunakan. Semoga bermanfaat.

1. Pilih format / ekstensi gambar yang sesuai.  

Berikut adalah tiga jenis file yang cocok untuk web anda. Pastikan gambar-gambar yang ada di web anda jatuh di kategori ekstensi yang tepat.

GIF: Format atau ekstensi gambar ini memiliki kedalaman warna 256 dan memiliki pixel transparan. Sangat cocok digunakan untuk grafik, poin-poin, ikon, tombol.

JPG: Format atau ekstensi gambar ini sangat cocok digunakan untuk gambar – gambar yang memiliki jutaan warna. Misalnya foto gallery, foto product, dan gambar – gambar yang membutuhkan warna gradien. Karena format ini bisa menghasilkan gambar yang bagus, pasti ukurannya juga jadi lebih besar. Namun Anda tidak perlu khawatir. Ada banyak sekali tools atau alat yang dapat anda gunakan untuk optimasi ukuran tanpa mengurangi resolusinya. Misalnya “Save for Web” milik Photoshop, atau edit foto dengan  IrfanView.

PNG: Format atau ekstensi gambar ini hampir sama dengan format GIF. Namun format ini memiliki macam warna yang lebih banyak, dengan ukuran yang lebih besar. Ada banyak pula tools yang dapat anda gunakan untuk optimasi. Misalnya TinyPNG.

2. Beberapa aturan ketika optimasi sebuah gambar. 

Ada sejumlah aturan yang perlu anda taati ketika edit sebuah gambar.

Simpan file original atau file mentah gambar Anda. File ini bisa berupa gambar yang memiliki resolusi tinggi, atau jika Anda membuat sendiri icon dan button dengan Photoshop, Anda bisa menyimpan file .psd anda untuk digunakan di lain waktu.

Gunakan kompresi rate gambar yang sesuai. Misalnya jika kita akan menggunakan gambar sebagai foto, makan gunakan kompresi menengah ke atas. 60% sampai 90%. Namun jika Anda membuat gambar background, Anda bisa menggunakan kompresi seminimal mungkin. Dalam Photoshop, fitur kompresi ini sudah disediakan jika anda menyimpan melalui opsi “Save for Web”.

Gunakan seperlunya. Jika sebuah efek bisa ditampilkan dengan sulap script HTML dan CSS, maka jangan gunakan gambar untuk menampilkan efek tersebut. Gunakan sulap kombinasi HTML dan CSS anda.

Simpan dalam Progresif. Jika anda gunakan “Save for Web” pada Photoshop, ada opsi kecil yaitu progresif. Pastikan gambar JPG anda selalu tersimpan dengan opsi ini. Karena opsi ini akan memberikan gambar JPG Anda kemampuan untuk tampil dulu secara keseluruhan dengan kualitas rendah dan berangsur angsur menuju ke kualitas yang sebenarnya ketika diakses secara online.

3. Beberapa tools untuk Optimasi gambar Anda. 

Untungnya optimasi gambar telah dilengkapi sejumlah alat bantuan. Dengan demikian, pekerjaan anda bisa jadi jauh lebih mudah.

TinyPNG adalah sebuah website yang menyediakan tools untuk kompres ukuran gambar bertipe PNG.

Smush.it juga salah salah satu dari sekian banyak website yang menyediakan tools untuk kompresi gambar.

Photoshop merupakan best bet anda. Di dalamnya ada fitur “Save for Web” untuk mengkompresi gambar yang dikhususkan untuk penggunaan dalam website. Anda cukup buka File > Save for Web.

Script. Misalnya jQuery Lazy Load.

Kenapa Gambar di Web Anda harus Dioptimasi?

Berikut adalah sejumlah hal yang dapat anda pertimbangkan:

Bandwidth. Semakin kecil ukuran gambar, maka penggunaan bandwidth server akan semakin hemat. Coba bayangkan bila dalam 1 halaman terdapat 5 gambar dengan ukuran rata-rata yang besar. Misalnya 500KB. Maka dalam 1 kali loading saja, halaman Anda akan memakan bandwidth kurang lebih 2.5MB. Sekarang kalikan dengan jumlah pengakses website Anda tiap harinya. Mungkin mecapai lebih dari 1000 pengunjung.

Tempat Penyimpanan Data. Jika kapasitas hosting / server adalah 1 GB, dengan ukuran gambar rata-rata 500Kb, maka Anda kurang lebih hanya bisa menampung 2000 gambar. Sedangkan jika website anda mainly digunakan untuk menampilkan gambar, misalnya toko online, pasti dong space hosting Anda akan cepat habis.

Harga. Jika anda bisa optimasi gambar, pastinya penggunaan bandwidth dan space hosting Anda akan berkurang. Begitu pula dengan cost yang harus anda keluarkan.

Pengunjung. Jika halaman web Anda cepat tampilnya, maka nilai bounce rate (yaitu pengunjung yang sekali buka langsung menutup) akan jadi lebih kecil. Pengujung akan lebih nyaman surfing di halaman web Anda.

Waktu yang dibutuhkan untuk loading sebuah halaman website merupakan sebuah tantangan yang harus dihadapi oleh seorang designer atau programer. Meskipun tampilan website Anda super bagus, namun jika sekali loading saja butuh waktu yang sangat lama, percuma saja. Bounce rate nya akan tinggi. Sayang sekali bukan? Bagaimana dengan gambar anda?

Sumber : http://mediabisnisonline.com/