PNG ke WebP: Cara Tukar dan Kecilkan Imej PNG

Dikemaskini kali terakhir: June 27, 2026

PNG adalah format yang sesuai untuk grafik tajam dan ketelusan, tetapi failnya besar — terutamanya untuk apa-apa yang bersifat fotografi. Menukar PNG ke WebP mengekalkan ketajaman dan saluran alpha sambil mengurangkan saiz byte secara dramatik. Perangkapnya ialah memilih antara lossless versus lossy WebP dengan betul, kerana mod yang sesuai bergantung pada kandungan imej. Panduan ini meliputi kedua-duanya, dengan saiz ukuran sebenar.

Jawapan ringkas: patutkah anda menukar PNG kepada WebP?

Ya untuk imej web — WebP mengekalkan ketelusan dan ketajaman PNG pada pecahan saiz. Pilih mod mengikut kandungan:

Untuk satu imej, gunakan Image Converter; untuk sekumpulan, gunakan cwebp. Keputusan format di sebalik ini terdapat di image formats explained.

Berapa banyak penjimatan dari PNG ke WebP?

Ia bergantung sepenuhnya pada mod WebP mana yang anda pilih, kerana PNG adalah lossless dan perbandingan ini tidak setaraf.

Dua kesimpulan jujur daripada nombor-nombor ini. Pertama, WebP lossless bagi foto masih besar (568 KB) — kerana pengekodan lossless tidak boleh membuang hingar dalam foto. Jika kandungan adalah foto, ia haruslah WebP lossy, bukan lossless. Kedua, WebP lossless menyerlah pada grafik rata: pada tangkapan skrin dan seni UI, ia biasanya 20–30% lebih kecil daripada PNG dengan piksel yang sama. Padankan mod dengan kandungan.

Sumber yang sama merentasi keempat-empat format menunjukkan kedudukan PNG berbanding alternatif:

Imej mana yang patut kekal sebagai PNG?

Sesetengah imej tidak seharusnya ditukar sama sekali. Kekalkan PNG apabila imej itu adalah logo atau ikon yang boleh menjadi SVG pula (vektor lebih kecil dan tajam), atau apabila anda menghantar ke sistem yang memerlukan PNG secara khusus — sesetengah saluran cetak (print pipelines), beberapa editor lama (legacy editors), dan kebanyakan pertukaran alat reka bentuk menjangkakan PNG. Untuk ikon kecil tunggal (di bawah ~3 KB), penukaran itu tidak berbaloi dengan kerumitan saluran paip; biarkan ia sebagai PNG. Peraturan keputusannya sama seperti di image formats explained: tukar PNG kepada WebP apabila bait (bytes) itu penting dan destinasi adalah pelayar web, kekalkan PNG apabila keserasian atau alternatif vektor lebih penting.

Kaedah 1: Penukar Pelayar

Untuk satu imej, gunakan Imagic AI Image Converter: muat naik PNG, pilih WebP, ambil lossless untuk grafik atau kualiti ~80 untuk foto, dan muat turun. Squoosh bagus untuk membandingkan lossless vs lossy secara sisi demi sisi sebelum anda membuat komitmen.

Kaedah 2: baris perintah cwebp

## Lossless WebP (best for graphics, screenshots, sharp text, transparent UI)
cwebp -lossless input.png -o output.webp

## Lossy WebP (best if the PNG is actually a photo)
cwebp -q 80 input.png -o output.webp

## A folder of PNGs, lossless, in parallel
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless ialah bendera utama — tanpa ia, cwebp lalai kepada lossy, yang akan mengaburkan tepi nipis. Sentiasa sertakan -lossless untuk grafik dan tangkapan skrin.

Kaedah 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless for sharp graphics; switch to lossless=False for photographic PNGs
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Apabila lossless=True, nilai quality diabaikan; apabila lossy, tetapkan ia kepada ~80 untuk foto.

Adakah WebP mengekalkan ketelusan PNG?

Ya. WebP menyokong saluran alfa penuh dalam mod lossy dan lossless, jadi PNG transparan menjadi WebP transparan tanpa kerja tambahan. Ini adalah sebab utama untuk menukar aset UI dan potongan produk: anda mengekalkan ketelusan dan kehilangan kebanyakan bait. Untuk perincian ketelusan, lihat cara membuat imej transparan.

Bagaimana cara menyediakan WebP dengan fallbacks PNG?

Sokongan WebP adalah ~98%, tetapi kekalkan fallbacks PNG untuk klien lama dan e-mel:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

Pelayar akan memilih jenis pertama yang disokong; <img PNG adalah fallbacks terakhir. Untuk grafik tajam, simpan lebar/tinggi supaya susun atur tidak berubah. Lihat WebP converter guide untuk corak fallback penuh termasuk AVIF.

Bila Konversi PNG ke WebP Adalah Langkah yang Salah?

