6 Tips Optimasi Gambar Untuk Web

Suatu web dikatakan bagus dari segi desain, bila di dalamnya terdapat perpaduan antara gambar dan tulisan dengan komposisi dan tata letak yang tepat. Banyak dari kita mungkin sangat hobi menampilkan banyak gambar di dalam postingan, baik itu dalam format jpg, gif, png, atau bahkan bmp. Tidak salah, dan sah-sah saja jika ada blogger yang menerapkan prinsip itu (“Tidak bisa ngeblog tanpa seribu gambar“). Tapi tahukah anda bahwa pengaturan dan komposisi gambar yang tidak benar dapat menurunkan performa atau kecepatan blog itu sendiri?

Sangat penting untuk diperhatikan bahwa dalam menampilkan gambar pun harus mempunyai aturan dan teknik tertentu agar tidak terlalu menurunkan performa blog itu sendiri. Adapun mengenai anggapan bahwa blog tanpa gambar itu lebih baik, sepertinya hal itu perlu ditinjau ulang berdasarkan kriteria dari blog tersebut. Tidaklah mungkin blog yang berkategori fotografi menerapkan prinsip “Tanpa gambar lebih baik“. Yang bisa kita lakukan adalah mengoptimasi gambar yang ditampilkan, baik itu dari segi jumlah, format gambar, kualitas, maupun ukurannya.

Beberapa hal yang bisa dilakukan untuk mengoptimalkan performa blog berdasarkan penggunaan gambar:

1. Pilihlah format gambar yang sesuai.

Ada beberapa format gambar yang kita kenal baik, antara lain bmp, jpg, gif, dan png. Masing-masing dari format tersebut mempunyai keunggulan. Dari keempat format gambar di atas, ada satu yang harus kita buang jauh-jauh jika kita ingin menampilkannya di blog, yaitu format bmp (bitmap). Lupakan bmp, karena ukuran filenya yang terlalu besar.

Untuk format jpg, gif, dan png, kita harus memilih mana-mana dari ketiganya yang mempunyai ukuran file paling kecil untuk kwalitas yang sama. Namun sebelumnya kita perlu mengetahui perbedaan-perbedaan mendasar antara ketiga format gambar tersebut. Berikut ini saya mengutip beberapa paragraf dari blog bakawan, salah seorang desainer web asal bandung, tentang ketiga macam format gambar di atas:

GIF ( Graphics Interchange Format)

• Gambar berformat gif mempunyai kombinasi warna sebanyak 256 warna. Jumlah kombinasi ini cukup membuatnya dipakai bagi keperluan grafis apapun, kecuali untuk keperluan photografi.
• Gif bisa dibuat animasi
• Gif mempunyai kemampuan mengkompres area-area gambar sewarna. Dengan kemampuan ini, banyak item-item grafis website bisa didesain dgn ukuran sekecil mungkin
• Gif mempunyai dua fitur menarik, yaitu Transparency dan Interlancing. Transparency memungkinkan seorang designer dapat mendesign background sebuah image itu menjadi transparan, sedangkan Interlancing akan menciptakan ilusi seolah gambar gif itu lebih cepat loadingnya.
• Gambar gif sebaiknya dipakai untuk logo, line drawing, dan icons.

JPEG/JPG

• Format gambar jpeg bisa mensupport sampai 16.7 juta warna. Jumlah tersebut cukup untuk keperluan apapun bahkan pencitraan warna yg tidak bisa dicerna mata manusia.
• Selain jumlah kombinasi warna, perbedaan jpg dgn gif itu terletak pada algoritma kompresi. Berbeda dengan gif, algoritma kompresi jpeg bekerja dengan meresonansi informasi-informasi gambar keluar.
• File jpeg dapat disimpan sebagai jpeg progresif. Format ini mirip dengan gif yg mempunyai fitur interlacing. Seperti halnya gif, mula-mula browser akan menampilkan gambar berkualitas rendah bagi pengunjung web dan kemudian perlahan meningkatkan kualitasnya sesuai aslinya.
• Gambar jpeg biasanya dipakai sebagai gambar hasil fotografi dan digunakan bagi gambar-gambar yang memiliki kombinasi warna lebih dari 256.

PNG (Portable Network Graphics)

• PNG merupakan format gambar terbaru. PNG dikembangkan pada tahun 1995. Tujuan pengembangannya ialah demi mengatasi batasan-batasan gif. PNG didesain dengan fitur-fitur utama gif, termasuk streaming dan format file progressive.
• Dibandingkan dengan gif, png menyediakan kedalaman warna yg lebih baik, mampu melayani konversi gambar sampai kombinasi warna 24 bit.
• PNG tidak mempunya isu lisensi paten, berbeda dengan format lainnya. Oleh karena itu, diharapkan penggunaan PNG akan tersebar luas di kemudian hari, meskipun diyakini tidak akan benar-benar menggantikan gif.
• PNG mempunyai tiga kelebihan dari pada GIF, yaitu (1) Alpha channels (variable transparency). (2) Cross-platform gamma correction (kontrol untuk ketajaman/brightnes gambar) dan color correction two-dimension interlancing (metode untuk progresif display). (3) PNG mengkompres ukuran gambar lebih baik dari GIF sekitar 5% sampai 25%.

