Browse » Home » » Mempercepat Blog Dengan Optimasi Gambar Hello World !!

Mempercepat Blog Dengan Optimasi Gambar

Tutorial saya kali ini lebih umum, supaya bisa dimanfaatkan oleh semua orang terutama para blogger yang sering memasukkan gambar pengantar di dalam artikelnya. Gambar pengantar di dalam artikel menurut saya adalah sebuah keharusan, agar artikel tidak terasa monoton dan membosankan. Dan di sini, saya akan memberikan tips agar gambar pengantar tersebut bisa lebih optimal, sehingga tidak terlalu memberatkan loading blog anda tanpa harus mengorbankan kualitas gambar.
[break]
Di dalam dunia blogging, ada beberapa format gambar yang umum dipakai, yaitu :

1. Graphics Interchange Format (GIF) adalah format gambar yang (dulu) sering digunakan untuk desain website. GIF memiliki kombinasi warna lebih sedikit dibanding JPEG (hanya mendukung 256 warna), namun dapat menyimpan gambar dengan latar belakang (background) transparan atau dalam bentuk animasi sederhana. Berhubung GIF sudah jarang dipakai, maka pada artikel ini saya tidak membahasnya terlalu jauh.

2. Portable Network Graphics (PNG) adalah format gambar yang dibuat sebagai pengganti dari GIF. Sama dengan GIF, PNG dapat menyimpan gambar dengan latar belakang transparan. Namun PNG memiliki beberapa kelebihan dibanding GIF. Salah satu kelebihan PNG yang kentara adalah dukungan warna yang lebih banyak dan tingkat kompresi yang lebih tinggi dengan tetap menjaga kualitas gambar (Loss-less Compression)

3. Joint Photographic Experts Group (JPEG) adalah format gambar yang paling umum digunakan terutama untuk foto. Dengan JPEG, gambar berukuran besar bisa dikompresi menjadi kecil. Namun karena JPEG bersifat Lossy, berarti setiap kali kita meninggikan tingkat kompresi, maka kualitas gambar juga akan semakin buruk.
[break]

Optimasi Gambar Dengan Photoshop

Seperti yang telah saya utarakan di atas, optimasi gambar yang saya bahas di artikel ini hanya format JPEG dan PNG, karena memang 2 format gambar ini yang umum dipakai.

Untuk mengoptimalkan gambar dengan Photoshop, kita bisa melakukannya melalui menubar File > Save For Web & Devices…

JPEG

Untuk pengaturan JPEG, opsi Quality yang tersedia adalah 0-100. 0 berarti file size yang dihasilkan kecil, tapi kualitas gambar buruk (pixelated/terlihat kotak-kotak). Bila anda memilih 100, maka file size yang dihasilkan besar, tapi kualitas gambar bagus. Berdasarkan pengalaman saya, optimasi ter-efektif untuk JPEG adalah dengan menentukan tingkat Quality ke 30 atau 40. Dan jangan lupa juga untuk mencentang opsi Optimized tentu saja.

Sebagai contoh perbandingan kualitas JPEG 0 sampai 100 bisa anda lihat gambar di bawah ini. (klik untuk melihat gambar versi besar)

Sebenarnya anda bisa mengoptimalkan gambar JPEG lebih jauh, dengan mencentang opsi Progressive. Namun sayangnya Internet Explorer tidak bisa membaca format JPEG Progressive. Jadi saya sarankan untuk tidak menggunakan JPEG progressive supaya gambar anda bisa muncul di semua browser.

Namun untuk menambah pengetahuan saja tentang bagaimana perbedaan cara load antara JPEG normal (optimized) dengan JPEG Progressive, bisa anda lihat contoh perbedaan JPEG Normal Optimized dengan JPEG Progressive (Gunakan browser non-IE).
[break]

PNG

Ada 2 opsi simpan PNG di Photoshop, yaitu PNG-8 dan PNG-24. Untuk PNG-8 kurang lebih sama dengan GIF. PNG-8 hanya mendukung 256 warna (warna dasar web). Sehingga hasilnya tidak akan sebagus PNG-24. Sebagai contoh, dibawah ini adalah gambar PNG-8 (transparan)…

Bandingkan dengan gambar PNG-24 (transparan) dari artikel Sony Ericsson Xperia Play…

Kesimpulan

Bila anda menginginkan gambar yang mendetail atau tajam misalnya untuk logo blog, saran saya selalu gunakan PNG. File size yang dihasilkan mungkin akan lebih besar daripada JPEG, tapi hasilnya tidak akan terlihat buruk. (Logo adalah bagian pencitraan dari sebuah blog, jadi usahakan logo tampil dalam kualitas yang baik/tajam)

Sedangkan untuk foto atau gambar yang lebih ditujukan sebagai gambar pengantar blog, JPEG dengan tingkat Quality 30 atau 40 adalah format terbaik. Walaupun kualitas gambar yang dihasilkan mungkin tidak sebaik PNG, tapi yang pasti load blog anda tidak akan berat.
[break]

Optimasi Ekstra

Photoshop adalah aplikasi pengolah gambar yang cukup bisa diandalkan untuk mengoptimasi gambar blog kita. Namun menurut saya, hasil optimasi yang dihasilkan masih kurang sempurna. Karena itu dibutuhkan aplikasi tambahan. Dan aplikasi (gratis) yang saya rekomendasikan adalah :

1. Radical Image Optimization Tool (RIOT) (Windows)