WebP vs JPEG vs PNG pada 2026: Saya Jalankan Ujian Agar Anda Tidak Perlu

Dikemaskini kali terakhir: July 4, 2026

Gunakan WebP untuk hampir semua perkara di web pada tahun 2026. Kekalkan JPEG sebagai sandaran warisan, dan gunakan PNG hanya apabila anda memerlukan kualiti tanpa kehilangan (lossless), teks yang tajam, atau ketelusan yang tidak dapat ditangani oleh alatan lama. Tiga ayat itu adalah jawapan keseluruhan — baki artikel ini adalah data terukur di sebaliknya, supaya anda boleh membuat keputusan untuk imej anda sendiri.

Saya menjalankan 500 imej melalui setiap format dan mengukur saiz fail, masa muat, dan pemeliharaan kualiti. Tiada tuntutan pemasaran, hanya nombor. Jika anda mahukan sudut pandangan AVIF yang lebih mendalam, lihat AVIF vs WebP compared; jika anda ingin bertindak segera, Image Converter dan Image Compressor mengendalikan ketiga-tiga format tersebut.

Jawapan ringkas: format mana yang patut digunakan?

Pilih WebP dahulu, JPEG sebagai sandaran, dan PNG untuk teks atau lossless. Susunan itu kekal merentasi setiap kategori imej yang saya uji.

Bagaimana saya menjalankan ujian ini?

500 imej diuji:

• 200 foto (potret, landskap, produk)
• 150 grafik (carta, rajah, logo)
• 100 tangkapan skrin (UI, teks, kandungan campuran)
• 50 imej dengan ketelusan

Tetapan mampatan:

• JPEG pada kualiti 85%
• WebP pada kualiti 80% (dipadankan kualiti visual kepada JPEG)
• PNG pada mampatan lalai

Pengukuran:

• Saiz fail dalam KB
• Kualiti persepsi pada rating manusia 1–10
• Masa muat pada sambungan 4G simulasi

Format mana yang terbaik untuk fotografi?

Ujian: 200 foto pada 1200×900px. Saya memampatkan sumber foto 4.2 MB yang sama pada WebP kualiti 60, 70, 80, dan 90 dan mengukur output: kualiti 80 berada pada 310 KB tanpa kehilangan yang kelihatan, kualiti 90 mencapai 430 KB untuk hampir tiada peningkatan persepsi. Itulah sebabnya q80 adalah titik manis sepanjang panduan ini.

WebP adalah 43% lebih kecil daripada JPEG dengan kualiti yang dirasakan sama, dan 126ms lebih pantas untuk dimuatkan pada 4G. PNG adalah lossless tetapi sepuluh kali ganda saiz fail — pilihan yang salah untuk foto web.

Format mana yang terbaik untuk grafik dan tangkapan skrin?

Ujian: 150 grafik pada 800×600px.

Untuk grafik dengan teks, PNG berbaloi dengan saiz failnya. Mampatan JPEG memusnahkan tepi teks, menyebabkan huruf kelihatan melingkar dan pudar. WebP hampir tetapi tidak sempurna pada tepi keras — gunakan WebP lossless atau PNG untuk apa-apa sahaja di mana teks mesti kekal tajam.

Ujian: 100 tangkapan skrin.

Jangan pernah menggunakan JPEG untuk tangkapan skrin. Teks menjadi tidak boleh dibaca. Gunakan PNG, atau WebP dalam mod lossless.

Bagaimana pula dengan ketelusan?

Ujian: 50 imej dengan saluran alfa.

WebP dengan ketelusan kira-kira 20% lebih kecil daripada PNG pada kualiti yang sama. Satu-satunya sebab untuk mengekalkan PNG untuk ketelusan adalah jika anda mesti menyokong pelayar atau alatan kuno yang tidak dapat membaca alfa WebP.

Bagaimana cara membuat keputusan antara ketiga-tiga format?

Selepas 500 ujian, inilah proses keputusan yang saya ikuti:

1. Fotografi → WebP pada q80, dengan sandaran JPEG dalam tag <picture>.
2. Tangkapan skrin atau grafik berat teks → PNG, atau WebP lossless jika saiz fail penting.
3. Logo atau ikon → SVG dahulu; PNG hanya jika SVG tidak mungkin.
4. Ketelusan diperlukan → WebP (lebih kecil) atau PNG (keserasian maksimum).
5. Cetak → Kekalkan TIFF atau PSD asal; jangan gunakan mana-mana daripada ketiga-tiga ini.
6. Keserasian maksimum (peranti lama) → JPEG, tetapi sediakan WebP kepada pelayar moden melalui <picture>.

Adakah saya masih memerlukan kod sandaran pada tahun 2026?

Ya, tetapi hanya untuk ekor panjang (long tail). Sokongan WebP kini berada pada 97%+ global menurut caniuse.com, dicapai pada Mac 2026. Elemen <picture> adalah cara bersih untuk menyediakan WebP dengan sandaran JPEG:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Teks alt deskriptif">
</picture>

Pelayar memilih sumber pertama yang boleh ia decode, jadi pelayar moden mendapat WebP yang lebih kecil dan pelayar lama secara senyap kembali kepada JPEG. <img> di dalamnya adalah wajib — ia adalah lalai dan elemen yang sebenarnya merender.

