Cara Memasukkan Gambar di Postingan Blogger

cara memasukkan gambar di postingan blogger
Memasukkan gambar di postingan blog adalah bagian paling penting yang harus dipahami oleh semua blogger, apalagi untuk seorang blogger pemula.

Caranya memasukkan gambar / foto / image sebenarnya sangat mudah. Tapi, sebelum memasukkan gambar ke dalam postingan blog, ada beberapa hal yang harus kalian pahami terlebih dahulu. Mari kita mulai pelajari hal tersebut.

☰ Optimalkan Gambar

 

Pada panduan Google Developers, kita disarankan untuk membuat ukuran gambar seminimal mungkin yang berguna untuk mempercepat proses memuat (loading) gambar tersebut dan menghemat banyak byte data.

Nah, dengan mengoptimalkan gambar yang akan kalian upload (masukkan) ke dalam postingan blog, hal ini akan tetap bisa diakses meskipun pada sambungan yang lambat ataupun paket data yang terbatas.

Bukan hanya itu, dengan mengoptimalkan gambar, kecepatan loading blog keseluruhan akan semakin cepat.

Lalu, bagaimana cara mengoptimalkan gambar supaya proses memuatnya cepat tanpa mengurangi kualitas gambar?

Ganti resolusi atau ukuran gambar kalian.

Supaya mudah, Pangeran akan ajarkan kalian mengganti ukuran resolusi gambar menggunakan Aplikasi PhotoScape yang biasanya sudah terinstall di setiap windows. Jika belum download aplikasinya dulu. Begini panduannya :

a. Buka Aplikasi PhotoScape dan klik Editor seperti gambar di bawah ini :

cara mengoptimalkan gambar di blog

 

b. Setelah berada pada tab Editor, sekarang kalian dapat memilih salah satu foto (di sebelah kiri) yang ingin kalian kecilkan resolusinya. Klik fotonya dan akan muncul pada kotak editornya. Seperti gambar di bawah ini :

cara mengoptimalkan gambar di blog

 

Ini hanya sekedar contoh, sekarang resolusi gambar pada foto di atas yaitu 4104 x 2736 pixel dengan ukuran file 3,5 MB. Nah, jika file seperti ini kalian langsung upload (masukkan) ke postingan blog, dijamin loading blog kalian akan menjadi sangat berat.

Google juga tidak menyukai hal ini. Jadi, mari kita optimalkan gambar contoh di atas supaya memiliki ukuran file yang kecil, resolusi kecil tapi tidak mengubah kualitas dari gambar tersebut.

c. Caranya yaitu klik Resize dan ganti ukuran Pixel Width. Ikuti cara seperti gambar berikut :

cara mengoptimalkan gambar di blog

 

Ganti ukuran Width menjadi di bawah 1000 pixel (misalnya 600) dan pastikan pada Preserve Aspect Ratio dalam keadaan ceklist sebelum kalian ganti resolusinya. Maka ukuran Height akan menyesuaikan dengan sendirinya dan klik Ok.

d. Sekarang klik Save yg berada di sebelah kanan bawah. Lalu akan muncul pop up baru. Seperti gambar berikut :

cara mengoptimalkan gambar di blog

 

Pada Options turunkan JPEG Quality ke yang paling rendah dan klik Save kembali.

cara mengoptimalkan gambar di blog

 

Sekarang Resolusi dan ukuran filenya sudah berubah menjadi 37.2 KB dengan resolusi 600 x 400. Mudah-mudahan sampai pada tahap ini bisa dipahami.

Nah, sekarang kita masuk ke cara mengoptimalkan ukuran file gambarnya berdasarkan saran dari Google Developers. Caranya seperti ini :

1. Buka Tinypng.com (Website compression ini disarankan langsung oleh Google, jadi ikuti terus panduan ini).

cara mengoptimalkan ukuran file gambar di postingan blog

 

2. Klik pada kotak Drop your .png or .jpg file here! Lalu, pilih gambar yang sudah kalian edit pada panduan sebelumnya. (Pastikan file kalian dalam format .png atau .jpg, selain itu tidak bisa menggunakan web ini)

cara mengoptimalkan ukuran file gambar di postingan blog

 

