Hi, dalam entri ni aku nak share 1 teknik mudah bagaimana aku besarkan gambar-gambar yang beresolusi rendah (gambar kecil) tanpa menjejaskan kualiti imejnya di mata kasar.

Ini bukan teknik yang advance ye, tapi ianya mudah.

Aku pakai teknik ni sebab ada gambar-gambar yang aku nak masukkan ke dalam blog tapi gambar nye kecil sangat. Kalau aku tekan x-large, nanti gambar-gambar tu macam pecah. Tak cantik la kan.

Cuba banding kedua-dua gambar di bawah:

Gambar asal lebih kecil dari gambar yang terpapar. Jadi gambar macam pecah-pecah.

vs.

Gambar setelah di besarkan dan diproses. Pecah-pecah dihilangkan. Gambar diterangkan.

Berminat? Read-on.

Langkah-Langkah

Untuk tutorial mudah ini, korang perlukan Photoshop. Kalau tak dek Photoshop, erm... kena cari lah satu salinan hehehe.

1. Buka gambar asal dengan Photoshop.

File --> Open --> Pilih Imej

2. Besarkan dimensi / resolusi imej asal. 

Besarkan imej asal ke resolusi dan dimensi yang kita nak.

Image --> Image Size --> Tingkatkan nilai Width.

3. Kurangkan kesan-kesan pecah (noise) dan artifak

Fungsi utama dalam menghilangkan segala kesan pecah-pecah dan noise.

Filter --> Noise --> Reduce Noise

Tingkatkan Preserve Detail kalau gambar menjadi terlalu kabur (blur).

Tingkatkan Sharpen Details kalau nak gambar menjadi lebih tajam. Bergantung pada imej, Sharpen Details yang agak tinggi nilainya boleh menyebabkan kesan-kesan pecah tidak hilang sepenuhnya.

4. Tajamkan Imej

Filter Reduce Noise boleh menyebabkan gambar sedikit 'blur'. Kita atasi dengan filter Sharpen Edges.

Filter --> Sharpen --> Sharpen Edges

5. Tingkatkan Kejelasan Warna

Untuk memberikan efek imej yang lebih timbul, kita gunakan filter Unsharp Mask.

Filter --> Sharpen --> Unsharp Mask

6. Tingkatkan Keceriaan Warna

Unsharp mask boleh mengakibatkan warna-warna di imej menjadi kurang ceria. Kita tingkatkan keceriaan imej dengan meningkatkan 'vibrance'nya .

Image --> Adjustment --> Vibrance

Tingkatkan vibrance sesedap rasa.

Bagaimana Untuk Besarkan Gambar Tanpa Jejas Kualiti Imej

• , •
• Graphic Photoshop Tutorial Windows •
• 3 Komen •
• Unknown
  Unknown

— Teruskan Pembacaan —

Tiada Photoshop? Tiada masalah.

Zaman sekarang, hampir segalanya wujud secara online. Apa yang korang perlukan hanyalah internet yang OK dan browser/pelayar internet yang terkini.

Secara peribadi, aku sarankan Google Chrome. Bukan sebab Google bagi aku komisyen bila aku rekemen Chrome; tapi pada aku Chrome adalah browser yang paling tak banyak songeh. It just works.

Malah, untuk kawan-kawan atau pakcik makcik aku sendiri, aku cadangkan Chrome aje. Sebabnya:

1. Chrome auto-update. Dia update atau kemaskini dirinya secara automatik. Bila kita pakai Chrome, kita sentiasa akan pakai yang terkini.
2. Tak perlu install Flash player sebab dalam Chrome dah memang ada flash player terbina dalam.
3. Chrome adalah antara yang terpantas (jika bukan yang terpantas).
4. Chrome di Android atau IOS boleh sync (segerak) secara automatik. Bookmark di PC akan wujud di phone gak. 
5. Semua servis Google macam Google Search, Blogger, Youtube, Gmail dan sebagainya 100% serasi dengan Chrome (dah semua ni milik Google kan).

Pendek kata, install it and forget about it. It is that simple.

Okay, dah habis story pasal browser dan berbalik kita pada topik utama entri ni iaitu aku nak share sikit pasal servis online untuk kecilkan gambar atau imej untuk korang gunakan dalam blog atau artikel korang sendiri

Bacaan Lanjut: Kenapa kita patut pakai gambar bersaiz kecil di blog

Bacaan Lanjut: Bagaimana untuk kecilkan file PNG

JPEG

Untuk file JPEG, aku akan bandingkan hasil pemampatan imej JPEG dari 

1. PicResize.com
2. CompressNow.com
3. CompressJPEG.com

Dan sebagai perbandingan, aku akan mampatkan file yang sama dengan menggunakan Adobe Photoshop CS 6 pada tahap mampatan 50% dan 60% (lagi tinggi, lagi bagus qualiti imej gambar JPEG, tetapi mungkin saiznya lebih besar).

