Monday, November 15

Kongsi Knowledge - Save Gambar Untuk Web

(klik banner untuk visit kusut-blogs)

blog berat? biasenye, punca2 obesiti blog mesti gambar dgn script widget (dan jugak lagu.. walaupun lagu tu bleh di pause, loading lagu tu akan efek user experience). ok tapi lantak la yg dua tu.. yg paling boleh membantu dlm speeding up loading blog kita ialah.. gambar la

so camne nak letak gambar banyak2 tapi load tak lama? trick dia ialah guna feature 'Save for Web' pada Photoshop (rasenye2 photoscape pun ade function ni jugak!). jadik, sekadar formaliti, ini adelah satu tutorial Photoshop (dan aku gune photoshop CS)



kalau guna 'Save for Web' ni kan, image yg resolution besar dari digicam pun bleh jadik kecik filesize dia tanpa mencacatkan gambar dgn ketara.
nota terlebih teknikal 1: gambar dari digicam kalau setting biasa, filesize sekitar 1.5MB.. which is terlampau besar utk web yg saiz ideal dia sekitar 300KB. contoh dia ade aku letak kat bawah ^^



ok feature 'Save for Web' ni asas nye adelah utk optimizekan gambar supaya filesize dia tak besar. sebab dlm web-authoring.. loading time adelah SEGALANYA. pecaya lah

alkisahnye..
bila kite amik gambar guna digital kamera, gambar tu resolution dia adelah agak tinggi sebenarnye. sebab ape tinggi? sebab kalau nk print gambar tu, cantik la dia. tapi bila kita nak guna gambar tu kat blog, dia masih cantik.. tapi saiz dia terlebih besar.
nota terlebih teknikal 2: gambar utk print DPI (dots per inch) dia adelah 300dpi, tapi utk web cuma 72dpi. jadik, kalau upload gambar yg 300dpi pada blog, ibarat menjemput lanun harta intelek utk print dlm majalah/buku/poskad/etc dan duit + credits gambar cantik seme pegi kat encik lanun.


cara nye..
so kalau gambar kat bawah ni kan (bunga ni lagi), filesize original adelah 1.34mb, resolution 2848x2136.
gambar yg tak besar sgt tapi cukup la setakat nak print 4R


kat photoshop, Open gambar tu, pastu tekan File>Save for Web... (atau tekan CTRL+ALT+SHIFT+S)

nanti satu window baru (Save for Web Window) akan keluar

kat window ni, ada beberapa tab (Original, Optimized, 2-up...), pastu bleh tukar image size, dan jugak ade preset2 utk pilih setting file yg disave nanti.


klik pada tab Optimized (kat area yg aku tulis tabs pada gambar atas)
kat belah kanan window tu lak, cari preset JPEG High pada drop down menu (yg aku label 'setting' kat gambar atas tu)
aku biase guna setting ni je. pada preset high pun file size dah cukup kecik dah pade aku.

kalau tengok kat bawah kotak gambar tu kan, ade tulis filesize imej tu sekarang (aku label 'filesize' kat gambar tu) which is 443.1KB. not bad lah. resolution dia sekarang still kekal (2848x2136). kite kecikkan la ye utk blog. width sekitar 500px dah cukup.. bergantung pada layout blog masing2
nota terlebih teknikal 3: resolution skrin yg standard sekarang ni rasenye sekitar 1280x720 (paling tinggi maybe 1920x1080)



klik kat 'Image Size' (belah bawah kanan window Save for Web tu).
pastikan box 'Constrain Proportions' tu checked, pastu tukar width dia jadik berapa yg kita nak. aku buat 440 utk blog aku. height dia akan tukar otomatik.
lepas tu klik 'Apply'


gambar belah kiri pun jadik kecik. filesize sekarang 25.83KB amacam ok tak?

bile dah set semua, tekan butang Save kat belah atas window tu and save macam biase (save jadik nama lain ye. jangan overwrite file asal nanti menyesal)

kalau check balik kan.. file asal dia yg bersaiz 1.34 MB (1340KB lebih kurang) sekarang dah saiz 25.83KB

so kalau ada photoshop, rajin2 la guna 'Save for Web' feature ni utk save gambar yg nak upload. kurang dah masalah blog berat yg berpunca dr gambar.

gambar last ni berbeza sikit drpd yg dlm tutorial sebab tambah watermark and buat saiz 480


recap...
  • Open gambar 
  • tekan CTRL+ALT+SHIFT+S utk bukak window 'Safe for Web'
  • tukar setting jadik JPEG High
  • tukar Image Size (width jadi sekitar 500), klik Apply
  • tekan butang Save

nota akhir: filesize kecik ni bukan la bermakna boleh letak jutaan gambar ye. bersederhana lah dlm mengupload gambar dlm blog :D









Tentang Penulis Ini                                          


kusut juga penulis untuk blog kusut-blogs. Anda boleh mengikuti beliau di sini pada setiap hari Isnin dan di Twitter @kusut.

Untuk membaca semua hasil penulisan beliau di blog 100penulis.com, anda boleh klik label kusut. Entry terbaru di blog beliau ketika ini ialah 'Song : Muse - Knights of Cydonia'

9 comments:

hentakbelipat said...

wow...pengajaran yang superb!!thanks kusut! kau memang terer

MuJE said...

nice kusut! tp aku pakai VSO jer senang..hihi click click click jer...=)


Chinta - Slot Akasia TV3 + OST Khatimah Cinta 6ixth Sense

kusut said...

@hentakbelipat
kongsi yg basic2 ni. hopefully ramai yg bleh apply ^^

@muje
gune je program yg selesa utk gune. janji filesize kecik dan semua happy XD

nur.sa said...

dah tak buang tebiat mcm dlu asik upload gambar aje dalam blog.

ni boleh apply kalau lenkali buang tebiat lg. hihi. eh, kena apply utk tiap satu2 gambar eh?

kusut said...

@nur.sa
boleh je upload gambar ramai2 kat blog. lagi meriah blog kan? tapi kene pandai manage filesize nye lah. letak sepuluh pun ok kalau file kecik!

a'ah buat kat tiap2 image la. sambil2 nak letak watermark tu.

chenta said...

tak pernah try lg..boleh try lps ni..thanks 4 sharing! ^_^

Fina Sophie said...

photoscape takda kot. mcm tak jumpe. if somebody jumpa, tell me hokeyy..

n thanks, sy dah try dekat photoshop dah. dah tau dah mcmna nak wat pasni ^^

kusut said...

@chenta
no problem. kalau ade problem tanye je

@fina
ooo takde ek? eheh tah bace kat mane tah pasal save for web tu. thanks for the info ^^

Miss Kira said...

hehehe..kira just tkr size aja..itu pun klau rjin..
hahahaha

btw..thnkz for the info..pasni leh cuba la..