Optimasi Gambar pada WEB maupun Blog

Era sekarang dan era tahun jadul memang beda dalam penggunaan Internet, dan perbedaannya sangat mencolok, bayangkan saja, dari 10 orang populasi 4 diantaranya adalah pengguna Internet entah itu sekadar browsing atau Social Networking/Media. Sedangkan sekarang rata-rata Web didominasi ketat oleh gambar dan Video, berbeda dengan tahun para Nabi yang masih banyak cuma berisi Teks.

Sejalan dengan berkembang biaknya teknologi Web dan beragamnya konten gambar dan video tidak sejalan dan seirama dengan kecepatan akses Internet di tiap lokasi, ada yang keceptan akses nya sampai diatas puluhan Mbps, lha kita-kita masih standart 1.3 Mbps.. itupun kadang masih dibagi sama teman. :( #Ngenes

Bagi kamu Webdesigner atau para Image Builder atau para Pengisi konten-konten Web atau Blogger-blogger kasian kayak saya, ya sepatutnyalah Blognya itu Loadingnya jangan dibikin Lemot, pake Gambar superbesar atau ditambah Widget-Widget gak penting banget :) dan perhatikan pula ukuran file gambar kalo mau upload.

Berikut beberpa TIPS buat kamu biar loading WEB nya nggak lemot-lemot amat (dari segi Image)

1. Pakai Format gambar yang sesuai.

Dalam dunia per - Web an, sering dijumpai ada format gambar berupa .JPG lalu .PNG lalu .GIF dll, nah biasanya para Blogger terutama, selalu pakai format .JPG untuk segala keperluan entah itu untuk Ilustrasi, Wallpaper, Thumbnail, Profile Photo bahkan ada yang dipake buat icon.

Begini, kalo untuk Thumbnail dan Ilustrasi gambar ya sebaiknya pakai .JPG, kalo .GIF ya untuk animasi sederhana atau dipake dalam Sprite CSS, kalo .ICO tentu saja buat icon, kalo untuk .PNG ya jangan dipakai, selain karena ukuran filenya besar dan kegunaanya sering ndak cocok buat Web, karena PNG kan biasanya untuk Photo Professional.

2. CSS Sprite untuk Background

Ingin punya Web/Blog tapi template yang dipakai tidak ber-background alias dengan pola warna saja, itupun putih dan tidak bervariasi, sedangkan kalo pasang background entar jadi lambat karena kudu me-load gambar besar yang dipakai sebagai background ???
pakai saja CSS sprite... gambar yang kamu pakai ukurannya kecil, paling cuma 3-8 Kb, tapi akan diulang seluas halamn Web mu. :)

3. Pakai 2 versi untuk Image Gallery

Image gallery ada disetiap Web atau Blog, ingat Thumbnail ingat juga Image Gallery, apa maksudnya?, Image Gallery disini maksudnya setiap kamu mem-posting berita dan didalamnya ada file Gambar, secara otomatis akan terjadi 2 versi, yaitu file versi asli dn file versi thumbnail, versi asli akan dipakai dalam ilustrasi postingan dan di Load scara keseluruhan sedangkan versi thumbnail akan dipakai oleh Google sebagai Web crawl dan Web Search.

Nah, jika kamu pakai tag seperti ini:

<img src='image.jpg' width=100px height=100px>

ukuran gambar = 300 kb.
resolusi = 900 x 500.
parameter widht = 100 dan height = 100

itu artinya kamu akan meload Image ukuran gambar 300 kb tapi ditampilkan dengan ukuran lebih kecil, proses request Image akan tetap sama, kalo ada 5 gambar seperti diatas, maka loading halaman dengan gambar akan sampai 3 Mb. Gede amat, loadingnya Lemot tau.

Maka, buatlah 2 versi.. versi asli dan thumbnail, versi besar dan versi kecil. kalo versi besar 300 kb, versi kecil nya 30 kb dan jumlah gambar ada 10, maka kamu akan hemat loading sekitar 20 %.

4. Pakai Server Sendiri Dong

Yang harus diingat, jangan pakai gambar milik orang lain, untuk jaga-jaga :
a). Bagaimana kalo pemilik gambar menghapus gambar tersebut.
b). Bagaimana jika gambar itu diberi Hak Cipta.
c). Hahaha, browser bakal request ke server lain dan tentu menghambat loading... :D

Untung saja Blogger pakai server Google, jadi ya dihitung punya sendiri.

Sekian Tips nya, moga Bermanfaat.