Fail imej yang akan dijadikan bahan eksperimen adalah imej di bawah:

Dimensi dan Resolusi: 2560 x 1600
Saiz Imej : 486 KB

Klik pada gambar untuk download imej asal yang bersaiz besar.

Original (Crop)

Untuk memudahkan perbandingan, kita akan bandingkan file di atas (original - crop) dengan fail yang dimampatkan semula oleh servis-servis online ini.

PicResize.com

PicResize.com adalah servis yang membolehkan kita mengecilkan saiz dan dimensi gambar (contohnya dari 2000x1000 kepada 500x250 px).

Tapi untuk tujuan pemampatan semula (re-compress) pada dimensi yang sama, PicResize.com bukanlah satu solusi yang bagus.

Hasil pemampatan semula PicResize.com : 425 KB (Pengecilan sebanyak 12% sahaja).

Kualiti Imej : Sangat baik. Tak nampak berbeza di mata kasar.

PicResize.com. Kualiti yang hampir sama dengan original. Tetapi saiz file pun sama. Tak disarankan.

Komen: Tidak disarankan untuk tujuan pemampatan semula.

CompressNow

CompressNow merupakan servis pemampatan semula JPEG sahaja. Kelebihan CompressNow berbanding pesaing adalah, ia mengizinkan kita set berapa % kekuatan enjin pemampatnya.

Lebih besar peratusannya, lebih kuat ia cuba untuk memampatkan imej asal. Jadi, gambar menjadi lebih kecil tetapi kualiti gambar juga mungkin menjadi lebih teruk.

Hasil Pemampatan pada 50% : 142 KB (Pengecilan sebanyak 69.8%)

Kualiti Imej pada 50% : Baik. Secara kasarnya, imej masih kelihatan sama kecuali di bahagian yang ada gradient, kelihatan seperti ada lapis demi lapis (imej asal tiada).

CompressNow 50%

Hasil Pemampatan pada 60% : 127KB (Pengecilan sebanyak 73.9%)

Kualiti Imej pada 60% : Agak kurang baik. Detail pada gambar dah mula hilang. Gradient kelihatan seperti lapisan-lapisan warna yang semakin jelas.

CompressNow 60%. Artifak JPEG dah mula kelihatan. Kualiti gambar terjejas dengan agak teruk.

Komen: Elakkan pakai 60%. Paling teruk pun, pakai pemampatan 50%.

CompressJPEG.com (Recommended)

CompressJPEG.com pun adalah servis yang khas untuk memampatkan file JPEG sahaja. Kelebihan CompressJPEG.com adalah, kita boleh upload sebanyak 20 file serentak (batch upload).

Hasil mampatan boleh di download dalam bentuk 1 file zip. Jadi, mudah lah kalau kita nak kecilkan semua gambar yang kita nak masukkan dalam artikel blog kita kan.

Hasil Pemampatan: 200 KB (Pengecilan sebanyak 58.9%)

Kualiti Imej : Sangat baik. Hampir-hampir tidak nampak sebarang perubahan kualiti di mata kasar.

Kualiti imej yang hampir sama dengan yang asal. Tetapi saiz kurang lebih dari separuh. Amat disarankan.

Komen: Walaupun ia tak dapat mengecilkan file JPEG seperti CompressNow, tetapi ia mampu mengekalkan kualiti imej asal tanpa pengguna perlu meneka-neka apakah % pemampatan yang perlu digunakan. Highly recommended.

Adobe Photoshop CS 6 (Rujukan)

Photoshop, lebih tinggi nilai %, lebih baik kualiti imejnya. Justeru, lebih besar saiz gambarnya.

Hasil Mampatan Photoshop @ 50%: 205 KB

Imej Kualiti @ 50%: Agak kurang baik. Banding dah mula boleh nampak.

Kualiti yang tidak memberangsangkan.

Hasil Mampatan Photoshop @ 60%: 310KB

Imej Kualiti @ 60%: Baik.

Walaupun imej yang baik (dah nampak banding tu, so tak dapat sangat baik), saiz nya amat besar. 

Komen: Photoshop @ JPEG 60% menghasilkan imej yang baik tetapi saiz yang sangat besar. 310KB berbanding pesaing terdekat, 200 KB sahaja.

PNG

Untuk PNG, kita hanya ada TinyPNG.com vs. CompressPNG.com

Kalau kita nak kekalkan transparency yang ada pada imej kita, kita kena pakai PNG. Malah, kalau imej kita tidak banyak variasi gambar (seperti screenshot Windows Explorer), file PNG akan menjadi lebih kecil berbanding PNG. Bacaan Lanjut: Klik sini.

TinyPNG.com

