Cara Supaya Gambar/Foto Ringan Loading dan Terdeteksi Google

Tuesday, 16 June 2015

Cara Supaya Gambar/Foto Ringan Loading dan Terdeteksi Google

Hai Blogiest yang cinta ngeblog!
Setelah kemarin aku membahas Supaya Blog Disukai Google dan Menembus Halaman Pertama, kali ini aku juga akan berbagi tips untuk temen-temen yang selalu menyertakan gambar atau foto di postingannya. 

Beberapa hal selain Judul postingan atau konten, hal yang perlu diperhatikan adalah Gambar. Mungkin judul kita belum bisa mengangkat blog kita di page one, namun kita bisa optimalkan dengan mengutak-atik dari segi gambar sehinga muncul di Tab Gambar di baris pertama.

Fitur upload image di blogger.
Fitur upload image di blogger.
Teman-teman biasa pasang gambar melalui fitur Insert Image seperti di samping ini kan? Yap, betul, fitur ini memang digunakan untuk upload image. Upload-nya pun ada beberapa pilihan. Yang paling sering digunakan adalah upload image dari komputer dan upload image dari website. Seperti di bawah ini tampilan fitur uploadnya.

Fitur upload di blogger dari komputer.
Fitur upload di blogger dari komputer.

Fitur upload di blogger dari URL website/blog lain.
Fitur upload di blogger dari URL website/blog lain.

Lalu Mana yang harus kita pakai supaya gambar yang kita upload bisa disukai google dan naik di halaman depan?
Boleh keduanya. Namun diantara keduanya ada beda kelebihan dan kekurangan masing-masing. Kuuraikan sebagai berikut:

Upload dari komputer:
(+) Ringan (jika gambar di-save for web),
      Tidak akan pernah mengalami corupted/removed for server.
(-) Berat (jika gambar di-upload masih dalam ukuran sebenarnya)

Upload dari URL:
(+) Ringan (kita hanya meminjam gambar tanpa harus mengupload ulang)
(-)  Kemungkinan besar gambar mengalami corupted/removed for server jika gambar sumber sudah       rusak/dihapus.

Aku pribadi lebih memilih upload dari komputer, alasannya gambar yang aku upload sebisa mungkin original dari kamera sendiri, kumodifikasi dahulu, dan ukuran serta nama filenya kumanipulasi terlebih dahulu supaya terbaca oleh keyword google dengan mudah.

Okey, aku akan memberi tips sederhana dalam dua hal:
1) Mengecilkan ukuran gambar tanpa harus mengurangi kualitas gambar, ini sangat berguna supaya blog tidak terasa berat, dan
2) Menulis nama file supaya terbaca cepat oleh google.

MENGECILKAN UKURAN GAMBAR
Ada salah satu trik supaya blog kita ringan wuuuzzzz meski banyak gambar yang dipasang di satu postingan. Caranya:
  1. Buka gambar di aplikasi komputer Adobe Photoshop versi apa saja.
  2. Edit gambar sesuai keinginan (optional)
  3. Ubah ukuran lebar maksimal gambar sesuai dengan lebar postingan. Contoh: Lebar keseluruhan blogku adalah 1050px dan lebar bilah kiriku 300pxArtinya lebar konten postinganku adalah 750px.  (Dapat dilihat di Template - Sesuaikan - Sesuaikan Lebar). Sehingga aku mengubah lebar gambar melalui Photoshop menjadi 600px. (Untuk mengubah ukuran di Photoshop Alt + Ctrl + huruf i atau menu Image - Image Size). (Optional, antisipasi supaya jika di Large Image tidak melebihi lebar konten.)
  4. Save dengan menu Save for Web pada Photoshop, yaitu bisa ditemukan di File - Save for Web atau Shift + Ctrl + Alt + huruf S.
  5. Pilih save berupa format .jpeg .jpg .png .gif atau sesuai dengan kebutuhan.
  6. Selesai. Mudah kan?
