Bagaimana Nak Kecilkan Gambar dan Imej Berformat PNG

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.