Bagaimana Kompresi Imej Berfungsi: Penjelasan JPEG, PNG, dan WebP

Dikemas kini kali terakhir: June 27, 2026

Mampatan imej mengecilkan fail dengan membuang maklumat yang sukar dilihat oleh mata anda. Memahami maklumat mana yang dibuang oleh setiap format memberitahu anda mengapa JPEG mengaburkan teks, mengapa PNG kekal besar, dan mengapa WebP serta AVIF menang pada fotografi. Ini adalah panduan praktikal algoritma sebenar, bukan perbandingan pemasaran.

Jawapan ringkas: bagaimana pemampatan imej berfungsi?

Setiap format imej web melakukan dua tugas: meramalkan nilai piksel supaya data berulang runtuh, kemudian mengkodkan ralat ramalan secara cekap. Format lossy (JPEG, WebP lossy, AVIF) juga kuantisasi — mereka membulatkan perincian frekuensi tinggi yang hampir tidak dapat dilihat oleh manusia. Format lossless (PNG, WebP lossless) melangkau kuantisasi dan mengekalkan setiap piksel.

Keputusan praktikal:

Baca perbandingan AVIF vs WebP vs JPEG untuk keputusan format; artikel ini menumpukan pada apa yang berlaku di dalam setiap pengkod.

Apa perbezaan antara lossy dan lossless?

Lossless compression membina semula piksel asal demi piksel. Ia berfungsi dengan mencari redundansi: rentetan warna yang sama, corak berulang, gradien yang boleh diramal. PNG, GIF, dan WebP-lossless menggunakan pendekatan ini. Hadnya adalah entropi imej — bunyi rawak hampir tidak dikompres langsung.

Lossy compression membuang maklumat secara kekal. Triknya adalah untuk membuang maklumat yang paling kurang diperhatikan oleh sistem visual anda: tekstur frekuensi tinggi yang halus dan perbezaan warna yang samar-samar. JPEG, WebP-lossy, dan AVIF melakukan ini. Hasilnya ialah fail yang jauh lebih kecil — selalunya 5–10× lebih kecil daripada lossless untuk foto.

Format-format ini menggunakan teknik khusus:

Bagaimana mampatan JPEG berfungsi sebenarnya?

JPEG adalah saluran kehilangan data (lossy pipeline) yang kanonik. Lima peringkat berjalan mengikut urutan:

Sebab JPEG mengaburkan teks dan tepi tajam: pekali frekuensi tinggi membawa tepi, dan kuantisasi menyahkannya kepada sifar. Turunkan kualiti secukupnya dan anda akan melihat artifak blok 8×8.

Anda boleh melihat kuantisasi berfungsi pada potongan butiran bulu tunggal. Kawasan 500×280 yang sama, dikodkan pada tiga tahap kualiti, menunjukkan dengan tepat apa yang ditukar oleh pengalih kualiti:

Pada q95 bulu-bulunya kekal jelas. Pada q75, helai halus mula kabur bersama. Pada q50, blok 8×8 kelihatan dengan jelas dan teksturnya merebak — failnya lebih kecil, tetapi kehilangan itu kini sesuatu yang diperhatikan oleh penonton.

Bagaimana pemampatan PNG berfungsi?

PNG adalah tanpa kehilangan data (lossless) dan berfungsi secara berbeza sepenuhnya. Ia melalui dua peringkat:

1. Penapisan Baris (Row filtering). Sebelum pemampatan, setiap garisan imbasan ditapis untuk menjadikannya lebih boleh diramal. PNG mentakrifkan lima penapis (None, Sub, Up, Average, Paeth); pengekod memilih yang terbaik bagi setiap baris.

2. Pemampatan DEFLATE. Bait yang ditapis melalui LZ77 (mencari urutan berulang, menggantikan dengan rujukan balik) ditambah dengan pengekodan Huffman (kod pendek untuk nilai biasa) — algoritma yang sama digunakan oleh ZIP.