Perubahan yang dapat langsung terlihat adalah ukuran gambar yang jauh lebih kecil bahkan sangat kecil tanpa harus mengubah kualitas gambar. Ini bahkan jauh lebih baik kualitasnya ketimbang aslinya. Mau bukti?

Perbedaan:



Ini adalah gambar kucing ukuran 300px di-save dengan cara Save as biasa.
Gambar kucing ukuran 300px dengan cara Save as biasa.
Gambar kucing ukuran 300px dengan cara Save as biasa.












Ini adalah gambar kucing ukuran 300px di-save dengan Save for Web.
Gambar kucing ukuran 300px dengan cara Save for Web.
Gambar kucing ukuran 300px dengan cara Save for Web.












Mari kita zoom kedua gambar ini dengan ukuran lebar yang sama.
Ukuran di-zoom Save as Biasa
Ukuran di-zoom Save as Biasa
Ukuran di-zoom Save for Web
Ukuran di-zoom Save for Web
Sama bukan? Kualitas gambar nya tidak ada yang berubah. Namun apa yang membuatnya berbeda? Mari kita tengok ukuran file kedua gambar ini. File yang di save for web jauh lebih kecil ukurannya. Ini sangat berfungsi untuk kecepatan loading blog kita.

Perbedaan ukuran file antara save as biasa dan save for web.
Perbedaan ukuran file antara save as biasa dan save for web.

Contoh lain perbedaan ukuran file save as biasa dan save for web.
Contoh lain perbedaan ukuran file save as biasa dan save for web.




PENULISAN NAMA FILE GAMBAR

Seperti yang pernah di tulis di turorial sebelumnya, bahwa google sangat menyukai penulisan sesuatu yang relevan. Maka buatlah penamaan file yang baik dan sesuai dengan keterangan gambar. Ada 2 (dua) hal penamaan gambar yang perlu diketahui oleh blogger jika ingin menjadi blogger sejati. 

1) Penamaan file di komputer seperti kucing-galau.jpg, dan
2) Penamaan file di blogger, seperti caption, title text dan alt text.
Mari kita ulas satu per satu.

Seperti tutorial yang kita pelajari di atas, menyimpan file lebih baik menggunakan fitur Save for Web. Sebab begitu kita save gambar tersebut, format penyimpanannya disesuaikan untuk penamaan di google. Coba perhatikan nama-nama file berikut ini:
Penamaan file dengan spesifikasi tanpa stip (-).
Penamaan file dengan spesifikasi tanpa stip (-).
Setiap spasi pada penamaan file tersebut digunakan tanpa strip (-). Hal ini digunakan supaya google mudah dan lebih spesifik merekomendasikan gambar kita untuk keyword yang dipilih. Coba dua contoh di bawah ini. Ketika menuliskan keyword seperti contoh, gambar-gambarku mampu naik di baris pertama. 

Hasil pencarian "novel keluarga salah gaul" di Gambar Google di baris pertama.
Hasil pencarian "novel keluarga salah gaul" di Gambar Google di baris pertama. Cek di sini.

Hasil pencarian "3 koplak mengejar cinta by haris firmansyah" di Gambar Google di baris pertama.
Hasil pencarian "3 koplak mengejar cinta by haris firmansyah" di Gambar Google di baris pertama. Cek di sini.

Caranya?
Yang terpenting adalah penamaan seperti tutorial pertama tadi. Kemudian ditunjang dengan pemberian caption, title text dan alt text.

Coba perhatikan gambar berikut. Gambar ini memiliki caption "Ini Caption", kemudian coba arahkan pointer kursor pada gambar tersebut, akan muncul tulisan "Ini Title Text", kemudian Alt Text dapat diketahui apabila blog ini tidak memunculkan keseluruhan gambar dengan sempurna. Konten akan memberikan space untuk gambar ini namun gambarnya tidak muncul. Nah, Alt Text di sini sangat berperan sangat penting di sini.

Ini Alt Text
Ini Caption

Klik pada gambar dan pilih Add caption untuk mengisi Caption, dan klik Properties untuk mengisi Title Text dan Alt Text.

Image Properties saat mengisi Title Text dan Alt Text.

