Membuat Gambar Postingan Dengan Size Kecil Dan Kualitas Bagus

Membuat Gambar Postingan Dengan Size Kecil Dan Kualitas Bagus

Bola Hero Gawai

Membuat Gambar Postingan Dengan Size Kecil Dan Kualitas Bagus

Gambar Postingan Dengan Size Kecil Dan Kualitas Bagus
Jika kita membuat postingan dengan selalu menyertakan image atau gambar di dalamnya, maka kita harus memperhatikan size dan kualitas gambar tentunya, agar gambar-gambar tersebut tidak terlalu membebani pada blog. Menurut beberapa sumber, gambar yang diupload ke blog hendaknya mempunyai size di bawah 100kb, lebih kecil akan lebih bagus.

Banyak cara untuk membuat atau merubah size gambar atau image menjadi lebih kecil, diantaranya dengan cara mengompresnya. Banyak tool-tool yang dapat membantu kita untuk melakukan kompresi gambar agar size gambar menjadi kecil.

Namun perlu diingat juga, ketika kita mengompres gambar hendaknya perhatikan juga kualitasnya sehingga gambar masih bagus untuk dilihat. Artinya gambar tidak menjadi buram atau malah pecah.

Nah kali ini saya akan mencoba membagi trik yang saya gunakan untuk membuat gambar yang akan diupload ke dalam postingan. Postingan ini tentunya ditujukan bagi yang belum tahu, bagi yang sudah tahu tolong koreksi saya jika ada yang kurang pada uraian di bawah ini.

Untuk membuat gambar yang akan diupload ke postingan, biasanya saya menggunakan Photoshop (Dalam hal ini saya menggunakan versi CS3). Kemudian siapkan software untuk membantu mengompres size gambar. Di sini saya merekomendasikan memakai RIOT, karena software ini kecil dan gratis namun kemampuannya bisa diandalkan untuk mengompres gambar dan menjaga kualitasnya. Setidaknya itu yang sudah saya coba.

Untuk pertamanya tentunya kita harus menyiapkan gambarnya. Usahakan gambarnya memiliki kualitas yang bagus, atau bisa juga screenshot yang kita buat.

Jika gambar atau screenshotnya sudah siap, silahkan buka dengan Photoshop Anda. Kemudian yang pertama kali kita lakukan adalah menyesuaikan dimensi gambar agar pas dengan lebar postingan sehingga nantinya gambar tidak terlalu kecil atau lerlalu besar. Sebagai contoh, lebar postingan blog saya ini adalah 600px, maka saya membuat gambar dengan lebar 560px. Silahkan klik menu Image pada Photoshop, kemudian klik Image Size. Centang semua option yang di bawah agar perubahannya proporsional, rubah Resolution menjadi 72px (standar resolusi gambar untuk web), lalu silahkan beri lebar gambarnya pada Width (tingginya otomatis akan mengikuti berubah) kemudian klik OK.

Gambar Postingan 1

Kemudian silahkan klik menu File dan pilih Save for web and device.

Gambar Postingan 2

Kemudian pilih PNG-8 pada option Preset. Kenapa saya pilih PNG-8? Karena ketika menggunakan JPEG, gambar akan kurang baik ketika dikompres lagi dengan RIOT. Kemudian SAVE dan berikan nama untuk gambar Anda. Sekarang silahkan lihat size gambar Anda antara gambar aslinya dengan gambar yang sudah diproses seperti langkah di atas. Lebih kecil kan? Bisa Anda lihat pada gambar di bawah ini.

Gambar Postingan 3
Gambar Postingan 4
Gambar Postingan 5

Nah setelah itu silahkan gunakan software RIOT (Freeware) untuk mengkompres size gambarnya agar lebih kecil lagi. Dan untuk contohnya bisa Anda lihat pada gambar-gambar di atas. Itu sudah mempunyai size yang kecil dengan menggunakan trik di atas, setidaknya gambarnya masih bagus untuk dilihat.

Dan jangan lupa ketika mengupload gambarnya ke postingan silahkan pilih option Original Size atau Ukuran Asli, tambahkan juga title dan alt tag-nya juga dimensinya (width dan height sesuai dengan aslinya pada komputer kita). Simak juga postingan saya agar gambar valid HTML5 dan SEO friendly pada link di bawah ini.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

62 Comments Add Comment

Bagus banget mas caranya, jadi blognya tambah enteng dan tentunya wuss kaya blog ini :D

Balas

Wow super hasil compressannya, cocok buat blog saya..

Balas

