Gambar blog lebih ringan dalam format WebP

Assalamualaikum

Biasa kita dengar format untuk gambar ni ada JPG, JPEG, PNG, dan kadang-kadang GIF untuk gambar yang bergerak-gerak, gelek-gelek tu kan. Tapi kali ni dah ada format baru pula iaitu WebP (baru ke?).

Format WebP ni dibina oleh Google sebagai format gambar baru yang akan simpan gambar dalam saiz yang lebih kecil. Katanya, gambar dalam format WebP ni 26% lebih kecil daripada gambar sama dalam format PNG. Jadi format ni lebih cepat untuk dibuka dalam website berbanding format lain. Tapi setakat ni aku tengok in general memang gambar WebP lagi kecil daripada mana-mana format pun.

Mula-mula aku tak tahu pun ada format gambar WebP sebab memang biasa guna yang 4 atas tu je. Aku pertama kali jumpa format WebP sebelum ni masa download gambar untuk dibuat lampiran dalam tugasan untuk kelas semester-semester lepas. Tu pun aku hangin je kalau dapat gambar WebP tu. Sebabnya gambar WebP ni tak boleh buka dan tengok macam gambar format lain yang aku biasa guna.

Kalau JPG, JPEG, PNG, etc tu elok je keluar dalam Photo Viewers, gambar WebP ni sebaliknya akan muncul dalam default browser kita. Macam aku, dia akan keluar dalam new tab Google Chrome. Annoying kan. Satu kerja kena convert online dulu gambar WebP tu kepada format lain baru boleh buka dalam mana-mana app laptop. Lagi annoying. (Tapi kalau buka dalam phone takde masalah pun.)

Menyampah pada mulanya tapi ada kebaikan sebenarnya kalau simpan gambar sebagai WebP ni.

Macam aku tulis kat atas, saiz fail gambar WebP adalah lebih kecil. Google sangat galakkan untuk kita guna format WebP ni dalam gambar untuk sebarang laman web sebab nanti page tu akan jadi lebih ringan. Senang nak buka. Markah performance website dalam Google Search Console pun cemerlang.

Contoh perbezaan antara gambar format biasa dan format WebP, boleh tengok di bawah.

Fail gambar original dalam format JPG

Ukuran gambar: 6000 x 8000

Saiz: 4.36 MB

Lebih 4MB. Berat kan? Tapi cuba tengok kalau kita tukarkan format gambar tu kepada format WebP.

Fail gambar original dalam format WebP

Ukuran gambar: 6000 x 8000

Compression: 80% lossless

Saiz: 1.65 MB

Lepas ubah format kepada WebP, dapat la gambar tu jadi hampir 3MB lebih ringan daripada gambar asal walaupun ukuran dia sama besar je. Ada sedikit compression dalam gambar WebP tu sebab aku save pada kualiti 80% daripada gambar asal. Tapi kalau buka dua-dua gambar tu sebelah menyebelah, tak nampak beza pun. Tak ada masalah gambar pecah ke apa walaupun saiz lebih kecil dan compressed.

Selain convert kepada format WebP, salah satu cara berkesan untuk kecilkan saiz gambar adalah dengan kecilkan ukuran gambar. Bahasa mudah, RESIZE.

Ye la kalau ukuran gambar besar sangat sampai cecah 8000px, susah juga nak letak dalam blog kan. Kalau kita kecilkan guna pilihan gambar Blogger ni sebagai Small-Medium, memang ukuran gambar lebih kecil dan muat ngam-ngam dalam entri tapi masalah dia, gambar nampak pecah. Kalau guna Large-Original, gambar kekal jelas tapi kang besar sampai entri jadi panjang berjela pula.

Kalau ukuran gambar besar dan kita letak pula saiz original, memang entri panjang sebab gambar je haha jenuh nak skrol

Orang kata lebar paling bagus untuk gambar dalam Blogger ni antara 650-700px. Tapi aku biasa guna 800-1200px untuk gambar dalam posisi landskap. Ala gambar besar sikit takpe sebab boleh kecilkan. Kecil tu yang susah sebab pecah kalau dibesarkan haha. Tapi untuk portrait, aku main letak je ukuran tu asalkan tinggi gambar tu tak terlalu melangit dalam entri lol

