Apa yang sebenarnya dijimatkan oleh WebP lossless berbanding PNG

Versi ringkas

WebP lossless sering lebih kecil daripada PNG untuk piksel yang sama. Itulah sebab praktikal orang menggunakannya.

Namun perkataan "sering" itu penting. WebP lossless bukan pengganti ajaib untuk setiap PNG. Ia cenderung menjimatkan paling banyak pada imej dengan ketelusan, tangkapan skrin, tangkapan UI, dan kandungan grafik/foto bercampur. Ia mungkin menjimatkan sedikit, atau kadangkala kalah, pada aset yang sangat kecil, PNG palet yang sangat dioptimumkan, dan ikon ringkas.

Jika anda mengoptimumkan laman web sebenar, soalan yang tepat bukanlah "Adakah WebP lebih baik daripada PNG?" Sebaliknya: "PNG saya yang mana menjadi jauh lebih kecil sebagai WebP lossless, tanpa menimbulkan masalah keserasian atau aliran kerja?"

Itu soalan yang lebih khusus, dan jauh lebih mudah dijawab.

Apa maksud "lossless" di sini

Lossless bermaksud piksel yang dinyahkod sepadan tepat dengan piksel sumber. Jika PNG ditukar kepada WebP lossless dan dinyahkod semula, piksel imej sepatutnya sama.

Ia tidak bermaksud fail itu sama. Metadata, pengendalian profil warna, chunk PNG tambahan, maklumat gamma, cap masa, dan chunk khusus alat mungkin berubah, dibuang, atau diwakili secara berbeza bergantung pada pipeline penukaran anda.

Perbezaan ini penting jika anda berurusan dengan imej arkib, aliran kerja cetakan, imej saintifik, bukti undang-undang, atau sebarang situasi di mana bekas fail membawa maklumat bukan piksel yang penting. Untuk penghantaran web biasa, kebanyakan pasukan terutama mengambil berat tentang piksel visual, ketelusan, dimensi, dan konsistensi warna.

Jika anda menerbitkan imej yang dibekalkan pengguna, metadata juga merupakan isu privasi. Kami telah membincangkan topik yang lebih luas itu dalam cara membuang metadata EXIF sebelum berkongsi foto dalam talian, tetapi prinsip yang sama terpakai di sini: pengoptimuman imej harus jelas tentang apa yang dikekalkan dan apa yang dibuang.

Mengapa PNG memampatkan dengan baik, dan di mana ia terhenti

PNG ialah format yang sangat baik. Ia menjadi lalai web atas sebab yang kukuh:

• Ia lossless.
• Ia menyokong ketelusan alfa.
• Ia disokong secara meluas.
• Ia boleh dijangka dan mudah digunakan.
• Ia sangat baik untuk grafik rata, tangkapan skrin, logo, dan aset UI.

Pemampatan PNG berfungsi dengan menapis baris imej dan kemudian menggunakan pemampatan DEFLATE. Gabungan itu berkesan, terutamanya apabila piksel berdekatan adalah serupa.

Masalahnya bukan PNG itu buruk. Masalahnya ialah PNG sudah lama. Model pemampatannya mempunyai lebih sedikit helah berbanding format yang lebih baharu. Setelah anda mengoptimumkan PNG dengan pengekod yang baik, anda mungkin masih membiarkan bait tidak dijimatkan kerana format itu sendiri tidak dapat mewakili sesetengah pola secekap WebP lossless.

Di situlah WebP lossless masuk.

Apa yang dilakukan WebP lossless secara berbeza

WebP lossless menggunakan sistem pemampatan yang direka khusus untuk imej, bukannya lapisan pemampatan tujuan umum yang ditampal pada baris yang ditapis. Di sebalik tabir, ia boleh menggunakan teknik seperti pengekodan ramalan, transformasi warna, palet, rujukan ke belakang, dan pengekodan entropi untuk mewakili pola piksel yang berulang atau boleh diramal secara padat.

Anda tidak perlu menghafal butiran pelaksanaannya. Model mental yang berguna ialah ini:

PNG memampatkan baris dengan baik. WebP lossless mempunyai lebih banyak cara untuk menerangkan struktur imej.