Petua pengoptimuman PNG yang benar-benar membantu:

• Gunakan PNG-8 (indeks, ≤256 warna) untuk grafik rata — jauh lebih kecil daripada PNG-24.
• Buang segmen yang tidak diperlukan: EXIF, profil ICC yang tidak digunakan, saluran alpha jika imej itu legap.
• Mampatkan semula dengan optipng atau pngquant (yang terakhir menukarnya kepada 8-bit dengan dithering untuk penjimatan besar pada foto yang mesti kekal PNG).

Mengapa WebP lebih kecil daripada kedua-duanya?

WebP mempunyai dua mod bebas:

• Lossy WebP meminjam dari codec video VP8. Ia menggunakan ramalan blok merentasi keseluruhan bingkai (bukan hanya dalam blok 8×8 seperti JPEG), transformasi 4×4 dan 8×8, serta pengekodan entropi aritmetik yang lebih baik. Hasilnya kira-kira 25–34% lebih kecil daripada JPEG pada kualiti yang sepadan.
• Lossless WebP menggunakan sehingga 13 mod ramalan, transformasi ruang warna untuk menghilangkan korelasi saluran, dan varian LZ77. Ia biasanya ~20–26% lebih kecil daripada PNG untuk kandungan yang sama.

AVIF pergi lebih jauh dengan menggunakan alat intra-frame codec video AV1, mengatasi WebP lossy dengan 20–30%. Kosnya adalah kelajuan pengekodan — AVIF lambat dihasilkan. Lihat panduan TinyPNG alternatives untuk alat yang mengeluarkan WebP dan AVIF.

Bagaimana anda mengukur kualiti mampatan?

Dua metrik mendominasi. Kedua-duanya tidak sempurna; gunakan kedua-duanya.

PSNR mudah dikira tetapi mengabaikan apa yang diperhatikan oleh manusia; SSIM berkorelasi lebih baik dengan persepsi tetapi masih meremehkan artifak yang mengganggu (dering berdekatan teks). Untuk keputusan produk sebenar, periksa hasilnya secara visual pada saiz paparan yang dimaksudkan daripada mempercayai satu nombor sahaja.

Kajian kualiti JPEG Mozilla dan kajian mampatan WebP Google menerbitkan metodologi dan imej sampel jika anda ingin menghasilkan semula perbandingan.

Tetapan kualiti apa yang patut anda gunakan?

Mulakan dengan nilai lalai ini, kemudian sesuaikan untuk kandungan anda. Ini adalah garis panduan, bukan undang-undang.

Dua peraturan yang lebih penting daripada nombor:

• Bandingkan pada kualiti visual yang sepadan, bukan nombor kualiti yang sepadan. AVIF q60, WebP q75, dan JPEG q85 kelihatan agak serupa. Membandingkan ketiga-tiga pada "q80" adalah tidak bermakna.
• Saizkan sebelum mampatkan. Asal kamera 4000px yang dimampatkan kepada JPEG q80 masih saiz muat turun 4000px. Kecilkan ke saiz paparan dahulu — ini menjimatkan lebih banyak bait daripada sebarang penyesuaian kualiti.

Lengkung saiz berbanding kualiti menunjukkan mengapa julat 75–85 adalah cadangan biasa. Pada potongan butiran bulu yang sama, saiz fail jatuh curam pada mulanya, kemudian mendatar — dan penurunan kualiti visual dipercepatkan di bawah q75. Mendorong melepasi titik itu menjimatkan bait sedikit tetapi menelan perincian sebenar:

Bagaimana cara memampatkan imej dengan baik dalam amalan?