3. Jika sudah. TinyPNG akan mengcompress file kalian menjadi ukuran yang disarankan untuk diupload ke blog. Lanjut dengan klik Download untuk menyimpan.

cara mengoptimalkan ukuran file gambar di postingan blog

 

Artinya, jika menggunakan contoh seperti sekarang, ukuran file yang disarankan yaitu 22.7 Kb.

4. Selesai. 

Sampai di sini, Pangeran harap kalian mengerti cara untuk mengoptimalkan gambarnya. Nah, karena gambar sudah dioptimalkan, maka sekarang saatnya kita membahas bagaimana cara memasukkan gambar di postingan blog?

Simak pembahasan lengkapnya di bawah ini.

☰ Cara Memasukkan Gambar di Postingan Blog

 

1. Login ke Blogger.com > Post

2. Klik Buat Entri Baru (Create New Entri) untuk membuat post baru. Seperti gambar di bawah ini :

cara memasukkan gambar di postingan blogger

 

3. Sekarang kalian berada pada page Post (Halaman Postingan). Sebelum kalian memasukkan gambar postingan, sangat disarankan untuk kalian mengganti format penulisan nama file kalian supaya mudah masuk ke mesin pencarian Google Image.

Caranya, misalkan kita menggunakan foto yang sudah kita optimalkan tadi. Kemudian, judul postingan kita yaitu “Smartphone dan Laptop”. Nah, jangan kalian buat nama gambar tadi dengan nama selain di judul. Buat nama yang memiliki kaitan dengan keyword (kata kunci) di judul.

Supaya apa? Supaya ketika orang mencari gambar tentang keyword “Smartphone dan Laptop” memungkinkan yang muncul foto dari blog kalian. Begini formatnya :
  1. Format yang salah : Smartphone dan Laptop.png
  2. Format yang lumayan : smartphonedanlaptop.png
  3. Format terbaik : smartphone-dan-laptop.png

Nah, ganti atau Rename nama gambar yang kalian miliki sesuai dengan aturan format penulisan judul di atas.

Kenapa harus mengikuti aturan itu? Jika tidak mengikuti bagaimana?

Ya ini jika kalian ingin menambahkan kemungkinan blog kalian dikunjungi melalui Google Image (Gambar). Jika tidak mau, ya kembali ke diri kalian.

4. Selanjutnya, klik Insert Gambar 

cara memasukkan gambar di postingan blogger

 

5. Kemudian akan muncul Pop Up Add Images dan klik Pilih File untuk mengambil gambar yang akan kalian masukkan ke postingan. Ingat! Pastikan format penulisan namanya seperti panduan no.3.

cara memasukkan gambar di postingan blogger

 

6. Setelah gambarnya selesai dimasukkan. Klik pada Gambar terlebih dahulu dan klik Add Selected. Maka gambar kalian sudah masuk di postingan.

cara memasukkan gambar di postingan blogger

 

7. Untuk mengatur posisi, ukuran, teks caption, dll, klik pada gambar. Lalu sesuaikan dengan keinginan kalian.

cara memasukkan gambar di postingan blogger



Pengaturan :

Small = kecil
Medium = menengah
Large = Besar
X- Large = Super besar
Original size = sesuai ukuran aslinya
Left = posisikan gambar di sebelah kiri
Center = posisikan gambar di tengah
Right = Posisikan gambar di sebelah kanan
Add caption = menambahkan keterangan di bawah gambar.
Properties = menambahkan title dan alt diisi dengan nama gambar

cara memasukkan gambar di postingan blogger

Isi title dan alt sesuai dengan nama dari gambar. Tapi, penulisan formatnya tetap biasa.

Remove = menghapus gambar di postingan blog

8. Selesai deh…

Ow, ya. Sebelum Pangeran tutup. Pangeran mau berbagi sedikit penduan bonus tentang cara mendapatkan URL gambar yang sudah kalian upload tadi.

Kan sering tuh, pada nanya gimana cara memasukkan foto dan mengetahui URL Gambarnya?

Ikuti panduannya di bawah ini :

☰ Cara Mendapatkan URL Gambar di Postingan Blog

 

