Wednesday, October 08, 2014

Kecilkan dan Mampatkan File Imej dan Gambar Secara Online


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

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.

0 comments:

Post a Comment