Bagaimana kalau kita kecilkan ukuran gambar daripada dimensi sebenar gambar tu?

Gambar berukuran lebih kecil dalam format JPG

Ukuran baru: 1000 x 1333

Saiz: 1.00 MB

Macam cantik macam comel kan saiznya jadi 1.00MB je daripada gambar asal tadi lebih 4MB. Aku dulu biasa guna kaedah resize ni la untuk kecilkan saiz gambar dan bagi ukuran gambar tu cantik je dalam blog. Senang juga sebab tak payah nak convert kepada format lain since kita kekalkan format asal je.

Tapi sebenarnya lebih elok jika kita amalkan kedua-dua sekali benda di atas yakni convert kepada format WebP DAN resize ukuran gambar. Nanti dapatlah kita gambar ideal seperti di bawah.

Gambar berukuran lebih kecil dalam format WebP

Ukuran baru: 1000 x 1333

Compression: 80% lossless

Saiz: 175 KB

Dah la ukuran ngam-ngam dalam blog, saiz pun kecil sebab daripada 4.3MB, gambar tu jadi 175KB ye. KILOBYTE!! Aku pun tak tahu berapa puluh peratus penjimatan saiz tu ahahah. Tapi memang jimat la. Umpama dulu gambar tu terlebih obesiti tapi kini body kerengga serupa model internasional gittew~

Sebelum ni masa letak gambar dalam blog, aku selalu sangka lagi besar ukuran dan saiz fail gambar, lagi elok sebab pembaca boleh tengok gambar tu dengan jelas. Rupanya SALAH. Kalau gambar besar sangat, blog akan jadi loading dan lambat nak buka. Elok kita berangan pembaca akan suka gambar tu, rupanya mereka tak tengok pun dan blah terus sebab blog kita lembab nak buka dan mereka malas nak tunggu.

Rugi kan kalau hilang pembaca disebabkan hal tu? 😢

Patut la panjang list warning Google Search Console aku sebab gambar banyak saiz MB besar-besar dan ukuran pun beribu-ribu pixel. Memula baca report tu, aku emo tau. Rasa cam "eh blog aku suka hati aku la nak letak gambar cemana pun" hahahaha. Tapi bila fikir balik, tak salah pun ikut saranan Google untuk guna gambar format WebP tu sebab aku pun suka kalau gambar aku ringan dan blog tak loading lama.

(Walaupun sebenarnya Google push guna WebP tu macam nak promote orang guna format dia je daripada yang pesaing punya 👀)

Sebab tu aku sekarang memang amalkan convert gambar besar-besar untuk blog ni dalam format WebP. Proses ni kalau buat online pun boleh tapi aku biasa guna Adobe Photoshop. Senang boleh sekali harung kecilkan ukuran gambar dan edit letakkan watermark sekali. Lagipun "free website" tu kadang-kadang ada limit boleh convert berapa gambar dalam sehari so I malas nak tunggu haha

Cuma kalau guna Adobe Photoshop, leceh sikit je la sebab kena transfer gambar ke laptop tapi aku dah biasa so tak kisah pun. Kualiti gambar akhir pun okey so kita teruskan je la. Aku pernah je cuba resize dalam phone guna PicsArt dulu sebelum convert kepada WebP tapi gambar resized tu jadi pecah. Compressed teruk sampai nampak pixelated dan tak cantik. Convert WebP lagi huru-hara lol

Selain tu, kalau nak convert gambar kepada WebP dalam Photoshop, ada plugin yang kita kena download dulu sebab sistem asal Photoshop tu takde kemudahan untuk WebP pun. Aku download haritu daripada laman web GitHub for WebPShop 0.4.0. Lepas download tu kena pindahkan benda tu ke dalam folder Photoshop dan lepas tu baru akan wujud pilihan untuk kita "Save as WebP" dalam tu.

Jadi sekarang boleh la buka atau save gambar WebP dalam Photoshop.

Semoga perkongsian ini berguna kepada anda yang membaca. Kot le korang pun ada masalah macam aku jenis letak je gambar sebarang saiz pastu tiberr je blog jadi slow haha. Pasni boleh la amalkan convert gambar kepada WebP juga kan. Tak ada Photoshop? Takpe kita beli je di Shopee huhu

Terima kasih kerana membaca.
Bye dan Assalamualaikum.