Heeehehe iya mas, setidaknya itu yang selalu saya lakukan untuk gambar postingan :D

Balas

Ini juga sebagai jawaban atas pertanyaan kang Eful kemarin untuk salah satu cara optimasi gambar di GTMetrix

Balas

Saya malahan compres gambar masih dengan format JPG, pantesan gambarnya kaya ancur gitu :D, mas ijin pakai css scrollbar ya ? :D

Balas

wah boleh nih mas :D ntar dicoba :) makasih buat tutornya :D

Balas

Heheheehe sama-sama mas :D

Balas

kalo untuk masalah kompresi saya biasa pake microsoft office picture, memaksimalkan yang ada dulu kang, berhubung photosopnya belum ada :D

Balas

kunjungan perdana kang salam kenal :)
wah pas ini kang sama blog WS, kebetulan memang kebanyakan isinya gambar setiap postingan pakai foto jadi makin kesini makin berat...padahal gambarnyanya juga sizenya kecil ukuran kamera hp, ga terlalu bagus juga jadi gampang pecah, tapi itu tetep ngaruh ya kang sama loading blog ??
WS bookmark dulu ya kang nanti tak coba, nuhun. WS follow blognya ya kang :)

Balas

setuju kang.. saya suka 'save for web and devices' aja lumayan tanpa RIEUT :)

Balas

kang.. nganggo custom scrollbar kitu, janten warning nya di Jigsaw..

Balas

Ya betul mas, maksimalkan yang ada dulu... :D

Balas

Iya kang...salam kenal juga hehehe... :D
Punten nembe kapendak profil G+ na kang hehehe :)
Setiap gambar kayaknya perlu dikompress agar byte yang tidak diperlukan hilang, jadi gambar benar-benar padat. :D

Balas

Muhun kang hehehe komo mun ditambah RIEUT wah jdi nyut-ntutan weh hahahaha :D

Balas

muhun kang nobian dicek di W3C mah lolos, teu acan dicek di jigsaw mah, mun error ya dibuang weh hehehe :D

Balas

Barina ge teu jalan di Firefox mah kang hadeueuehh...

Balas

gan kompi request tutorial tengan hover-hover dong :)

Balas

Sayah teh lihat hejona weh kang hehehe teu ditingali kahandapna hehehe :D ternyata jadi warning. Rekomendasina atuh kang kanggo Scroll bar hehehe :D

Balas

mas apa bedanya kalau langsung di save dengan .png tanpa harus membuka save for web & devices

Balas

Biasanya jika demikian sizenya akan lebih besar mas pada hasil simpannya.

Balas

saya selalu menggunakan photoshop untuk mengompres file gambar dengan memanfaatkan fitur save for web......salam :-)

Balas

terimakasih mas adhy :D

Balas

ohh gitu ya mas... berarti harus klik save for web dulu.. makasih ya mas atas caranya

Balas

abdi milari acan mendakan kang.. ke mun abdi nganggo berarti aya solusi.. wkwkkwkwkw

Balas

Muhun kang diantos, biar bisa jalan oge di FF :D

Balas

Hehehehe belum ada ilham, nanti kalau udah ada inpsirasinya...

Balas

Siipp mas...hehehehe sama dong :D

Balas

nuhun kang, langsung di share. :-d :-d :-d

Balas

Potoshop Save For Web lebih simpe kang he,,,

Balas

wah saya malah tidak pernah kompres.. makasih udah diajarin gan

Balas

Iya kang, hasilnya juga lumayan besar perbedaannya :-bd

Balas

Ah enggak ngajarin mas hehehehe hanya berbagi pengalaman aja :D

Balas

kalau saya biasanya pake microsoft pictures manager mas, lebih cepat karena udah ada fitur buat gambar ukuran web

Balas

Salam Mas Adhi

Kalau pakai auto-readmore, gimana ya mas Adhi, caranya supaya pada homepage, post-Image di auto-resize jadi smaller, tapi saat dibuka di postingnya, imagenya tetap besar(dengan file-size kecil tentunya).
saya mengalami masalah itu dari dulu.

Note: Resizer dari auto-readmore nya Mas kolis kayaknya 200px X ....
Selama ini semua image-post saya berdimensi 200px, kecil deh dipostingan, jelek bgt.

Makasih Mas Adhi.

Balas

Kalau saya biasanya gak pakai aplikasi mas. Saya upload dulu ke blogger, trus url gambarnya yang saya utak-atik mas. Semisal di url gambarnya ada s1600, saya ganti (perkecil) menjadi s500,s400, dsb. Alhasil size gambar jadi kecil, kualitas nya pun tetap terjaga mas. :)

