TUTORIAL

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.
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 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 ImageImage 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 FileSave 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 (-).
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 "3 koplak mengejar cinta by haris firmansyah" di Gambar Google di baris pertama.


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?



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!

7,888 kali dilihat, 6 kali dilihat hari ini

BACA JUGA

32 Comments

  1. Nurul Hikmah S. says:

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

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

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

  4. iilajah doank says:

    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 :pyang di save for web baru tau, biasanya sih kalau untuk mengecilkan ukuran gambar, diupload dulu ke facebook, ukurannya suka mengecil. rada ribet sih XD

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

    1. Wah, senang mendengarnya..

  6. Jadi pakai save for Web toh, baru tahu ternyata tool itu fungsinya untuk ini.. padahal sering make PS.. makasih ka Vindy ilmunya 😀

    1. Sama-sama, Turyono, senang deh berbagi ilmu dan yang membaca paham. 🙂

  7. Nupinupi says:

    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.

    1. Iyaa…, begitu, Nupinupi, kamu kan sering share gambar tutorial kaaan… Mulai sekarang diterapin yah 😀

  8. Irfan Alharits says:

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

    1. Yuk, dicoba ya.. mudah kan? 🙂

  9. Muhammad Afif says:

    Keren kak tutor nya, tapi gak jago make PS nih hoho mentok2 make photoscape hahaha :DBiasanya sih emang upload dari komputer, biar kerasa original gitu pict yang akan kita masukkan ke blog

    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.

  10. Slemut says:

    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

    1. Sipp…, keren, kamu udah sadar SEO secara nggak langsung. :DLanjutkan!

  11. Claude C Kenni says:

    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.

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

  12. Rizki Ramdhani says:

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

    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.

  13. Haris Firmansyah says:

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

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

  14. iya bermanfaat banget buat web jualan seperti punya saya.makasih ya 🙂

    1. Sama-sama, Nur Susianti 🙂

  15. i Jeverson says:

    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.

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

  16. Hendra Alfarisi says:

    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

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

  17. Ara AnggARA says:

    baru tahu soal ini.biasanya aku nama file suka sembanrangan apalagi kalau ngambil dari web lain.yg alt itu gimana caranya

    1. Maaf, Ara, aku jadi kelupaan masukin caranya ngisi Title dan Alt. Sudah kutambahkan ya.. 🙂 Silakan disimak.

  18. Febrian Rahman says:

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

    1. Kembali Kasih, Febrian 🙂

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.