Optimasi Gambar Di Tulisan Blog

Menulis Komentar

Sudah sering kan mendengar saran agar Anda menambahkan gambar dalam setiap postingan Anda?

Selain menambah keindahan dan membuat pembaca tidak bosan –hanya-memelototi-deretan-tulisan-tanpa ujung-, ternyata gambar juga memiliki fungsi yang lain.

Coba Anda bayangkan seseorang yang mencoba melukiskan betapa enaknya BigMac yang dijual McD. Berapa ratus kata yang Anda perlukan agar orang memutuskan untuk membeli BicMac yang Anda ceritakan tadi?

Bandingkan dengan selebaran yang dibuat oleh McD sendiri, hanya memuat gambar makanan yang disebut BicMac tadi, ditambah dengan harganya. That’s it! Dan orang mengantri untuk membelinya!

Itulah ampuhnya gambar. Jika Anda menggunakannya secara tepat, dijamin pembaca blog Anda akan semakin kerasan dan melanjutkan membaca tulisan Anda sampai dengan selesai. Ilustrasi gambar akan membantu memberikan pemahaman kepada pembaca apa isi tulisan Anda.

Nah, yang sering dilupakan oleh blogger adalah melakukan optimasi pada gambar yang diupload ke dalam blognya. Jika Anda tidak melakukan optimasi pada gambar, maka gambar tersebut hanya berguna untuk pengunjung manusia saja, karena crawler mesin pencari tidak bisa membaca gambar.

Yang harus Anda lakukan adalah jangan lupa untuk memastikan Anda menambahkan atribut alt dalam setiap gambar. Contohnya seperti berikut: <img src=”images.jpg” alt=”masukkan deskripsi gambar atau kata kunci”/>.

Dalam beberapa kasus, misalnya untuk mempercepat loading atau menghemat bandwidth, blogger meniadakan images dalam membuka browsernya, yang mengakibatkan gambar Anda tidak ditampilkan. Penggunaan atribut alt pada gambar akan menggantikan fungsi gambar tersebut. Mesin pencari juga tetap dapat membaca kata kunci yang Anda berikan dalam atribut alt pada gambar.

Fungsi atribut alt pada gambar juga dapat menyebabkan gambar Anda diindeks oleh mesin pencari berbasis gambar seperti Google Images. Sama seperti search engine, Google Images akan menampilkan halaman-halaman yang relevan untuk kata kunci dalam pencarian gambar. Anda dapat memanfaatkannya untuk mencari trafik dari sana.

Mulai sekarang, tambahkan gambar dalam postingan, yuk!

————————————————————

Tulisan lain yang perlu Anda baca:

