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.
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:
- Kemungkinan hak cipta dari gambar di lindungi.
- Gambar bisa saja sewaktu waktu dihapus oleh si pemilik website.
- loading halaman anda menjadi lama karena browser akan mencari gambar di server lain.
Demikian tips singkat bagaimana mengoptimasi gambar untuk website. Semoga bermanfaat!