TinyPNG adalah servis yang fokus pada pengecilan file PNG tanpa menghilangkan ciri-ciri transparent-nya.

Perlu diingatkan bahawa, ia adalah lossy compression ye. Atau bahasa kampungnya, kualiti imej mungkin sedikit terjejas tetapi tidak dapat di lihat oleh mata kasar.

Hasil Mampatan: 401.6 KB --> 100.8 KB (-75%)

Imej Kualiti : Sangat Baik. Hampir-hampir tidak nampak oleh mata kasar.

TinyPNG.com

TinyPNG.com in action.

CompressPNG.com (Recommended)

CompressPNG.com ini dihasilkan oleh pihak yang membangunkan CompressJPEG.com. Antarmuka antara kedua-dua web ini juga hampir-hampir sama.

Apa yang berbeza adalah, CompressPNG.com menerima file PNG dan mengecilkan file PNG manakala CompressJPEG.com menerima dan memproses file JPEG sahaja.

CompressPNG pun seperti TinyPNG, adalah lossy compression.

Hasil Mampatan: 401.6 KB --> 91 KB (-77%)

Kualiti Imej: Sangat Baik

CompressPNG.com

Antarmuka CompressPNG.com

Komen: CompressPNG.com menghasilkan file yang lebih kecil dari TinyPNG pada kualiti imej yang sama.

Pemenang dan Saranan

So, gambar dah tunjuk. Keputusan pun dah bagi. Sekarang ni nak pakai yang mana satu?

Mudah cakap, kalau JPEG, pakai CompressJPEG.com. Kalau PNG, pakai CompressPNG.com

Kalau file tu terlalu besar (resolusi) untuk blog, kecilkan dulu resolusinya di PicResize.com dan mampatkannya di CompressPNG.com atau CompressJPEG.com.

Nota Kaki: 

Berbaloi tak nak kecilkan file sebegini rupa?

Yup. Memang berbaloi. Selepas aku mampatkan semula semua file-file gambar di blog PendekarLaut.com ni, PageSpeed Insights score blog ni meningkat dari 83% ke 87%.

Alhamdulillah.

Kecilkan dan Mampatkan File Imej dan Gambar Secara Online

• , •
• Artikel Graphic Web •
• 1 comment •
• Unknown
  Unknown

— Teruskan Pembacaan —

Dalam entri sebelum ni, aku ada cakap pasal saiz gambar akan mengakibatkan blog kita perlahan dan kurang mesra SEO kan. Tapi aku tak sempat kupas tentang PNG. Hanya JPEG sahaja.

Kalau korang nak tau, ada gambar yang kalau kita save as PNG akan menjadi lebih kecil berbanding fail JPEG.

Ini kerana, PNG walaupun ia adalah lossless compression, tapi lebih bijak mengendalikan fail-fail imej atau gambar yang kurang variasi warna berbanding JPEG.

JPEG Vs. PNG

Jom kita banding dua gambar di bawah.

JPEG - 191 KB

PNG - 115 KB

Kan? Fail PNG hanya 115 KB sahaja berbanding fail JPEG (Quality: 60) yang sebesar 191 KB (dekat sekali ganda kot).

Ini tak ambil kira yang fail PNG .. kualiti gambarnya jauh lebih baik dari fail JPEG termampat.

Tetapi bagaimana kalau kita nak kecilkan lagi fail PNG ni?

TinyPNG

Di sini lah TinyPNG memainkan peranan. TinyPNG mampu untuk mengecilkan fail PNG kita tanpa menjejaskan kualiti imej PNG kita dari pandangan mata kasar.

PS: TinyPNG adalah lossy compression tetapi masih mengekalkan alpha channel yang ada di fail PNG. Alpha channel ni .. ala.. yang bagi fail PNG boleh transparent tu la :)

So untuk demo kebagusan TinyPNG ni, aku upload gambar PNG di atas ke websitenya untuk ia mampatkan. Hasilnya adalah seperti di bawah.

Dari 118 KB dah menjadi 64 KB sahaja. Amazing kan.

Dan kalau kita banding dengan fail JPEG tadi, lebih dari 3x ganda kecilnya.

Hasil mampatan tinyPNG, aku tunjuk kat bawah ni. Feel free untuk download ketiga-tiga gambar dan bandingkannya.

So lepas ni, boleh la korang compress file PNG korang kat sini kan :)

Peringatan

Kalau gambar yang banyak warna seperti gambar panda di atas, file JPEG selalunya lebih kecil.

PNG bagus dalam memampatkan gambar yang tidak terlalu banyak variasi warna. Sebab tu lah, gambar dari kamera kita tak pernah tengok ia dimampat dalam format PNG kan.

Dan sekiranya korang nak kekalkan transparency yang ada pada gambar sedia ada, convert atau save ke JPEG adalah tidak digalakkan sebab JPEG akan menghilangkan kesan transparent tu.

