Optimasi Gambar Untuk Web

Web saat ini tidaklah sama dengan era web di tahun 90-an. Dulu  web didominasi oleh teks dan sedikit gambar, namun sekarang  web didominasi t oleh gambar,  animasi dan video. Seiring dengan berkembangnya internet, makin banyak pula penggunanya. saat ini pengguna internet sudah diatas 2 Milyar, itu artinya 2 dari 7 orang di dunia mengakses internet.

Sayangnya perkembangan pengakses internet dan makin beragamnya  isi website tidak diimbangi dengan kecepatan akses di setiap lokasi. Kadang, disuatu tempat akses internet bisa mencapai 10 Mbps sedangkan di lokasi lain hanya dibawah 1Mbps, itupun masih dibagi dengan beberapa pengguna.

Sebagai pengisi kontent web atau webdesigner, sudah selayaknya anda memperhatikan ukuran file gambar yang akan dipasang di website . Berikut ini adalah tips tips untuk mengoptimasi gambar agar loading website anda lebih cepat.

1. Gunakan format yang tepat   sesuai kebutuhan

Ada 3 format gambar yang paling sering ditemukan di web diantaranya adalah PNG, jpg dan gif. Tip praktis dalam penggunaannya adalah, gunakan PNG hanya untuk gambar Wallpaper atau photo profesional, bukan untuk gambar thumbnail atau gambar background website.  Gunakan Gif untuk sprite CSS atau untuk animasi sederhana dan gunakan JPG untuk thumbnail gambar, ilustrasi artikel atau foto profile.

Format gambar untuk satu gambar yang sama, terlihat jpg mempunyai ukuran yang paling kecil

Dari segi ukuran file, PNG mempunyai ukuran yang sangat besar. Itulah  mengapa file ini tidak cocok untuk background halaman atau ilustrasi , sedangkan file gif tidak  hanya bisa menyimpan warna yang lebih sedikit dibanding Jpg atau png.

2. Buatlah dua versi untuk gambar Gallery

Hampir setiap website mempunyai gallery gambar, buatlah 2 versi untuk masing masing gambar. Yang pertama berupa thumbnail dan yang kedua adalah file aslinya. Jangan membiasakan menggukan tag

<img src='gambar.jpg' width=200px height=200px>

jika ukuran gambar anda 200kb dengan resolusi 1024×768 dan anda mengunakan parameter width dan height seperti diatas, itu sama aja meload gambar dengan ukuran  200kb namun di tampilkan dengan ukuran lebih kecil. Proses download akan sama.  Bayangkan jika di gallery mengandung 10 file, maka anda meload 2MByte gambar sekaligus.

Sekarang , misal anda membuat dua versi, versi besar dan kecil untuk masing masing gambar. Versi besar 200kb hanya diampilkan jika user mengklik thumbnail dan versi kecil ukurannya 20kb. Maka sekali load halaman gallery yang berisi 10 gambar hanya butuh 200kb, sekitar 10% dari total load kalau tidak dibuat thumbnail,  tampilan halaman akan di load 10x lipat lebih cepat.

3. Gunakan CSS Sprite untuk background  Halaman.

Website dengan background kosong memang terasa hambar, itulah mengapa banyak website dengan background wallpaper atau pola.  Jika anda ingin agar website anda diberi background gambar, gunakan saja CSS sprite, ukuran gambar hanya 1-5kb, namun akan di ulang seluas halaman web. Sedangkan jika anda menggunakan background image  dengan teknik

<body background="image.jpg">

sangat tidak disarankan, mengingat kita tidak tahu ukuran layar dari si pengakses dan hal itu juga akan meperlambat loading halaman website.

4. Gunakan huruf kecil untuk nama file 

ketika anda membuat halaman website di Windows, hal ini tidak akan mengalami masalah, namun berbeda saat di hosting di server yang umumnya menggunakan linux. jika nama file gambar anda adalah “gambarKEREN.jpg” sedangkan di websitenya anda panggil dengan

<img src='gambarkeren.jpg' alt="gambar keren">

Ada kemungkinan gambar anda tidak akan tampil. Ini karena server Linux membedakan huruf besar dan huruf kecil.  Selalu gunakan huruf kecil untuk nama file web dan jangan ada spasi di nama filenya.

5. Simpanlah gambar di server sendiri

Kadang demi menghemat space, kita mengambil gambar dari sembarang URL website. Hal ini tidak disarankan dengan 3 alasan yaitu:

  1. Kemungkinan hak cipta dari gambar di lindungi.
  2. Gambar bisa saja sewaktu waktu dihapus oleh si pemilik website.
  3. loading halaman anda menjadi lama karena browser akan mencari gambar di server lain.

Demikian tips singkat bagaimana mengoptimasi gambar untuk website. Semoga bermanfaat!

Website Wajib Mobile developer

trend mobile sangat menggema beberapa tahun terakhir. Menurut data dari neilsen yang dikutip oleh mobileroundup, 6 Platform yang paling populer adalah Android, Iphone (iOS), Blackberry, Windows phone, webOS dan Symbian.  Namun karena WebOS tidak  populer di indonesia maka nanti tidak akan saya sertakan websitenya. Berikut ini adalah graphic dari Market share masing masing Platform

Hal ini tentunya membawa kesempatan baru bagi para progammer mobile. Bagi anda yang ingin terjun menjadi programmer mobile, website berikut ini wajib anda kunjungi. Sekedar gambaran, sampai akhir tahun 2011, Trend mobile di dominasi oleh Android, IPhone, Blackberry, Symbian dan yang terakhir Windows Phone. Tentunya anda tidak harus menguasai semuanya, namun cukup ambil salah satu dan dalami, langsung cekidot gan!

Android

Website: developer.android.com

iOS Iphone

Website:http://developer.apple.com/devcenter/ios/index.action

Blackberry OS

Website:http://us.blackberry.com/developers/

Windows Phone

website:http://msdn.microsoft.com/en-us/windowsmobile/bb264318

Nokia  Symbian

Website:http://www.developer.nokia.com

 

Dari semua platform diatas, Tool SDK yang free bisa kamu dapat dari Symbian, Android dan Windows Mobile, sedangkan (setahu saya) untuk Blackberry dan iPhone SDK ada lisensinya.  Nah silahkan tinggal pilih, mau menjadi developer Platfom apa? tapi dari market share dah ketahuan kan, prospek platform yang menjanjikan?

 

latest update 12 November 2012.