Kutipan di atas mungkin agak terlalu teknis IT bagi para newbie yang belum paham. Namun jika saya boleh menambahkan, pemilihan format gambar untuk ditampilkan pada blog tidak harus selalu berpatokan pada teori di atas. Ambillah yang mudahnya saja, yakni:

1. Pada kwalitas gambar yang sama, pilihlah gambar yang mempunyai ukuran file yang paling kecil.
2. (Optional) Pilihlah format gif jika mengutamakan interlancing (proses render yang lebih cepat).
3. (Optional) Pilihlah format png jika ingin lebih legal (sepertinya tidak berlaku bagi kebanyakan orang indonesia yang lebih mengutamakan kemudahan dibanding ke-legal-an)

2. Optimasi gambar dengan software image editor

Berbagai macam software untuk mengedit (menyunting) gambar sudah kita kenal dengan baik, antara lain adobe photoshop, gimp, irfanview, dan lain sebagainya. Di sini tidak akan dijelaskan secara mendetail bagaimana proses sunting gambarnya. Tapi yang mesti kita perhatikan dalam menyunting gambar adalah manfaatkan software-software tersebut untuk mengkompress gambar menjadi file yang lebih kecil ukurannya.

3. Meminimalisasi Jumlah Gambar

Jika ditanya, manakah yang lebih baik, menampilkan 10 buah gambar dengan berukuran masing-masing 10 KB atau menampilkan 2 buah gambar yang masing-masing berukuran 50 KB? Jawabannya adalah lebih baik menampilkan 2 gambar daripada 10 buah gambar, walaupun jumlah total dari ukuran gambar-gambar tersebut adalah sama-sama 100 KB. Dengan catatan bahwa gambar-gambar yang ditampilkan berasal dari 1 alamat domain yang sama. Mengapa?

Kebanyakan browser (peramban) akan memanggil 2 hingga 4 buah gambar yang beralamat di domain yang sama secara bersamaan. Jika ada 10 buah gambar yang akan ditampilkan (dengan masing-masing gambar beralamat di domain yang sama), maka browser akan memanggil gambar pertama-keempat, setelah itu baru memanggil gambar kelima-kedelapan, begitu seterusnya hingga semua gambar tertampilkan. Jadi penggunaan gambar yang banyak justru akan memperlambat browser dalam memanggil gambar-gambar tersebut.

4. Uploadlah gambar ke beberapa alamat domain/subdomain yang berbeda

Terkait dengan poin ke-3 di atas, jika hendak menampilkan gambar dalam jumlah yang banyak, maka masalah ini dapat ditanggulangi dengan mengupload gambar-gambar tersebut ke beberapa alamat domain/subdomain yang berbeda. Contohnya:

Ada 10 buah gambar yang hendak ditampilkan. Masing-masing kita upload ke beberapa alamat yang berbeda, sehingga alamat URL dari tiap gambar menjadi:

Karena browser hanya mampu memanggil antara 2-4 buah gambar yang mempunyai alamat di domain yang sama, maka jika kita mengupload kesepuluh gambar tersebut pada lokasi yang berbeda, maka browser dapat memanggil seluruh gambar secara bersamaan.

Kita bisa memanfaatkan subdomain atau blog wordpress.com sebagai media penyimpan gambar. Atau bisa juga memanfaatkan situs layanan imagehosting semacam imageshack.us, flickr.com, photobucket.com, dan lain-lain. Manfaat lain jika kita mengupload gambar ke situs-situs imagehosting di atas adalah menghemat space hardisk dan juga menghemat bandwidth. Hal ini telah dijelaskan sebelumnya di postingan saya tentang Tips menghemat paket bandwidth.

5. Jangan lupakan atribut “width” dan “height” di kode html gambar yang hendak ditampilkan

Ketika akan menampilkan gambar, browser akan menganalisa terlebih dahulu atribut-atribut dalam kode html gambar tersebut. Sebagai contoh, dua kode html berikut sama-sama menampilkan sebuah gambar.

Ketika browser menemukan atribut “width” dan “height”, maka browser akan langsung menentukan panjang dan lebar gambar itu. Namun jika kode html TIDAK mengandung atribut “width” dan “height”, maka hal tersebut tentunya akan memakan waktu lebih lama bagi browser untuk mencari dan kemudian menentukan panjang dan lebar gambar tersebut. Hal ini memang tidak terlalu berpengaruh secara signifikan, namun jika kita ingin mengoptimasi gambar secara maksimal, maka lakukanlah.

6. Jangan lupakan juga atribut ALT dan TITLE

Atribut ALT memang tidak berpengaruh untuk optimasi kecepatan, namun berpengaruh di sisi SEO (optimasi mesin pencari). Atribut Alt dan title juga berpengaruh terhadap aksesibilitas situs.

