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 narablog yang menerapkan prinsip itu (“Tidak bisa ngeblog tanpa seribu gambar”). Tapi tahukah, 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 atau kecepatan itu sendiri. Adapun mengenai anggapan bahwa sebuah blog tanpa gambar itu lebih baik, sepertinya hal itu perlu ditinjau ulang berdasarkan kriteria 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.

Hal-hal yang dapat 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:

   1. 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.

   2. 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 peramban 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.

   3. 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. Meminimalisir 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 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 peramban 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 peramban 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:

   1. http://rismaka.com/gambar1.jpg
   2. http://rismaka.com/gambar2.jpg
   3. http://rismaka.com/gambar3.jpg
   4. http://rismaka.com/gambar4.jpg
   
   5. http://rismaka.org/gambar1.jpg
   6. http://rismaka.org/gambar2.jpg
   7. http://rismaka.org/gambar3.jpg
   8. http://rismaka.org/gambar4.jpg
   
   9. http://rismaka.info/gambar1.jpg
   10. http://rismaka.info/gambar2.jpg
   

   Karena peramban 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 peramban 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, 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, peramban akan menganalisa terlebih dahulu atribut-atribut dalam kode html gambar tersebut. Sebagai contoh, dua kode html berikut sama-sama menampilkan sebuah gambar.

   <img src="http://www.rismaka.net/gambar1.jpg" width="300" height="100" />
   

   <img src="http://www.rismaka.net/gambar1.jpg" />
   

   Ketika peramban menemukan atribut "width" dan "height", maka peramban 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 peramban 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 atribut ALT

   Atribut ALT mungkin tidak berpengaruh untuk optimasi kecepatan, namun berpengaruh di sisi SEO. Atribut Alt juga berpengaruh terhadap aksesibilitas atau keterbacaan suatu web bagi pembaca.

   

   <img src="http://img196.imageshack.us/img196/6505/mawarmerah.jpg" width="150" height="149" alt="bunga mawar yang berwarna merah" title="mawar merah" />
   

   Beberapa orang terkadang suka mematikan fitur gambar di peramban 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 di situ ada gambar. Selain itu mesin pencari juga tidak akan mengindeks gambar tersebut.

   Dalam menggunakan Alt, perhatikan hal-hal berikut:

   • ALT dituliskan sebagai keyword/kata kunci yang relevan dengan artikel/gambar yang kita tulis.
   • Penulisan ALT tidak boleh terlalu panjang dan mengulang-ulang kata yang sama.
   • ALT lebih diutamakan daripada TITLE

Update:

1. Menampilkan tumbhnail dalam posting jika gambar tersebut besar dimensinya.

   [Terima kasih untuk 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 pranala. 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 mengunduh gambar aslinya yang berukuran besar. Cukuplah menampilkan replikanya saja yang berukuran kecil.

2. 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 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).

This entry was writen by rismaka, The Admin, A part time blogger, Biochemist, and Energy Consultant in PT. BKA. More profile on Contact.