Balas

gan klo gilisoft editor video tampilannya melorot kebawah.. jadi tombol starnya ga keliatan.. bagaiman cara minimizenya.. saya pake notebook 10"

Balas

kalau ini wajib dicoba mas, apalagi postingan saya semua full gambar :)

Balas

Sama-sama hehehe, dicoba aja mas :D

Balas

Malah saya belum nyoba tuh yang ini hehehehe... :D
Siiipp mas nanti saya coba microsoft pictures managernya :)

Balas

Itu bisa diatur dari js-nya mas, rubah angka 200 dengan angka yang dikehendaki.

Balas

Banyak jalan menuju ke Roma ya mas hehehehe... bisa jadi salah satu referensi juga mas :D

Balas

Coba seret dari pojoknya biar tampilannya mengecil.

Balas

Iya sis dicoba aja :D

Balas

Mantab ni, tapi aku masih pakek java script kak, menurut aku lebih mudah dan tidak harus merubahnya satu-satu.

Balas

Itu lebih simple lagi mbak hehhehe makasih masukannya buat referensi yang lainnya...

Balas

wah perlu saya catat nih Kang, sebab selama ini seringnya saya upload gambar apa adanya dari hasil jepretan. Apalagi kalo make kamera DSLR tentu pixel tinggi dan membebani loading.\
Matur suwuh sharenya

Balas

Saya biasanya kalau buat screenshoot untuk gambar postingan dengan menggunakan Corel Draw mas. Soalnya nggak punya software Adobe Photoshop Cs3 atau yang lainnya. Memang benar bahwa ukuran gambar yang disisipkan dalam postingan hendaknya dari segi kualitas dan kuantitas harus bagus, dalam artian tidak terlalu besar ukurannya dan juga gambarnya bagus serta mudah dilihat. Gambar postingan saya biasanya 50 Kb. Kira-kira terlalu kecil nggak ya? hehe :D Soalnya kalau diatas 100 Kb sepertinya terlalu besar, sehingga selain bisa memperberat loading blog, juga proses upload nya itu cukup lama, sehingga membuat galau saja hehe :D

Balas

Iya mas, apalagi kalo pakai kamera DSLR itu besar sekali sizenya hehehe :D

Balas

Ya betul mbak Eka, di Corel juga bisa pakai Publish to the web ...
50 kb itu sudah bagus, kalau bisa lebih rendah lagi... :D

Balas

Itu besar banget jadi kecil banget :D
bisa dicoba nih kang..

Balas

Iya mas silahkan dicoba saja hehehehe :D

Balas

Sami-sami kang, mudah2an janten manfaat hehehe :D

Balas

kalau menurut mas kompi bagus ga kalau pakai photoscape, karena saya selalu pakai photoscape untuk pengeditan gambar untuk blog

Balas

Salam blogger kang,
Apakah pemakaian Riot harus selalu bergandengan dengan photoshop ? soalnya saya tidak pernah menggunakan photoshop.
Terimakasih sudah share, cara ini menakjubkan, file bisa tinggal 10% saja dan fotopun tetap ok.

Balas

Itu tergantu kebiasaan dan keahliah masing2 aja mas, yang penting jika gambar tersebut untuk postingan blog, kalau bisa disimpan dengan SAVE For Web agar size yg dihasilkan kecil. Tapi biasanya semua aplikasi multimedia sekarang ini mendukung penyimpanan gambar untuk web.

Balas

Tidak selalu mas, yang penting ketika kita mengedit gambar untuk postingan, jangan lupa save for web. Biasanya semua program pengolah gambar sekarang mendukung penyimpanan gambar untuk web. dan hasilnya lumayan, seperti kata mas sampai sizenya menjadi hanya 10%. Nah RIOT berguna untuk membuang byte yang tidak terpakai pada gambar sehingga sizenya bisa lebih kecil lagi namun kualitas gambar tetap bagus. :D

Balas

ooh begitu caranya ya..thanks bro..lam kenal

Balas

punten mas mau tanya...kenapa disetip postingan saya, gambar di thumbnail selalu kepotong. kira-kira salah apanya itu ya.?

Balas

Itu biasanya dari javascript yang menampilkan thumbnailnya.

Balas

Baru tahu saya mas, makasih banget ya!
sekarang tidak usah repot-repot convert manual jadinya :D

Balas

trimakasih banyak atas info nya mas....

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×