Nasib baik ada pokcik TinyPNG. Gambar tersebut boleh dikecilkan tapi transparency nya dikekalkan/

Good job TinyPNG.

Bagaimana Nak Kecilkan Gambar dan Imej Berformat PNG

• , •
• Artikel Graphic SEO •
• Tiada Komen •
• Unknown
  Unknown

— Teruskan Pembacaan —

Alamak!

Aku lupa la. Ini Blogspot.

Aku terlupa yang Blogspot tak akan kecilkan gambar-gambar yang kita masukkan secara automatik. Di WordPress boleh la kalau kita pakai plugin EWWW tu.

Dan jangan ingat benda ni tak ada impact ye. Besar impact dia.

Baik dari segi pengguna dan SEO.

Tak ada pengguna yang sanggup tunggu page blog korang (termasuk blog aku le.. hue hue) loading lebih dari 10 saat punya.

Tu pun kira dah baik hati sangat tunggu 10 saat. Kalau aku, 5 saat... dah tutup tab tu. Assume page tak loading hehe.

Ye la... beratus ribu page lagi menanti untuk di klik dan di explore kan (search result di Google nun). Jadi, kalau satu lambat klik, boleh klik yang lain.

So, macam mana nak check yang Blog korang tu gambar-gambar dalam tu saiz gabak ke atau saiz yang cun melecun kecil molek?

Ada banyak cara. Tapi cara yang paling simple dan cepat adalah dengan menggunakan PageSpeed Insights. Tool yang Google sendiri bangunkan untuk webmaster check web masing-masing. Kita yang blogger ni pun kira webmaster lah ... ye tak :D

Klik sini untuk buka PageSpeed Insights. Kemudian, masukkan la URL blog korang dan tekan butang ANALYZE.

Sementara dia tengah analisa dengan bergaya tu, meh sini aku tunjuk result blog PendekarLaut.com sebelum dan selepas aku kecilkan gambar-gambar di dalamnya.

Sebelum

Dua dua score teruk. Yang paling parah kat 'mobile'. 53 markah sahaja. Sebaiknya kita kena usahakan agar mode desktop dan mobile dapat sekurang-kurangnya 85%.

Let see, berapa yang dapat aku tingkatkan dengan kecilkan gambar-gambar ni.

Selepas

See, hanya dengan kecilkan beberapa gambar sahaja, score dah naik ke 83. Sikit lagi nak sentuh 85%. Nanti kita ikhtiar kot cara lain pulak.

Aku tak nak la kecilkan sangat gambar-gambar tu sampai nampak segala artifak kat JPG tu. Buruk jadinya. Speed speed gak kan... tapi kualiti tetap kena jaga der.

Mobile punya score pun meningkat ke paras yang lebih selamat. 74%

Tapi aku tipu sikit kat sini. Selain dari gambar yang aku kecilkan, aku guna kan Blogger punya mobile template, sebab ia lebih laju. Yang kureng sikit.. rupanya lah (adeh.. sakit mata wei).

Tak pe, esok-esok kita customize sendiri. Kasi cun tapi ringan.

Apa-apa pun, I am still not very happy with this result. Nak cuba dapat at least 88% jugak. Kalau di WordPress aku leh setting kat 'Leverage Browser Caching'. Kat Blogspot hmmm... no idea haha.

Macam Mana Nak Kecilkan Gambar?

Ada yang tanya macam mana aku kecilkan gambar-gambar tu.

Hmm, tak dek la special mana pun. Aku just bukak gambar tu kat Photoshop dan File -> Save for web. Lepas tu pakai JPEG dengan Quality 60.

Kalau gambar tu besar sangat, aku resize la H (Height) di ke 720.

Tu je.

Selamat mencuba.

PS: Bayangkan kalau blog korang dah lama...dan banyak gambar... pergh. Mau pengsan nak kecilkan setiap satu dan upload balik. Tak pe..chaiyo'

Untuk gambar PNG, korang boleh baca kat sini. Bagaimana Nak Kecilkan Gambar dan Imej Berformat PNG (baca sini).

Kalau tak ada Photoshop, aku dah tulis satu artikel khas untuk korang. Yang ada Photoshop pun patut baca sebab servis-servis online ni lagi power dari Photoshop kita, Baca sini.

Update

Selepas aku set hanya 3 post sahaja yang terpapar di home page (yang lain kat page berikutnya), score PageSpeed dah naik ke 88%. Alhamdulillah.

Ooops! Terlebih Sudah - Kecilkan Saiz Gambar di Blog Untuk SEO Yang Lebih Baik

• , •
• Artikel Graphic SEO •
• Tiada Komen •
• Unknown
  Unknown

— Teruskan Pembacaan —