26 thoughts on “Optimasi Gambar Di Tulisan Blog

  1. iya, biasanya kalo ga pake alt ga lolos validitas XHTML.. alhamdulillah blog saya lolos n valid…

    Saya kemarin dicek masih buanyak banget yang nggak valid. Malah dibuat postingan khusus sama Kang Casrudi… 😆 Biarin deh, nggak valid-valid amat punya saya :mrgreen: Mau mbantu malidin nggak? 😆

  2. kirain optimasi gambar di tulisan, rupanya optimasi tulisan menggunakan gambar. judulnya kurang tepat nih.

    Iya, nih, kebalik dong ya berarti ini. Makasih koreksinya 😉

  3. Ya.. ya.. ya.. sangat menarik dan dimengerti.. dengan gambar yang tepat menggugah rasa ingin tau lebih jauh.. mbak Nunik cukup jeli ukuran gambar dan resolusi kecil bikin cepet upload nya.. Tengkiu ya..

    Dulu saya pake yang guede, nggak saya kompres dulu, makanya blog saya lemot buanget, sekarang udah pake yang ukuran kecil…

  4. siap mba.. tp ya agk sush mba.. cz kudu ngutak2 codeny jg mba… 😀

    Iya, saya juga suka ngecek banyak yang salah, trus kan ada saran tuh buat yang dibenerin Line ke 200 atau ke sekian, nyarinya njlimet, jadi kadang malas… 😆 😆

  5. 🙄 mau juga donk mas HARI sungguh MULYA dikau ini.. 😆 tapi kasihan punya saya tekornya paling banyak 169 😥
    .-= KangBoed´s selesai [nulis] ..Saresehan Budaya Spiritual Nusantara =-.

    Punyaku juga banyak… Lumayan, beberapa tadi sempat dibenerin karena dikasih tau sama Mas Hari.

  6. Buat mBake Isnuansa.. titip salam saja yaaaak..
    Salam Cinta Damai dan Kasih Sayang
    ‘tuk Sahabatku terchayaaaaaaaank
    I Love U fuuulllllllllllllllllllllllllllll

    Ok deh…

  7. menambahkan mba Nunik.. selain menambah alt jangan lupa nutup tag img..
    jadi kL tadi dicontohkan:

    menjadi:

    cos saya pernah gara2 kurang tanda “/” itu, error nya bisa jadi 17..
    (sebenarnya saya juga kurang paham, apa sebenarnya fungsi validitas)
    .-= Hari Mulya´s selesai [nulis] ..Reset Password WordPress dengan phpMyAdmin =-.

  8. menambahkan mba Nunik.. selain menambah alt jangan lupa nutup tag img..
    jadi kL tadi dicontohkan:

    menjadi:

    cos saya pernah gara2 kurang tanda “/” itu, error nya bisa jadi 17..
    (sebenarnya saya juga kurang paham, apa sebenarnya fungsi validitas)
    .-= Hari Mulya´s selesai [nulis] ..Reset Password WordPress dengan phpMyAdmin =-.

    Sudah diedit…

  9. menambahkan mba Nunik.. selain menambah alt jangan lupa nutup tag img..
    jadi kL tadi dicontohkan:
    masukkan deskripsi gambar atau kata kunci
    menjadi:
    masukkan deskripsi gambar atau kata kunci
    cos saya pernah gara2 kurang tanda “/” itu, error nya bisa jadi 17..
    (sebenarnya saya juga kurang paham, apa sebenarnya fungsi validitas
    .-= Hari Mulya´s selesai [nulis] ..Reset Password WordPress dengan phpMyAdmin =-.

    Iya, lupa / nya…

  10. lagi mba.. 😀

    link anchor “BigMac yang dijual McD” tu kelebihan tanda petik di bagian target-nya…
    .-= Hari Mulya´s selesai [nulis] ..Reset Password WordPress dengan phpMyAdmin =-.

    Iya, kok, bisa gitu ya? Apa karena saya ngetik di Word, trus dipindahin ke blog ya? Saya ngetiknya udah bener lho, tapi setiap dikopi paste ke blog secara otomatis jadi berubah begitu terus otomatis…

  11. waahh berarti selama ini blog saya berat gara-garaloading gambar begitu lama yah. mungkin tips ini bisa saya pakai, terima kasih.
    .-= mandor tempe´s selesai [nulis] ..5S =-.

    Kembali kasih…

  12. yup, saya juga sering menambahkan gambar di setiap postingan saya, tapi mesti di perkecil dulu size file-nya biar tidak menghambat loading
    .-= wira´s selesai [nulis] ..10 Cara Mengatasi Hiatus Pada Blog =-.

    Dulu saya maen hantem aja pasang gambar ukuran besar…

  13. sedikit tambahan. pernah saya tulis di blog saya.

    dari sisi aksesibilitas web, tiap gambar di suatu dokumen x/html yang bukan berbasis CSS dianjurkan menyertakan atribut alt. jika hanya bertujuan dekoratif, atribut teks alternatifnya menjadi alt=”” (kosong tanpa spasi). screen reader akan memahami gambar tersebut hanya dekorasi.

    atribut alt bermakna pada kondisi pengguna/klien tidak mampu melihat (misal tuna netra, Internet search engine) atau yang sengaja menonaktifkan tampilan gambar (misal koneksi Internet lambat). sehingga informasi berbasis teks tetap tersaji, tanpa pengguna harus kehilangan informasi.

    dianjurkan untuk menyertakan parameter width dan height pada tag img untuk mempercepat loading di sisi peramban/browser.

    gambar pada thumbnail sebaiknya memang berukuran kecil (contoh pada xhtml dengan slash penutup: ...). bukan gambar yang sebenarnya ber-ukuran/resolusi besar tapi width dan height-nya diperkecil.

    berapa anjuran panjang karakter/kata pada atribut alt, kapan memakai longdesc, kalimat apa yang sebaiknya digunakan untuk logo, tombol, produk ecommerce, ada anjuran tertentu berdasar best practices. 🙂
    .-= dani´s selesai [nulis] ..Aksesibilitas Web pada Lansia =-.

    Mantap tambahannya. Ilmu saya belom sampe di situ Bang, makasih.

  14. Makasih,infonya.Ga taunya alt penting juga ya.Suatu saat ak berkunjung lagi dech.

    Selain baca postingan, baca komentar Bang Dani juga ya. Itu lebih lengkap. 😉

  15. Saya mah bingung nambahkannya dimana, hampir semua yang memberikan tutor ini hanya sampai disitu “Tambah kan kode berikut” Tolong dong cara nambahkannya, tempatnya dll…

    Thnx, salam kenal

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge