Cara Supaya Gambar/Foto Ringan Loading dan Terdeteksi Google

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 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 (-).
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!

Previous
Next Post »

32 komentar

Write komentar
Adi Febrian
AUTHOR
Tuesday 16 June 2015 at 19:14:00 GMT+7 delete

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

Reply
avatar
Nur Susianti
AUTHOR
Tuesday 16 June 2015 at 20:44:00 GMT+7 delete

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

Reply
avatar
Zeipth
AUTHOR
Wednesday 17 June 2015 at 00:06:00 GMT+7 delete

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

yg alt itu gimana caranya

Reply
avatar
HendraDigital
AUTHOR
Wednesday 17 June 2015 at 00:16:00 GMT+7 delete

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

Reply
avatar
Jefferson L
AUTHOR
Wednesday 17 June 2015 at 00:29:00 GMT+7 delete

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.

Reply
avatar
Wednesday 17 June 2015 at 06:23:00 GMT+7 delete

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

Reply
avatar
rizki
AUTHOR
Wednesday 17 June 2015 at 11:10:00 GMT+7 delete

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

Reply
avatar
Wednesday 17 June 2015 at 18:30:00 GMT+7 delete

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.

Reply
avatar
Unknown
AUTHOR
Wednesday 17 June 2015 at 20:06:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 11:15:00 GMT+7 delete

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

Reply
avatar
Muhammad Afif
AUTHOR
Thursday 18 June 2015 at 11:49:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:27:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:28:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:29:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:32:00 GMT+7 delete

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.

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:34:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:40:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Thursday 18 June 2015 at 13:44:00 GMT+7 delete

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

Reply
avatar
irf
AUTHOR
Thursday 18 June 2015 at 18:30:00 GMT+7 delete

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

Reply
avatar
Friday 19 June 2015 at 07:59:00 GMT+7 delete

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.

Reply
avatar
Abu Muhammad
AUTHOR
Friday 19 June 2015 at 09:07:00 GMT+7 delete

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

makasih ka Vindy ilmunya :D

Reply
avatar
Vindy Putri
AUTHOR
Friday 19 June 2015 at 12:21:00 GMT+7 delete

Yuk, dicoba ya.. mudah kan? :)

Reply
avatar
Vindy Putri
AUTHOR
Friday 19 June 2015 at 12:22:00 GMT+7 delete

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

Reply
avatar
Vindy Putri
AUTHOR
Friday 19 June 2015 at 12:23:00 GMT+7 delete

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

Reply
avatar
anak nelayan
AUTHOR
Friday 26 June 2015 at 12:56:00 GMT+7 delete

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

Reply
avatar
Iilajah
AUTHOR
Friday 3 July 2015 at 01:18:00 GMT+7 delete

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

Reply
avatar
beautyasti1
AUTHOR
Wednesday 14 October 2015 at 07:03:00 GMT+7 delete

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

Reply
avatar
opikini
AUTHOR
Friday 13 November 2015 at 14:04:00 GMT+7 delete

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

Reply
avatar
Saturday 27 February 2016 at 17:57:00 GMT+7 delete

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

Reply
avatar

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 ConversionConversion EmoticonEmoticon