1. Pangeran anggap kalian sudah berada di Page Post (Halaman Postingan). Kemudian, yang harus kalian lakukan adalah klik HTML seperti contoh gambar berikut :

cara mendapatkan url gambar di postingan blog

 

2. Sekarang perhatikan URL yang Pangeran block di bawah ini :

cara mendapatkan url gambar di postingan blog

 

3. Itulah URL dari gambar yang kalian masukkan tadi. Tinggal copy dan terserah kalian mau dipastekan di mana aja.

Semoga membantu.

Ow, ya Pangeran. Kan itu artinya harus edit, upload, download. Ribet banget keknya. Gak ada cara lain?

Hem… Sebenarnya kalian bisa menggunakan Aplikasi Adobe Photoshop. Tapi, Pangeran sudah menggunakannya berkali-kali, tetap saja website yang mengecek kecepatan blog mendeteksi bahwa gambar yg sudah Pangeran edit harus dioptimalkan.

Ya beginilah cara jika kalian ingin membuat sebuah konten di blog. Butuh perjuangan. Tapi, gak ribet kok. Pangeran aja upload gambar di post ini kurang banyak apa? Yang penting dijalani aja, dulu.

Jangan lewatkan Panduan lainnya :
—o0o—

Bagaimana panduan kali ini? apakah semuanya mudah dimengerti? Apakah kalian menemukan pelajaran baru?

Ow, ya. Sedikit tambahan. Jika kalian menambahkan Title dan Alt ke semua gambar yang kalian masukkan ke postingan blog, gambar itu akan mudah masuk ke mesin pencarian Google. Syukur-syukur keyword (kata kunci) yang kalian gunakan paling banyak dicari. Jadi, blog kalian juga akan banyak dikunjungi..

Stttt…. Diem-diem, aja ya. Ini Rahasia yang Pangeran bongkar hanya di sini. Spesial buat pembaca Tulisan Wortel

Okelah. Seperti biasa. Terimakasih sudah membaca panduan ini. Jika ada yang mau request atau yang masih bingung, tanyakan di komentar, ya. Pangeran wortel pamit. See you…

 

Image by : 
  • tinypng.com
  • tulisanwortel.com

Pangeran Wortel

Blogger dari Kab. Bengkalis. Sukanya ngisi waktu luang untuk buat video, nulis di blog, desain feed instagram #bukanfakta dan kadang suka sendiri di pantai. Salam kenal..