• Emel. Banyak klien emel mengabaikan WebP. Kekalkan PNG (atau JPEG) untuk emel.
• Bila anda memerlukan JPEG pula. Jika PNG adalah foto untuk pasaran yang hanya menerima JPEG, tukar kepada JPEG, bukan WebP. Lihat WebP to JPG.
• Pelayar tertanam lama tanpa sokongan WebP — walaupun fallback <picture> meliputi ini.
• Bila PNG sudah kecil. Ikon 2KB mendapat sedikit daripada penukaran; kos paip tidak berbaloi.

Kesilapan Biasa

• Menggunakan WebP lossy untuk grafik tajam. Lossy mengaburkan tepi dan teks yang halus. Gunakan -lossless untuk tangkapan skrin dan UI.
• Menggunakan WebP lossless untuk foto. Ia kekal besar kerana lossless tidak dapat menghilangkan photographic noise. Gunakan lossy.
• Mengabaikan sandaran (fallback) PNG. Pelayar lama dan e-mel memerlukan <img> PNG.
• Lupa untuk mengubah saiz dahulu. WebP 4000px masih muat turun 4000px, tidak kira formatnya.
• Menganggap PNG sebagai format foto. Jika imej itu adalah foto, mungkin ia bermula dari JPEG/RAW — tukar dari sumber yang betul.

Soalan Lazim

Berapa banyak penjimatan menukar PNG kepada WebP?

Untuk kandungan fotografi, ia 25 hingga 35 peratus lebih kecil pada kualiti yang sama; untuk grafik rata dengan ketelusan, selalunya lebih. WebP menyokong mod lossy dan lossless serta saluran alfa (alpha channel), jadi ia meliputi apa yang dilakukan oleh PNG pada saiz yang lebih kecil.

Adakah setiap PNG perlu menjadi WebP?

Untuk penghantaran web, ya, dengan sandaran (fallback) PNG untuk pelayar yang sangat lama. Simpan master PNG jika anda mungkin menyunting semula, kerana WebP lossy adalah satu generasi mampatan (compression) yang berbeza. Hantar WebP melalui elemen <picture> dengan sandaran PNG.

Adakah WebP menyokong ketelusan?

Ya — WebP menyokong saluran alfa penuh, jadi PNG yang lutsinar boleh ditukar dengan bersih. Ini adalah sebab utama untuk memilih WebP berbanding JPEG untuk grafik dengan ketelusan. Lihat panduan imej lutsinar.

Apakah penukaran baris arahan (command-line)?

cwebp -q 80 input.png -o output.webp. Bendera -q menetapkan kualiti (80 adalah lalai web). Untuk lossless, gunakan -lossless. Jalankan secara pukal dengan gelung shell atau ImageMagick. Lihat panduan penukar WebP.

Adakah WebP menyokong animasi?

Ya — WebP menyokong imej animasi, yang lebih kecil daripada GIF animasi setara. Untuk gelungan pendek, WebP animasi adalah alternatif moden kepada GIF. Untuk animasi yang lebih panjang, video (MP4) masih lebih kecil dan lebih baik.

Patutkah saya menukar PNG kepada WebP lossy atau lossless?

Lossy untuk fotografi (jauh lebih kecil, kehilangan tidak kelihatan pada kualiti 80); lossless untuk grafik, teks, dan master di mana setiap piksel mesti tepat. WebP menyokong kedua-duanya. Kesilapan biasa ialah menukar logo secara lossy, yang menambah artifak pada tepi tajam — simpan grafik lossless, tukar foto lossy.

Apakah bendera kualiti cwebp?

Bendera -q menetapkan kualiti lossy pada skala 0 hingga 100 — 80 adalah lalai web (kehilangan tidak kelihatan, kira-kira suku daripada bait kualiti 100). Gunakan -lossless dan bukannya -q untuk grafik di mana setiap piksel mesti tepat. Kualiti yang lebih tinggi bermakna fail yang lebih besar dengan pulangan visual yang semakin berkurangan; 80 adalah titik manis praktikal untuk penghantaran web fotografi.

Adakah menukar PNG kepada WebP mempercepatkan laman saya?

Ya, secara boleh diukur — WebP 25 hingga 35 peratus lebih kecil daripada PNG untuk kandungan yang sama, jadi halaman dengan banyak grafik memuat lebih pantas dan LCP bertambah baik. Penjimatan ini terkumpul merentasi halaman dengan puluhan ikon atau grafik. Hantar WebP dengan sandaran PNG supaya pelayar yang lebih lama masih dapat memaparkan imej, dan anda mendapat kelajuan tanpa kehilangan keserasian.

Kredit Imej

• Perbandingan PNG-to-WebP dan carta bar saiz — dihasilkan oleh penulis daripada foto gaya e-dagang (Pexels #16675632, photo by Mikael Blomkvist) untuk menunjukkan penjimatan PNG-to-WebP yang diukur secara sebenar.