Fleksibiliti tambahan itulah sebab WebP lossless kerap dapat menghasilkan fail yang lebih kecil daripada imej sumber yang sama.

Google secara sejarah menggambarkan imej WebP lossless sebagai kira-kira 26% lebih kecil daripada PNG secara purata dalam kajiannya sendiri. Anggap itu sebagai penanda aras arah, bukan janji. Imej anda bukan purata. Sistem reka bentuk, tangkapan skrin, foto produk, ilustrasi, aset eksport, dan muat naik CMS anda akan mempunyai tingkah laku sendiri.

Di mana WebP lossless biasanya menjimatkan paling banyak

Imej telus

PNG lazim digunakan kerana ketelusan alfa. WebP lossless juga menyokong alfa, dan sering memampatkannya dengan cekap.

Ini berguna untuk:

• Potongan produk
• Pelekat dan lencana
• Tindanan antara muka
• Rajah dengan latar belakang telus
• Logo yang dieksport lebih besar daripada perlu

Penjimatan boleh ketara apabila saluran alfa mengandungi kawasan besar yang boleh diramal, tepi lembut, atau bentuk berulang. Jika anda mempunyai katalog penuh imej produk telus, WebP lossless wajar diuji awal.

Tangkapan skrin dan tangkapan UI

Tangkapan skrin sering mengandungi kawasan rata yang besar, komponen antara muka berulang, teks, ikon, bayang, dan beberapa kawasan fotografi. Campuran itu boleh menjadi janggal untuk PNG, terutama pada dimensi besar.

WebP lossless sering mengendalikan imej ini dengan baik. Tangkapan skrin UI halaman penuh yang bersaiz 900 KB sebagai PNG dioptimumkan mungkin menjadi 500–700 KB sebagai WebP lossless. Kadangkala penjimatan lebih besar. Kadangkala lebih kecil. Tetapi kategori ini menjanjikan.

Jika tangkapan skrin itu muncul dalam dokumentasi, halaman pemasaran, aliran onboarding, atau kajian kes, kesan terkumpulnya boleh menjadi nyata.

Kandungan ilustrasi dan imej bercampur

Banyak grafik web moden bukan ilustrasi tulen dan bukan juga foto tulen. Bayangkan imej hero yang mengandungi UI produk, gradien, ikon kecil, label teks, dan foto terbenam.

PNG mungkin mengekalkannya dengan sempurna tetapi menghasilkan fail besar. WebP atau AVIF lossy mungkin mewujudkan artifak di sekitar teks dan tepi jika ditekan terlalu kuat. WebP lossless boleh menjadi jalan tengah yang munasabah apabila tepi yang tepat penting.

Untuk pohon keputusan yang lebih luas merentas format imej, termasuk AVIF dan WebP lossy, lihat Format imej pada 2026: bila AVIF mengatasi WebP dan bila tidak.

Di mana PNG mungkin masih lebih baik

Ikon kecil dan aset ringkas

Untuk fail yang sangat kecil, overhead format penting. Ikon PNG 650 bait bukan calon penukaran yang jelas. WebP mungkin menjimatkan 80 bait, atau mungkin menjadi lebih besar.

Pada skala itu, kerumitan operasi mungkin melebihi manfaatnya. Jika fail sudah sangat kecil, tidak menyekat rendering, dan dicache untuk tempoh yang lama, anda mungkin mempunyai perkara lain yang lebih baik untuk dibaiki.

PNG palet yang dioptimumkan dengan teliti

Sesetengah PNG jauh lebih kecil daripada yang dijangka kerana ia menggunakan palet terhad. PNG indexed-color yang baik boleh sukar ditandingi untuk grafik ringkas.

Ini khususnya benar untuk:

• Logo kecil
• Pixel art
• Ikon rata
• Rajah ringkas
• Grafik dengan sedikit warna

Berhati-hati apabila membandingkan WebP dengan eksport PNG yang cuai. Jika PNG datang terus daripada alat reka bentuk dengan metadata tidak perlu dan tetapan pemampatan yang lemah, WebP mungkin kelihatan jauh lebih baik. Itu tidak bermaksud WebP mengalahkan PNG yang dioptimumkan dengan baik pada margin yang sama.

Ujian yang adil membandingkan WebP lossless dengan PNG dioptimumkan, bukan apa sahaja fail yang kebetulan dimuat naik.