1. Mulakan dari master yang betul. Ambil gambar RAW atau JPEG berkualiti tinggi; mampatan adalah kumulatif, jadi elakkan pengekodan semula fail yang sudah lossy.
2. Saizkan dahulu. Padankan kotak di halaman dengan Image Resizer sebelum sebarang langkah lain.
3. Pilih format mengikut kandungan. Photograph → WebP/AVIF lossy; text/UI → PNG atau WebP lossless.
4. Kodkan pada kualiti yang munasabah. Mulakan pada 75–80 untuk foto dalam Image Compressor.
5. Buang metadata untuk web awam (kekalkan EXIF untuk arkib); Image Converter melakukan format + metadata dalam satu laluan.
6. Periksa pada saiz paparan dan sediakan <picture> fallback supaya klien lama mendapat JPEG.

Kesilapan Biasa

• Mengehoskan semula JPEG yang sudah dimampatkan. Setiap pengekodan lossy menambah artifak. Simpan satu fail induk (master).
• Mengabaikan chroma subsampling untuk teks. 4:2:0 sesuai untuk foto tetapi akan meregangkan teks berwarna. Gunakan 4:4:4 (atau PNG) untuk grafik yang banyak teks.
• Percaya satu nombor kualiti merentasi format. Nombor itu bermaksud perkara yang berbeza dalam JPEG, WebP, dan AVIF.
• Mengoptimumkan sebelum mengubah saiz (resizing). Sentiasa ubah saiz dahulu — ini adalah penjimatan byte terbesar.
• Menyediakan AVIF/WebP tanpa sandaran (fallback) JPEG. Pelayar lama dan klien e-mel tidak akan memaparkan apa-apa.

Panduan Berkaitan

• AVIF vs WebP vs JPEG: Format Mana Yang Patut Anda Gunakan?
• Mampatkan Imej Tanpa Kehilangan Kualiti
• Perbandingan Alternatif TinyPNG
• Senarai Semak Pengoptimuman SEO Imej
• Senarai Semak Pengoptimuman Imej Lengkap

Soalan Lazim

Bagaimana pemampatan imej berfungsi?

Pemampatan tanpa kehilangan (PNG) mencari dan menyulitkan corak berulang tanpa mengubah piksel. Pemampatan dengan kehilangan (JPEG, WebP) membuang butiran frekuensi tinggi yang paling kurang diperhatikan oleh mata, kemudian menyulitkan selebihnya. Tetapan kualiti mengawal berapa banyak pemampatan dengan kehilangan itu membuangkan.

Apakah perbezaan antara dengan kehilangan dan tanpa kehilangan?

Tanpa kehilangan mengekalkan setiap piksel dengan tepat dan boleh dipulihkan sepenuhnya (PNG, WebP tanpa kehilangan). Dengan kehilangan membuang butiran untuk mengecilkan fail dan tidak boleh dipulihkan (JPEG, WebP dengan kehilangan). Dengan kehilangan menang dari segi saiz untuk foto; tanpa kehilangan menang dari segi kualiti untuk grafik dan master.

Format manakah yang paling baik memampatkan foto?

AVIF (paling kecil, pelayar moden), kemudian WebP, kemudian JPEG. PNG adalah yang terbesar untuk foto kerana ia tanpa kehilangan. Untuk penghantaran web, WebP adalah pilihan lalai yang selamat; gunakan AVIF apabila anda boleh menyulitkannya dan audiens anda menggunakan pelayar moden.

Adakah pemampatan mengurangkan kualiti?

Ya, dengan kehilangan melakukannya, tetapi pada kualiti 80–85, kehilangan itu tidak kelihatan pada saiz paparan. Perangkapnya ialah memampatkan semula fail dengan kehilangan berulang kali (kehilangan generasi), yang menggabungkan artifak. Mampatkan sekali daripada master tanpa kehilangan.

Kredit Imej

• Cover — Source code on a monitor, foto oleh Leonid Altman di Pexels (ditukar ke WebP).
• Tangga kualiti JPEG dan kurva saiz lawan kualiti — dihasilkan oleh penulis daripada foto bulu macaw (Pexels #36720663, foto oleh Kaca Skok) untuk menunjukkan keluaran JPEG yang diukur sebenar merentasi tahap kualiti.