28 thoughts to “Cara Memasukkan Gambar di Postingan Blogger”

  1. Dulu pas awal ngeblog aku paling males bikin atau milah-milih gambar untuk jadi pendukung konten. Tapi pas dasar, eh, sadar, ya minimal ada lah sebiji mah diusahain.
    Aku kalo mengoptimalkan image buat posting biasanya offline sih kayak (iya) Photoscape, sama Xiu-xiu. Edit-edit pake 2 app itu sama Picasa/Photoshop/Paint. Bhahaha.
    Emang tuh bener banget, kalo ukuran image yang gede ada di postingan bawaan loading-nya jadi berat. Tampilannya jadi lola, deh. I hate slow~
    Wah aku baru tau lho yang format tulisan untuk image-nya yang "baiknya" kayak gitu. Ok, lain waktu akan kupakai sarannya.
    Dan… Title, alt… Oh my God, aku bingung itu penggunaannya gimana. Kudu coba oprek-oprek nih.

    1. Hahaha. Malas itu gak ada obatnya Riska… hihi

      Wah… Ternyata banyak sekali App buat ngeditnya. 🙂 Tapi, gak perlu sebanyak itu kok, untuk ngatur resolusi.

      Jadi baru tau nih, format penulisan Image? Semoga bisa diterapkan, ya… Pengguaanya pada saat edit gambar yang di postingan itu. Kan udah ada keterangannya di atas.

      Klik gambar dan pilih Properties kemudian tambahkan ALT dan TITLE-nya. 🙂

  2. Sebenarnya ini hal yang umum, tau tapi kadang emang gak nerapin. Alasannya malas ngedit. Ckckk

    tapi ada hal yang Baru ku tau tuh.. image-nya pake title.. okee bakalan nerapin.. makasih ilmunya.. 🙂

  3. Sebenernya photoshop bisa. Kurangi ukuran, resolusi, lalu Save for Web, maka nama filenya spasi otomatis jadi tanda strip –
    Title dan Alt, itu juga penting menurutku hehe.. selain penamaan file yang sesuai dg keyword, supaya kepancing di google image 😀

    nice tips.. 🙂

    1. Betul sekali, Vin. Di Photoshop bisa. Tapi, sungguh disayangkan karena Pangeran menggunakan PageSpeed Insights, makanya tidak menggunakan cara itu lagi.

      Karena, masih ada beberapa resolusi yang tidak lolos dan harus dioptimalkan. Tapi, jika menggunakan cara di atas. Dijamin tidak ada peringatan Optimalisasi lagi. 🙂

      Btw, terimakasih untuk sarannya. Bener banget. Meningkatkan kemungkinan mendapat pembaca dari Google Image. (h)

  4. Trims ya tipsnya…
    Tp mo tny beberapa nih.
    Pas mo ngesave dr photoscape, jpeg qualitynya kudu yg paling rendah ya? Kenapa ya?

    Sama, kudu diupload di tinypbg jg ya?

    1. Sama-sama. Oke, akan Pangeran jawab, ya kak.

      1. Quality paling rendah tujuannya untuk mengurangi proses memuat (atau gampangnya membuka) gambar yang sudah diupload. Tapi, secara kualitas tampilan masih tetep sama, kok kak.

      Yang dikurangi hanya ukuran pixelnya. Bukan kualitas dari gambarnya. Jadi, makin kecil makin ringan dibuka.

      2. Untuk kenapa harus diupload ke Tiny PNG sudah dijelaskan di atas. Untuk mengcompress ukuran file yg paling disarankan dari pixel dari gambar.

      Misalnya ukuran pixel 500×500 dgn ukuran file 150Kb. Nah, untuk diupload ke internet, harusnya ukuran pixel 500×500 filenya berukuran 30kb.

      Ini juga gunanya untuk mempercepat memuat gambar. Jadi, yg kuotanya irit, tetep bisa buka blog kita dan menikmati gambar yg kita sajikan.

      Mudah-mudahan jelas, ya kak. 🙂

    1. Terimakasih… Seneng bisa membantu. 🙂 Duh.. Kakak pake Mac, ya. Pangeran gak pake Mac, sih. hihi

      Tapi, kalo mau ngedit bisa cari alternatif seperti Adobe Photoshop.

  5. Tips yang bagus banget buat SEO nih. Tp kayaknya prosesnya ribet dan panjang ya.
    Biasanya aku langsung upload aja, cuma nambahin caption sama properties. Ternyata nama file gambarnya pun harus diubah biar terindex google ya.
    Oh iya itu buat resize gambar bisa pake paint kok lebih simple.
    Nice share pangeran

    1. Kembali ke Prinsip, mas. Panduan ini hanyalah saran. Jika rasanya terlalu ribet, tidak perlu diikuti.

      Panduan mengenai edit foto bisa menggunakan aplikasi apa saja. Berhubung ini yg paling banyak digunakan, jadi, inilah pilihan yg mudah.

      Sipp. Semoga bermanfaat. (y)

    1. Sama-sama mas… Terimakasih sudah mendoakan saya. Semoga mas juga sukses mengembangkan blognya. Jangan sungkan untuk bertanya jika ada yg ragu, ya mas. (y)

      Salam kenal… 🙂

  6. Aku jarang make web compression bang Pang.
    Biasanya langsung lampirin di bloggernya. Huhuu

    Duh dapet ilmu SEO dimari, lumayan-lumayan.
    Baru tau tentag format pemberian nama pada gambar dan juga pada lampiran gambar (Alt dan title)

  7. Aku baru tau kalau google nggak suka foto dengan resolusi tinggi..
    Aku kira kalau di resize bisa merubahh kualitas gambar..

    oalaaah
    *manggut manggut
    Bener bener baru ngerti

    Karna aku selalu upload foto asli dan ga pernah ganti nama
    Aku biarin aja upload dengan nama file IMG_xxx

Leave a Reply

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