Beberapa orang terkadang suka mematikan fitur gambar di browser yang mereka pakai. Jika dalam gambar yang kita tampilkan tidak mempunyai atribut alt, maka orang yang mengakses blog kita dengan mematikan fitur gambar tidak akan pernah tahu bahwa ada gambar di situ. Selain itu mesin pencari juga tidak akan mengindeks gambar tersebut.

Sebaiknya dalam menggunakan Alt dan title, perlu memperhatikan hal-hal berikut:

1. ALT dituliskan sebagai keyword/kata kunci yang relevan dengan artikel/gambar yang kita tulis.
2. Penulisan ALT tidak boleh terlalu panjang dan mengulang-ulang kata yang sama.
3. Penulisan TITLE sebaiknya berupa judul singkat gambar tersebut.
4. ALT lebih diutamakan daripada TITLE

Mengenai ALT dan TITLE, saya tidak bisa berkomentar lebih banyak lagi. Bagi pakar usability dan accessibility web mungkin bisa menanggapinya.

–o0o–

Dari ke-enam point di atas, point terakhir merupakan teknik optimasi dari sisi SEO. Selebihnya merupakan teknik optimasi untuk meningkatkan performa atau kecepatan loading halaman. Bagi yang ingin menambahkan atau mengoreksi, silahkan ungkapkan melalui kolom komentar di bawah.

Referensi:
http://www.bakawan.com/
http://www.prelovac.com/vladimir/

Credit gambar:
www.telerikwatch.com

Update:

7. Menampilkan tumbhnail dalam posting jika gambar tersebut besar dimensinya. [Terima kasih buat abrari atas tambahannya]

Lebih baik jika hendak menampilkan gambar yang besar dimensinya, cukuplah kita menampilkan dalam bentuk tumbhnail-nya saja. Tumbhnail adalah gambar replika yang merujuk kepada gambar aslinya melalui link. Jika kita hendak menampilkan suatu gambar yang besar (katakanlah berukuran 1024×768), maka sebaiknya kita membuat satu buah gambar lagi yg lebih kecil ukurannya (misal: 200×150). Contohnya:

Contoh Tumbhnail

Tumbhnail tersebut kita arahkan/tautkan ke gambar aslinya yang berukuran besar, sehingga begitu pengunjung ingin melihatnya, cukuplah meng-klik tumbhnail tersebut. Manfaat dari tumbhnail ini adalah kita tidak perlu direpotkan mendownload gambar aslinya yang berukuran besar. Cukuplah menampilkan replikanya saja yang berukuran kecil.

Hal-hal yang perlu diperhatikan dalam penggunaan atribut ALT dan TITLE pada gambar: [Dikutip beberapa diantaranya dari daniiswara.Net]

• Menampilkan informasi serupa seperti yang ditampilkan oleh format gambar
• Bukan pengulangan kata. Dan sebaiknya tidak persis sama dengan teks yang sudah tertulsi di sekitar konten.
• Tidak menggunakan kata-kata seperti “gambar, image, logo, dll” karena gambar itu sudah jelas menggambarkan bahwa itu sebuah gambar
• ALT dapat berupa deskripsi.
• Setiap gambar harus menggunakan ALT. Jika gambar tersebut hanya hiasan saja, sebaiknya menuliskan ALT sebagai alt=” ” (tidak usah menuliskan deskripsinya, cukup atributnya saja)
• WCAG (Web Content Accessibility Guidelines) merekomendasikan jumlah huruf yang seharusnya digunakan sebagai deskripsi ALT adalah kurang dari 100 karakter (untuk bahasa inggris), 115 karakter (bahasa jerman), dan 90 karakter (korea).

Kesimpulannya, peran atribut ALT sangat penting dalam menunjang aksesibilitas web. Agar pengguna/pengunjung tidak kehilangan informasi dan fungsi. Penggunaan berlebihan kadang terjadi demi optimasi mesin pencari Internet (SEO).

Untuk lebih lengkap dan jelasnya silahkan merujuk pada link berikut:

http://daniiswara.net/2009/05/07/teks-alternatif-untuk-atribut-alt/
http://www.w3.org/TR/WCAG20-HTML-TECHS/G94.html
http://www.w3.org/TR/WCAG20-HTML-TECHS/H37.html
http://jimthatcher.com/webcourse2.htm
http://www.webaim.org/techniques/alttext/
http://html.cita.uiuc.edu/text/dec/

Artikel yang berhubungan:

1. ImageShack Diserang, Gambar Saya Hilang
2. Optimasi JavaScript (1) : Pendahuluan
3. 6 Tips Memaksimalkan Kecepatan Loading Blog WordPress.Com
4. Optimasi JavaScript (2) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer
5. Tips Menghemat Paket Bandwidth
6. Posting Lewat Email untuk Pengguna WordPress.Com
7. Sniplet Untuk Tag Judul yang SEO Friendly (Update)