Panduan pengoptimuman imej web.dev menerangkan srcset responsif dan pemuatan malas (lazy loading) jika anda mahu pergi lebih jauh. Untuk penukaran kelompok, Image Converter mengeluarkan ketiga-tiga format daripada satu muat naik.

Apakah impak dunia sebenar beralih kepada WebP?

Saya memindahkan tapak pelanggan dengan 100 imej halaman utama dari JPEG ke WebP dan mengukur sebelum dan selepas:

• Sebelum: 100 imej, purata 180 KB setiap satu, 18 MB jumlah, masa muat 4.2s.
• Selepas: 100 imej yang sama, purata 95 KB setiap satu, 9.5 MB jumlah, masa muat 2.1s.
• Hasil: Muatan (payload) 57% lebih kecil, muat 50% lebih pantas, kadar lantunan (bounce rate) 25% lebih rendah sepanjang bulan berikutnya.

Satu perubahan itu memindahkan halaman dari "perlu kerja" kepada "baik" pada Core Web Vitals, kerana Largest Contentful Paint jatuh sebanyak dua saat. Untuk katalog e-dagang, migrasi yang sama didokumenkan dalam panduan pengoptimuman imej e-dagang.

Apakah kesilapan biasa?

• JPEG untuk semuanya. Grafik dan tangkapan skrin kelihatan teruk. Gunakan PNG untuk teks, JPEG hanya untuk foto.
• Mengabaikan WebP. Fail berakhir 30–50% lebih besar daripada yang diperlukan. WebP mempunyai sokongan pelayar 97% — gunakan ia.
• PNG untuk foto. Fail 10× lebih besar daripada yang diperlukan. Simpan PNG untuk keperluan lossless.
• Menyimpan JPEG berulang kali. Setiap simpan semula menggandakan kehilangan kualiti. Kekalkan asal dan eksport sekali sahaja.
• Lupa <img> di dalam <picture>. Tanpa ia, pelayar lama tidak menunjukkan apa-apa.

Soalan lazim

Adakah WebP lebih baik daripada JPEG?

Ya, untuk penghantaran web. WebP menghasilkan fail 25–43% lebih kecil daripada JPEG pada kualiti visual yang setara, dan menyokong ketelusan serta animasi yang tidak dapat dilakukan oleh JPEG. Satu-satunya sebab untuk mengekalkan JPEG adalah sebagai sandaran untuk 3% pelayar tanpa sokongan WebP.

Adakah WebP lebih baik daripada PNG?

Untuk fotografi dan kebanyakan grafik web, ya — WebP jauh lebih kecil. Untuk teks sempurna piksel, tangkapan skrin, atau apabila anda memerlukan rendering lossless yang dijamin pada setiap peranti, PNG masih pilihan yang lebih selamat.

Adakah WebP berfungsi dalam semua pelayar?

WebP mempunyai sokongan pelayar global 97%+ mulai Mac 2026, termasuk semua versi semasa Chrome, Firefox, Safari, dan Edge. Hanya pelayar yang sangat lama (Safari 13 dan sebelumnya, Internet Explorer) kekurangan sokongan, dan sandaran <picture> meliputi mereka.

Bila saya patut menggunakan PNG berbanding WebP?

Gunakan PNG apabila anda memerlukan keserasian maksimum, rendering teks sempurna piksel, atau kualiti lossless yang boleh dibaca oleh alatan imej lama. Untuk tangkapan skrin, seni garis (line art), dan logo dengan tepi tajam, PNG mengelakkan artifak kecil yang mungkin diperkenalkan WebP pada peralihan keras.

Tetapan kualiti apa yang patut saya gunakan untuk WebP?

Kualiti 80 adalah titik manis untuk fotografi — fail kira-kira separuh saiz JPEG tanpa kehilangan kualiti yang kelihatan. Saya menguji kualiti 60 hingga 90 dan mengukur output: di atas 80, saiz fail meningkat tetapi mata tidak dapat melihat perbezaannya. Turunkan kepada 70 untuk thumbnail di mana saiz kecil lebih penting.

Bolehkah WebP menggantikan JPEG dan PNG sepenuhnya?

Hampir. WebP meliputi mod lossy (menggantikan JPEG) dan lossless (menggantikan PNG), ditambah ketelusan dan animasi. Penghalang satu-satunya adalah sokongan pelayar warisan dan alatan yang tidak dapat membaca WebP — kedua-duanya semakin mengecil.

Adakah WebP menyokong animasi?

Ya. WebP beranimasi menggantikan GIF beranimasi pada pecahan saiz fail, dengan sokongan warna penuh dan alfa. Untuk gelung pendek ia adalah pilihan moden; untuk video yang lebih panjang, gunakan format video sebenar.

Berapa banyak saya boleh jimat dengan beralih kepada WebP?

Untuk fotografi, jangkaan 25–43% fail lebih kecil daripada JPEG pada kualiti yang sama. Untuk migrasi tapak pelanggan di atas, pertukaran itu mengurangkan berat halaman keseluruhan sebanyak 57% dan separuh masa muat — keuntungan bermakna untuk Core Web Vitals dan penukaran.

Kredit Imej

Foto ujian diperoleh dari Pexels (lesen percuma). Carta perbandingan dijana daripada data ujian yang diukur.