[Sabtu Berbagi] Optimasi Penggunaan Image pada Blog

Materi ini diberikan oleh Naili Amalia untuk [Sabtu Berbagi] pada tanggal 18 April 2015, di grup FB IIDN Makassar 

Kali ini saya diberi amanah untuk sharing informasi di Sabtu berbagi. Saya sebenarnya bingung juga mau mengisi apa. Kalau membahas soal kepenulisan rasanya saya masih jaauuuhh sekali dibandingkan teman-teman di sini yang sudah sampai menerbitkan buku. Kalau orang Jawa bilang "nggaremi segara" alias menggarami lautan. Jadi topik yang akan saya angkat lebih menjurus ke arah IT saja yang menjadi latar belakang pendidikan saya. Lebih spesifiknya saya ingin berbagi mengenai optimasi gambar di blog / website.

Sebuah gambar bisa bercerita ratusan kata sekaligus menjadi bagian yang sangat penting pada sebuah halaman website/blog. Meskipun demikan, gambar pulalah yang paling sering menghabiskan byte data dan mempengaruhi performa sebuah web. Semakin kecil byte data yang harus didownload, maka akan semakin menghemat bandwitdh client dan semakin cepat browser menampilkan halaman tersebut. Dengan mengoptimasi gambar yang ada di halaman blog kita, maka pengunjung akan lebih mudah mengakses halaman website/blog, sekaligus membuat mesin pencari mengindex gambar yang kita miliki tersebut.

Beberapa hal yang bisa kita lakukan untuk mengoptimasi gambar yang ada di halaman blog kita diantaranya :

MEMILIH FORMAT YANG TEPAT

Secara umum, ada dua tipe gambar yang ada. Gambar vektor dan gambar raster. Gambar vektor biasanya berupa kurva, garis, dan fill color (apa ya padanan kata fill color dalam bahasa indonesia?) Biasanya gambar vektor memiliki format .svg dan dihasilkan oleh program seperti Adobe Illustrator atau Inkscape. Sedangkan gambar raster merupakan sekumpulan titik atau pixel. Foto yang kita peroleh dari kamera adalah salah satu contoh gambar raster.

Setiap format gambar memiliki kelebihan dan kekurangannya masing-masing sehingga harus dipertimbangkan ketika menggunakannya di halaman web:

Gunakan format .jpg untuk gambar fotografi

Gunakan format .svg untuk vector art seperti logo dan icon. Jika .svg tidak ada, bisa juga menggunakan format .png

Gunakan format .png daripada .gif karena png memilih warna yang lebih banyak dan kompresi yang lebih baik

MENGKOMPRESI GAMBAR

Ukuran file gambar yang kecil akan mempermudah browser dalam menampilkan gambar, terutama browser pada perangkat mobile. Gunakan tools yang bisa mengkompres gambar sehingga ukurannya lebih kecil namun tetap mempertahankan kualitas gambar.

MENGGUNAKAN ATRIBUT "ALT" PADA GAMBAR

Pemasangan atribut alt akan mempermudah mesin pencari untuk mengindex gambar yang ada di website kita. Mesin pencari seperti Google tidak dapat mengenali gambar dari gambarnya. Google mengenali gambar dari atribut alt yang kita pasang untuk gambar tersebut.

Contoh kodenya :

<img scr='losari.jpg' alt='pemandangan pantai losari'>

MENGGUNAKAN ATRIBUT "TITLE" PADA GAMBAR

Selain menggunakan atribut alt, sebaiknya tambahankan atribut title agar gambar yang kita sisipkan di halaman web lebih SEO friendly.

contoh kodenya :

<img scr='losari.jpg' alt='pemandangan pantai losari' title='pantai losari makassar'>

MENGGUNAKAN NAMA FILE YANG TEPAT