Imej yang sepatutnya lossy

Ini kesilapan yang senyap: pasukan menukar PNG kepada WebP lossless apabila imej itu sepatutnya bukan PNG sejak awal.

Foto ialah kes biasa. Foto warna penuh yang disimpan sebagai PNG boleh menjadi sangat besar. Menukarnya kepada WebP lossless mungkin mengurangkan fail, tetapi biasanya ia masih jauh lebih besar daripada WebP lossy atau AVIF berkualiti tinggi.

Jika pengguna tidak dapat melihat perbezaannya, lossless sering menjadi matlamat yang salah. Fotografi produk, imej editorial, latar belakang, dan potret biasanya sesuai dalam format lossy dengan tetapan kualiti yang waras.

Lossless patut dikhaskan untuk kes di mana piksel tepat penting: tangkapan skrin UI, rajah, grafik sarat teks, ketelusan, carta yang dijana, dan aset yang merosot dengan jelas di bawah pemampatan lossy.

Apa yang dijimatkan selain bait

Penjimatan yang jelas ialah saiz pemindahan. Fail imej yang lebih kecil biasanya bermaksud lebar jalur lebih rendah, muat turun lebih pantas, dan tingkah laku lebih baik pada sambungan perlahan.

Tetapi ada manfaat sampingan:

• Kurang data digunakan oleh pelawat dengan pelan bermeter
• Pengisian cache imej yang lebih pantas
• Pengurangan lebar jalur CDN
• Jumlah storan dan sandaran lebih rendah pada skala besar
• Kurang tekanan pada bajet prestasi

Penjimatan ini tidak diagihkan sama rata. Satu PNG 2 MB yang ditukar kepada WebP 900 KB lebih penting daripada lima puluh ikon yang dikurangkan 100 bait setiap satu.

Inilah sebab pengoptimuman imej patut diutamakan mengikut impak halaman, bukan ideologi format. Jika Lighthouse menandakan penghantaran imej, bacalah sebagai petunjuk, bukan keputusan muktamad. Panduan kami tentang cara membaca laporan Lighthouse tanpa panik menerangkan cara memisahkan masalah prestasi yang bermakna daripada diagnostik yang bising.

Pertukaran kos nyahkod

Fail yang lebih kecil bukan satu-satunya pemboleh ubah prestasi. Pelayar juga perlu menyahkod imej sebelum melukisnya.

Penyahkodan PNG matang dan biasanya pantas. Penyahkodan WebP juga disokong secara meluas dan cekap, tetapi ia boleh menggunakan lebih banyak CPU dalam sesetengah kes. Pada peranti moden, ini jarang menjadi penghalang, tetapi pada telefon kelas rendah, halaman sarat imej, atau aset besar above-the-fold, ia wajar diukur.

Peraturan praktikal: jika WebP lossless memotong PNG besar sebanyak 30–50%, penjimatan rangkaian biasanya mendominasi. Jika ia memotong PNG kecil sebanyak 3%, pertukaran itu mungkin tidak berbaloi untuk dipedulikan.

Kerja prestasi penuh dengan keputusan ambang seperti ini. Jangan mengoptimumkan setiap bait dengan keamatan yang sama.

Kaedah ujian yang ringkas

Gunakan kelompok yang mewakili, bukan satu imej.

Cipta folder dengan contoh daripada laman sebenar anda:

• Logo dan ikon
• Tangkapan skrin
• Potongan produk
• Rajah
• PNG yang dimuat naik melalui CMS
• Imej pratonton sosial
• Grafik hero besar

Kemudian bandingkan tiga perkara:

1. PNG asal seperti yang dimuat naik
2. PNG dioptimumkan
3. Versi WebP lossless

Untuk aliran kerja command-line, pasukan sering menggunakan alat seperti oxipng, pngcrush, zopflipng, atau cwebp -lossless. Alat yang tepat kurang penting berbanding disiplin membandingkan perkara yang setara.

Jejaki:

• Saiz fail
• Kesamaan piksel selepas nyahkod
• Rendering visual dalam pelayar sasaran
• Ketepatan ketelusan
• Penampilan warna
• Masa build
• Geseran aliran kerja CMS atau reka bentuk