Alt Text dapat dilihat dalam kasus di bawah ini. Gambar Buku di sidebar blog ini harusnya muncul. Namun karena tidak berhasil dimunculkan, Alt Text berperan di sini. Yap! Alt Text-nya adalah "BUKUKU". Sehingga memudahkan pembaca dalam mengenali, gambar apa yang belum muncul ini. Lebih spesifik kan?
Alt Text pada Image "BUKUKU". 


Udah menerapkan begitu, tapi tidak ada di baris pertama di Google?
Ada banyak alasan, salah satunya adalah, bisa saja ada orang yang menulis ulasan serupa LEBIH DULU daripada kita. Sehingga mereka sudah mencuri start dari awal. Punya kamu masih kalah mungkin dari segi SEO atau jumlah klik. 

Maka ini keuntungan  bagi mereka yang menulis FRESH ISSUE atau Review produk/buku baru dan menggunakan penyimpanan serta penamaan file gambar dengan baik. Google bakal baik padamu.

Kesimpulan:
Semakin spesifik penamaan file yang digunakan, semakin direkomendasikan oleh google. Mulailah jangan malas untuk memberi nama file dan berilah tanda (-) untuk pengganti spasi supaya mudah dibaca oleh Google.
Selamat Mencoba!

37 comments :

  1. wih beguna bener tips ka vindy apalgi buat blogger pemula kya aku

    ReplyDelete
  2. iya bermanfaat banget buat web jualan seperti punya saya.
    makasih ya :)

    ReplyDelete
  3. baru tahu soal ini.
    biasanya aku nama file suka sembanrangan apalagi kalau ngambil dari web lain.

    yg alt itu gimana caranya

    ReplyDelete
    Replies
    1. Maaf, Ara, aku jadi kelupaan masukin caranya ngisi Title dan Alt. Sudah kutambahkan ya.. :) Silakan disimak.

      Delete
  4. Ilmunya sangat luar biasa mba Vindy. Bermanfaat nih. Kalo ukuran file gambar kecil, tapi saya mau tampilin di blog dengan ukuran extra large, apakah bisa membuat loading blog menjadi lambat?? Makasih jawabnya

    ReplyDelete
    Replies
    1. Nggak akan terasa lambat kalau kita save gambar tadi dengan Save for Web, sebab ukurannya sudah diperkecil berkali-kali lipat. Cocok untuk loading di blog seperti ini. :)

      Delete
  5. wahaha, akhir2 ini bagi ilmu mulu nih. kalau gue sih sering bedah gambar di photoshop..
    jadi, semakin sepsifik semakin di rekomen sama google toh. kalau bertele-tele gitu namanya, ya susah yak.

    ReplyDelete
    Replies
    1. Iyes, lagi pengen nulis tutor singkat. :D
      Iya betul banget, kalau nggak spesifik, google juga nggak mau rekomendasikan foto kita di keyword yang relevan.

      Delete
  6. Wah, tipsnya oke nih. Intinya saya mesti belajar photoshop. Selama ini edit apa-apa pake paint.

    ReplyDelete
    Replies
    1. Iya, silakan dicoba ya, Haris. Supaya yang kamu posting gambarnya bisa cepet direkomendasikan sama Pak Google.

      Delete
  7. Baru tau nih dari sini, biasanya mau upload gambar masih serampangan gitu. Gambarnya dikecilkan jadi ukuran medium buat ukurannya aku kecilkan pakai foto sketcher. Kayaknya mesti donlod photoshop nih.

    Makasih ya kak ilmunya.. :D

    ReplyDelete
    Replies
    1. Iya, photoshop sekarang tuh kayanya kudu ada sih. Ya tapi gak wajib sih. Itu hanya solusi supaya menyimpan gambar yang ukurannya nggak besar, jadi blog kita loadingnya juga cepet.

      Delete
  8. Aku udah ngeblog selama bertahun tahun tapi info info yg kamu tulis di atas, kebanyakan aku baru tau lho hahaha. Nama filenya berpengaruh untuk SEO, dan lain sebagainya. Ternyata mengupload gambar di blog tidak sesimpel yg kita pikirkan ya.

    ReplyDelete
    Replies
    1. Iya, berbepangurh dong, karena google juga bakal ngerekom gambar sesuai dengan keyword yang ditulis. Jadi biar gambar kita nggak sia-sia, mulai dibiasakan menulis file, caption, alt, dan title text nya yaa..

      Delete
  9. tanpa gue sadari dan gue tak pernah tau, trik2 diatas udah gue lakuin dari dulu vin.. wkwkwk sumpah gue baru tau ini kalo gue udah ngelakuin trik SEO.. wkwkwk

    ReplyDelete
    Replies
    1. Sipp..., keren, kamu udah sadar SEO secara nggak langsung. :D
      Lanjutkan!

      Delete
  10. Keren kak tutor nya, tapi gak jago make PS nih hoho mentok2 make photoscape hahaha :D

    Biasanya sih emang upload dari komputer, biar kerasa original gitu pict yang akan kita masukkan ke blog

    ReplyDelete
    Replies
    1. Iya, harus original ya. Sip.. lanjutkan!
      Iya, keuntungannya pakai potoshop ya save nya nggak pakai ukuran besar melainkan kecil banget, jadi blog kita ringan.

      Delete
  11. Gue biasanya setelah diedit di photoshop, pake fitur "save" aja sih. Nanti coba pake yang "save for web" deh. Nice info :)

    ReplyDelete
  12. waahahahaaa, udah 6 taun nge-blog, bisa-bisanya baru ngeh beginian..simpel ya.. kmrn (dulu) sempet belajar SEO, tapii, aduh ribet. males ah... ^^ TFS Vindy.

    ReplyDelete
    Replies
    1. Iyaa..., begitu, Nupinupi, kamu kan sering share gambar tutorial kaaan... Mulai sekarang diterapin yah :D

      Delete
  13. Jadi pakai save for Web toh, baru tahu ternyata tool itu fungsinya untuk ini.. padahal sering make PS..

    makasih ka Vindy ilmunya :D

    ReplyDelete
    Replies
    1. Sama-sama, Turyono, senang deh berbagi ilmu dan yang membaca paham. :)

      Delete
  14. Terimakasih mba infonya, sangat bermanfaat nih buat saya :)

    ReplyDelete
  15. sangat berguna sekali, semoga gambar yang saya post bisa mantap seo nya

    ReplyDelete
  16. kadang gue juga suka ngelakuin hal itu kalau lagi gak males, suka males sih, soalnya gambar yang gue upload suka kebayakan jadi ya udah langsung aja di publish :p
    yang di save for web baru tau, biasanya sih kalau untuk mengecilkan ukuran gambar, diupload dulu ke facebook, ukurannya suka mengecil. rada ribet sih XD

    ReplyDelete
  17. wah mba, aku bookmark ya, mau belajar. karena sepertinya aku harus mengedit semua postingan ku dan menulis caption nya (gak pernah ditulis) -__- hehehe.. thank you

    ReplyDelete
  18. Saya juga selalu save as web kalau buat posting ke blog & pilih png, tapi kalau gambarnya kebanyakan warna biasanya pilih jpg karena kadang ukurannya malah lebih kecil dibanding png

    ReplyDelete
  19. Pernah baca kalau ukuran gambar di blog juga mempengaruhi kecepatan blognya. Kebetulan mampir di tempat yang tepat. Thanks tipsnya ya Vindy :D

    ReplyDelete
  20. Langsung ijin praktek ya mbak vindi. Semoga bisa terlihat dihalaman 1 google

    ReplyDelete

Jejakkan komentar, saran, kritik, dan pertanyaan melalui Contact atau komentar di bawah ini. Gunakan komentar Facebook (di atas) jika ingin mendapat notifikasi balasan langsung dari Facebook. Atau bisa juga dengan akun Blog/Gmail.

Terima kasih berkenan membaca dan mampir di Vindy Pindy Mindy.
--- www.vindyputri.com