Bhinish Dhiman
PNG ke WebP: seberapa besar penghematannya, diukur pada sebelas gambar
Diterjemahkan dari versi asli berbahasa Inggris. Baca versi asli
Mengonversi PNG ke WebP pada kualitas 0.82 di Chromium 153 memangkas empat foto 1600 × 900 sebesar 92.5% hingga 96.5%, logo datar 800 px sebesar 68.7%, dan potongan foto transparan sebesar 94.2%. Ikon justru sebaliknya: 64 px membesar 32.7%, 32 px 68.5%, dan 16 px 116%. Pada grafik datar, hasilnya setara dengan PNG palet.
Angka yang selalu dikutip orang untuk WebP dibanding PNG berasal dari studi Google tentang WebP lossless. Konverter kami tidak menulis WebP lossless, dan secara default memang tidak ada browser yang melakukannya dari canvas, jadi angka itu tidak menggambarkan apa yang dihasilkannya. Inilah yang sebenarnya dihasilkan.
Pengukurannya
Kami menyiapkan sebelas PNG: empat foto 1600 × 900, satu foto dengan mask transparansi radial yang lembut, satu logo datar 800 × 800 di atas latar dan logo yang sama di atas latar transparan, serta ikon centang 32 unit yang dirasterisasi pada 16, 32, 64, dan 128 px. Masing-masing dikonversi di Chromium 153.0.8010 headless dengan pemanggilan yang sama seperti convertOne() di src/lib/convert/image.ts: createImageBitmap, digambar ke canvas, lalu canvas.toBlob('image/webp', 0.82), dengan 0.82 sebagai nilai default konverter. Kami juga menyimpan ulang setiap PNG dengan libpng pada tingkat upaya maksimum, dan sebagai PNG palet, untuk mendapatkan pembanding yang adil bagi grafik datar. Dijalankan pada 1 Oktober 2026.
| Gambar | PNG asli | PNG dioptimalkan | WebP 0.82 | Perubahan dibanding aslinya |
|---|---|---|---|---|
| Foto A, 1600 × 900 | 1 568 028 B | 698 559 B | 55 498 B | −96.5% |
| Foto B | 2 327 903 B | 903 228 B | 142 062 B | −93.9% |
| Foto C | 3 140 320 B | 834 110 B | 148 002 B | −95.3% |
| Foto D | 2 959 239 B | 932 712 B | 221 848 B | −92.5% |
| Foto, mask alfa lembut | 3 314 685 B | 521 151 B | 192 402 B | −94.2% |
| Logo datar, buram | 35 475 B | 11 849 B (palet) | 11 108 B | −68.7% |
| Logo datar, transparan | 27 876 B | 11 352 B (palet) | 13 992 B | −49.8% |
| Ikon 128 px | 2 097 B | 1 635 B (palet) | 2 042 B | −2.6% |
| Ikon 64 px | 1 020 B | 917 B (palet) | 1 354 B | +32.7% |
| Ikon 32 px | 559 B | 518 B (palet) | 942 B | +68.5% |
| Ikon 16 px | 332 B | 330 B (palet) | 718 B | +116.3% |
Foto
Foto yang disimpan sebagai PNG adalah kasus yang memang tidak pernah menjadi peruntukan format itu, dan penghematannya sangat besar karena titik awalnya tidak masuk akal: file 1.5 MB hingga 3.1 MB yang bisa direpresentasikan encoder lossy dalam 55 KB hingga 222 KB. Bahkan dibanding PNG yang sudah dioptimalkan dengan benar, penghematannya 76% hingga 92%. Dibanding JPEG dengan pengaturan 0.82 yang sama, WebP lebih kecil pada keempat foto, 55 KB berbanding 105 KB pada foto A, meskipun angka kualitas adalah kenop pribadi masing-masing encoder, jadi ini perbandingan dua hasil, bukan perbandingan dua pengaturan.
Grafik datar, dengan pembanding yang jujur
Angka 68.7% pada logo itu nyata, tetapi terlalu menguntungkan WebP, karena PNG aslinya adalah hasil ekspor yang belum dioptimalkan. Dibanding PNG palet, yaitu format yang ditulis optimiser PNG untuk grafik empat warna dan yang dihasilkan image compressor kami tanpa kehilangan kualitas, WebP 6% lebih kecil pada logo buram dan 23% lebih besar pada logo transparan. Pada grafik datar, kedua format setara, dan PNG mempertahankan tepi tajam secara persis.
Ikon
Di bawah sekitar 128 px, WebP kalah, dan kekalahannya makin besar seiring mengecilnya gambar: format ini membawa biaya tetap berupa container dan header yang tidak bisa tertutupi oleh PNG sebesar 332 byte. Pada 16 px, WebP berukuran lebih dari dua kali lipat PNG. Kumpulan favicon sebaiknya tetap PNG, dan favicon generator kami menulis PNG karena alasan itu.
Transparansi kehilangan piksel apa pun formatnya
Kami juga meminta Chromium membuat WebP dengan kualitas 1.0, yang ditulisnya sebagai lossless: keempat foto buram dan logo buram didekode kembali identik bit demi bit dengan sumbernya. Semua gambar dengan transparansi parsial tidak demikian. Pada foto dengan mask lembut, 39.77% piksel berbeda setelah bolak-balik konversi; pada ikon 16 px, 8.59%. Itu bukan ulah encoder WebP. Canvas menyimpan alfa yang sudah dikalikan (premultiplied alpha), sehingga piksel setengah transparan dibulatkan saat masuk dan tidak bisa dipulihkan saat keluar. Konverter apa pun yang melewati canvas, termasuk milik kami, melakukan hal ini pada tepi yang lembut, di setiap pengaturan kualitas, dalam setiap format output. Untuk grafik yang transparansinya harus bertahan persis, jangan meng-encode ulang melalui canvas sama sekali.
Apa yang perlu dilakukan dengan tabel ini
Foto: konversikan, dan harapkan penghematan lebih dari 90%. Grafik datar: optimalkan PNG terlebih dahulu dan konversikan hanya jika hasilnya masih terlalu besar. Ikon di bawah 128 px: biarkan. Apa pun dengan transparansi lembut yang harus tetap persis: biarkan juga.