Hamparan ringkas sudah memadai. Tambahkan saiz fail asal, saiz PNG dioptimumkan, saiz WebP lossless, peratusan dijimatkan, dan halaman tempat imej muncul.

Kemudian susun mengikut jumlah bait yang dijimatkan. Urutan susunan itu biasanya akan memberitahu anda apa yang patut dilakukan.

Penghantaran: jangan memecahkan klien lama secara sambil lewa

Sokongan WebP kini meluas merentas pelayar moden. Untuk kebanyakan laman web awam, ia selamat digunakan. Namun, jika anda mempunyai webview terbenam, klien e-mel, pelayar perusahaan legasi, aplikasi natif, atau crawler luar biasa dalam campuran, uji sebelum menggantikan PNG secara terus.

Corak konservatif ialah mengekalkan PNG sebagai fallback dan menyajikan WebP apabila disokong:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Pendekatan ini membosankan, dan membosankan itu bagus. Pengguna dengan sokongan WebP mendapat fail yang lebih kecil. Semua yang lain mendapat PNG.

Jika sistem build anda membuat fingerprint aset dan CDN anda mencachenya dengan betul, ini tidak sukar dikekalkan. Jika CMS anda menyukarkan format alternatif, mulakan dengan imej terbesar dan paling kerap diulang, bukannya cuba menukar seluruh pustaka media dalam satu sprint.

Privasi dan pemprosesan setempat

Penukaran imej sering berlaku dalam pipeline build atau perkhidmatan media sisi pelayan. Itu baik untuk banyak pasukan. Tetapi jika anda mengendalikan tangkapan skrin sensitif, muat naik pelanggan, atau dokumen dalaman, sedar di mana fail diproses.

Alat imej sisi pelayar telah menjadi cukup baik untuk banyak penukaran ringkas, pratonton, dan semakan metadata. Ada hadnya, tetapi pemprosesan setempat boleh mengurangkan muat naik imej peribadi yang tidak perlu. Kami telah membincangkan pertukaran ini dalam mengapa memproses imej dalam pelayar ialah kemenangan privasi.

Untuk aset dalaman, perkara utama ialah kejelasan dasar. Ketahui sama ada imej meninggalkan peranti, di mana versi yang diubah disimpan, dan sama ada metadata dikekalkan.

Peraturan praktikal

Gunakan WebP lossless apabila ketiga-tiganya benar:

• Sumber kini ialah PNG.
• Piksel tepat atau ketelusan bersih penting.
• WebP lossless menjimatkan jumlah yang bermakna selepas dibandingkan dengan PNG dioptimumkan.

Kekalkan PNG apabila:

• Fail sangat kecil.
• PNG sudah dioptimumkan palet dan kompetitif.
• Kekangan keserasian luar biasa.
• Kerumitan operasi tidak berbaloi dengan bait yang dijimatkan.

Gunakan WebP lossy atau AVIF apabila:

• Imej bersifat fotografi.
• Piksel tepat tidak penting.
• Tetapan kualiti boleh mengurangkan saiz secara dramatik tanpa kerosakan yang kelihatan.

Strategi imej terbaik jarang sekali satu format di semua tempat. Ia ialah satu set kecil peraturan yang digunakan secara konsisten.

<!-- tool-cta:start -->

💡 Cuba ini: Jalankan PNG yang sama melalui Image Converter untuk menghasilkan versi WebP tanpa kehilangan dan bandingkan saiz fail secara langsung.

<!-- tool-cta:end -->

Jadi, apa sebenarnya yang dijimatkan oleh WebP lossless?

Ia menjimatkan bait di tempat PNG sudah kehabisan helah pemampatan. Kadangkala itu bermaksud 10% yang sederhana. Kadangkala ia bermaksud memotong imej telus besar hampir separuh. Merentasi laman sebenar, penjimatan biasanya tertumpu pada minoriti aset.

Itulah bahagian penting. WebP lossless bukan peningkatan moral daripada PNG. Ia ialah pilihan praktikal untuk tugas khusus: imej web lossless yang lebih kecil dengan ketelusan dan sokongan pelayar moden yang luas.

Gunakannya apabila angka membenarkannya. Biarkan PNG seperti sedia ada apabila tidak.