Seringkali, nama file yang kita gunakan di website tidak relevan dengan gambar tersebut Misalnya sebuah foto pantai losari akan lebih relevan kalau kita beri nama 'losari.jpg' daripada '0123456.jpg' (biasanya foto dari HP atau kamera akan memiliki nama file berupa angka.

*****

Sampai disitu dulu yang bisa saya bagikan mengenai optimasi penggunaan image pada halaman website atau blog. Kalau teman-teman yang lain ingin menambakan atau menanggapi silahkan disampaikan di komentar J

Berikut ini diskusi yang berlangsung di grup FB IIDN Makassar:

Arniyati Shaleh: Ini ilmu yang keren! Terima kasih.

Abby Onety: Smart sharing. Oh ya bagaimana menyimpan/ mengubah foto ke file jpg

Mugniar: Baru tahu lho kegunaan "alt" dan "title". Saya kalau upload gambar ke blog, selalu mengecek ukuran file-nya. Kalo sampai ratusan KB saya kompres dulu, apalagi kalo sampe ukurannya MB. Ngeri kalo upload file besar-besar, cepat sekali habis kuota modem. Saya pakai Photoscape dengan mengecilkan dulu ukurannya jadi sekitar 400-an pixel panjangnya (paling besar sekitar 420 pixel, sesuai dengan ukuran lebar view blog saya), lalu kompres jadi file JPG sampe 70 atau 75%, biasanya dari ukuran MB atau ratusan KB jadi tinggal 20-an bahkan belasan KB .... lumayan berhemat

Mbak, mau tanya, kalau dapat file gambar, kemudin mau download ... saya suka melakukan hal ini: dari gambar yang terbuka (dari web-nya), saya copas ke Power Point atau One Note. Sy pikir dengan demikian lebih hemat bandwidth karena disimpan dulu di cache memory (duh mudah-mudahan ndak salah istilah saya) ... apakah benar perkiraan saya? Saya pikir lebih baik begitu daripada langsung download. Benar, tidak yah pikiran saya, Mbak Naili?

Naili Amalia soal download gambar, kalau dugaan saya sih, setiap gambar yang sudah ter-load di browser otomatis udah kita download byte datanya. kalau selanjutnya mau dicopy-paste atau disimpan itu sudah urusannya dengan memory (RAM) di PC (tdk ada kaitannya dengan jaringan internet).

Nur Sahadati Amir: Keren ilmunya kak

Andi Bunga Tongeng: Saya amat sering posting gambar dengan JPG yg berukuran 100-200an KB. Nah, saya lebih fokus di caption foto daripada title. Baru tahu kalau mesin pencari justru membaca title yah?

Mugniar: Mbak Naili, yang ini: <img scr='losari.jpg' alt='pemandangan pantai losari' title='pantai losari makassar'> ---> diselip di mana?

Marisa Agustina: Saya baru mau nanya pertanyaan yang diajukan kak Niaaar

Naili Amalia: di HTML editornya. Kalau Wordpress disediakan tuh versi yang kayak di web dan juga bentuk htmlnya.  Bisa juga di blogspot kok. Atribut alt dan title bisa ditambahkan setelah yang saya garis bawahi warna biru itu. Ternyata bisa juga dengan cara klik gambarnya, kemudian pilih properties . Isi deh title sama alt-nya.

Sekadar tambahan info aja, kalau misalnya gambar yg kita taruh di situs terlalu besar atau internetnya sedang lambat sehingga gambar tidak berhasil di-load, maka browser akan menampilkan atribut atl sebagai pengganti gambarnya. Jadi memang sebaiknya atribut alt ini diisi

Marisa Agustina: Makasih, mbak Naili share ilmunya.

Mugniar: Hm, mesti belajar pelan-pelan nih. Sudah agak lalod sama yang beginian tapi sudah mulai ngerti. Oya Mbak Naili, kalau insert gambar dengan memakai insert URL gambar, langsung dari sumbernya itu menghemat bandwidth, ndak?

Naili Amalia: kalau dari sudut pandang kita sebagai penulis di halaman blog ya insert URL bakal lebih hemat. kan kita gak perlu upload gambarnya. Hanya sisi servernya aja yang membaca... bener gak sih? #malah balik tanya

Arniyati Shaleh: Ini bandwith yang saya tunggu penjelasannya. Ma kasih Kak Niar

Mugniar Bundanya Fiqthiya Ooh Kak Arniyati Shaleh bertanya tentang bandwidth, Mbak Naili Amalia. Saya rada-rada ngerti karena basic saya dulu dari Elektro dan pernah belajar IT sedikit, sudah biasa dengan istilah bandwidth. Naah penjelasan simpelnya for dummies apa ya, Mbak Naili Amalia? Saya bingung menjelaskannya hehehe

Ida Sulawati Kerennya ilmunya, baru ka’ bisa buka FB. Istilah-istilahnya bikin dahiku berkerut sambil garuk-garuk jidat. Hehe

Naili Amalia: bandwidth itu maksudnya lebar (jalur) data yang bisa dilalui per satuan waktu (detik). Analoginya kira-kira seperti pipa dan air. Air = data dan pipa = bandwidth. makin besar pipa, makin banyak air yang bisa lewat per detiknya.

Erlina Ayu:  Wah...makasih infonya, Mbak.