Cara Kerja Kompresi Gambar: Penjelasan JPEG, PNG, dan WebP

Terakhir diperbarui: June 27, 2026

Kompresi gambar memperkecil ukuran file dengan menghilangkan informasi yang sulit dilihat oleh mata Anda. Memahami informasi apa yang dibuang setiap format memberi tahu Anda mengapa JPEG memburamkan teks, mengapa PNG tetap besar, dan mengapa WebP serta AVIF unggul untuk foto. Ini adalah panduan praktisi tentang algoritma sebenarnya, bukan perbandingan pemasaran.

Jawaban cepat: bagaimana cara kerja kompresi gambar?

Setiap format gambar web melakukan dua tugas: memprediksi nilai piksel agar data yang berulang dapat runtuh, kemudian mengkodekan kesalahan prediksi secara efisien. Format lossy (JPEG, WebP lossy, AVIF) juga kuantisasi — mereka membulatkan detail frekuensi tinggi yang hampir tidak dipersepsikan manusia. Format lossless (PNG, WebP lossless) melewatkan kuantisasi dan menyimpan setiap piksel.

Keputusan praktis:

Baca perbandingan AVIF vs WebP vs JPEG untuk keputusan format; artikel ini berfokus pada apa yang terjadi di dalam setiap encoder.

Apa perbedaan antara lossy dan lossless?

Kompresi Lossless merekonstruksi piksel asli per-piksel. Ini bekerja dengan menemukan redundansi: deretan warna identik, pola berulang, gradien yang dapat diprediksi. PNG, GIF, dan WebP-lossless menggunakan pendekatan ini. Batasnya adalah entropi gambar — noise acak hampir tidak terkompresi sama sekali.

Kompresi Lossy membuang informasi secara permanen. Triknya adalah membuang informasi yang paling sedikit diperhatikan oleh sistem visual Anda: tekstur frekuensi tinggi halus dan perbedaan warna yang samar. JPEG, WebP-lossy, dan AVIF melakukan ini. Keuntungannya adalah file jauh lebih kecil — seringkali 5–10× lebih kecil daripada lossless untuk foto.

Format-format tersebut menggunakan teknik spesifik:

Bagaimana cara kerja kompresi JPEG?

JPEG adalah pipeline lossy kanonik. Lima tahap berjalan secara berurutan:

Alasan JPEG memburamkan teks dan tepi tajam: koefisien frekuensi tinggi membawa tepi, dan kuantisasi membuatnya menjadi nol. Turunkan kualitas hingga cukup rendah dan Anda akan melihat artefak pemblokiran 8×8.

Anda dapat melihat kuantisasi bekerja pada potongan detail bulu tunggal. Area 500×280 yang sama, dikodekan pada tiga tingkat kualitas, menunjukkan persis apa yang ditukar oleh penggeser kualitas:

Pada q95, bulu-bulu masih terlihat berbeda. Pada q75, helai halus mulai kabur bersamaan. Pada q50, blok 8×8 terlihat jelas dan tekstur menyebar — file lebih kecil, tetapi kehilangan itu sekarang sesuatu yang diperhatikan oleh penonton.

Bagaimana cara kerja kompresi PNG?

PNG lossless dan bekerja dengan cara yang sama sekali berbeda. Dua tahap:

1. Row filtering. Sebelum kompresi, setiap garis pemindaian difilter agar menjadi lebih dapat diprediksi. PNG mendefinisikan lima filter (None, Sub, Up, Average, Paeth); encoder memilih yang terbaik per baris.

2. DEFLATE compression. Byte yang difilter melalui LZ77 (mencari urutan berulang, mengganti dengan back-reference) ditambah Huffman coding (kode pendek untuk nilai umum) — algoritma yang sama digunakan ZIP.

Tips optimasi PNG yang benar-benar membantu:

• Gunakan PNG-8 (indeks, ≤256 warna) untuk grafik datar — jauh lebih kecil daripada PNG-24.
• Hapus chunk yang tidak diperlukan: EXIF, profil ICC yang tidak terpakai, saluran alpha jika gambar buram.
• Kompres ulang dengan optipng atau pngquant (yang terakhir mengonversi ke 8-bit dengan dithering untuk penghematan besar pada foto yang harus tetap PNG).

Mengapa WebP lebih kecil dari keduanya?

WebP memiliki dua mode independen:

• Lossy WebP meminjam dari codec video VP8. Ini menggunakan prediksi blok di seluruh bingkai (tidak hanya dalam blok 8×8 seperti JPEG), transformasi 4×4 dan 8×8, dan pengkodean entropi aritmatika yang lebih baik. Hasilnya kira-kira 25–34% lebih kecil dari JPEG pada kualitas yang sama.
• Lossless WebP menggunakan hingga 13 mode prediksi, transformasi ruang warna untuk mendekorelasikan saluran, dan varian LZ77. Ini biasanya ~20–26% lebih kecil dari PNG untuk konten yang sama.

AVIF melangkah lebih jauh dengan menggunakan alat intra-frame codec video AV1, mengalahkan WebP lossy sebesar 20–30%. Biayanya adalah kecepatan encoding — AVIF lambat untuk diproduksi. Lihat panduan alternatif TinyPNG untuk alat yang menghasilkan WebP dan AVIF.

Bagaimana cara mengukur kualitas kompresi?

Dua metrik mendominasi. Tidak ada yang sempurna; gunakan keduanya.

PSNR mudah dihitung tetapi mengabaikan apa yang diperhatikan manusia; SSIM berkorelasi lebih baik dengan persepsi tetapi masih meremehkan artefak yang mengganggu (dering di dekat teks). Untuk keputusan produk nyata, perkirakan hasilnya pada ukuran tampilan yang dimaksud daripada mempercayai satu angka.

[Studi kualitas JPEG] dari Mozilla (https://medium.com/mozilla-open-innovation/an-alternative-to-mozjpeg-b86ce6b65952) dan [studi kompresi WebP] Google (https://developers.google.com/speed/webp/gallery1) menerbitkan metodologi dan gambar sampel jika Anda ingin mereproduksi perbandingan.

Pengaturan kualitas apa yang harus digunakan?

Mulailah dari default ini, lalu sesuaikan untuk konten Anda. Ini adalah pedoman, bukan hukum.

Dua aturan yang lebih penting daripada angka:

• Bandingkan pada kualitas visual yang sama, bukan angka kualitas yang sama. AVIF q60, WebP q75, dan JPEG q85 terlihat kira-kira serupa. Membandingkan ketiganya pada "q80" tidak berarti apa-apa.
• Ubah ukuran sebelum mengompresi. Asli kamera 4000px yang dikompres menjadi JPEG q80 masih unduhan 4000px. Kecilkan ukurannya ke ukuran tampilan terlebih dahulu — itu menghemat lebih banyak byte daripada penyesuaian kualitas apa pun.

Kurva ukuran versus kualitas menunjukkan mengapa rentang 75–85 adalah rekomendasi biasa. Pada potongan detail bulu yang sama, ukuran file turun tajam pada awalnya, lalu mendatar — dan penurunan kualitas visual dipercepat di bawah q75. Mendorong melewati titik itu menghemat sedikit byte tetapi menelan detail nyata:

Bagaimana cara mengompres gambar dengan baik dalam praktik?

1. Mulai dari master yang benar. Ambil RAW atau JPEG berkualitas tinggi; kompresi menumpuk, jadi hindari re-encode file yang sudah lossy.
2. Ubah ukuran terlebih dahulu. Cocokkan kotak di halaman dengan Image Resizer sebelum langkah lain.
3. Pilih format berdasarkan konten. Foto → WebP/AVIF lossy; teks/UI → PNG atau WebP lossless.
4. Kodekan pada kualitas yang masuk akal. Mulai dari 75–80 untuk foto di Image Compressor.
5. Hapus metadata untuk web publik (simpan EXIF untuk arsip); Image Converter melakukan format + metadata dalam satu kali jalan.
6. Inspeksi pada ukuran tampilan dan sediakan fallback <picture> agar klien lama mendapatkan JPEG.

Kesalahan umum

• Mengompres ulang JPEG yang sudah terkompresi. Setiap encode lossy menambahkan artefak. Simpan master.
• Mengabaikan chroma subsampling untuk teks. 4:2:0 baik untuk foto tetapi mengaburkan teks berwarna. Gunakan 4:4:4 (atau PNG) untuk grafik berat teks.
• Mempercayai satu angka kualitas di berbagai format. Angka tersebut berarti hal yang berbeda dalam JPEG, WebP, dan AVIF.
• Mengoptimalkan sebelum mengubah ukuran. Selalu ubah ukuran terlebih dahulu — itu adalah penghematan byte terbesar.
• Menyajikan AVIF/WebP tanpa fallback JPEG. Browser lama dan klien email tidak menampilkan apa-apa.

Panduan terkait

• AVIF vs WebP vs JPEG: Format Mana yang Harus Anda Gunakan?
• Kompres Gambar Tanpa Kehilangan Kualitas
• Perbandingan Alternatif TinyPNG
• Daftar Periksa Optimasi Gambar SEO
• Daftar Periksa Optimasi Gambar Lengkap

Pertanyaan yang sering diajukan

Bagaimana cara kerja kompresi gambar?

Kompresi lossless (PNG) menemukan dan mengkodekan pola berulang tanpa mengubah piksel. Kompresi lossy (JPEG, WebP) membuang detail frekuensi tinggi yang paling sedikit diperhatikan mata, kemudian mengkodekan sisanya. Pengaturan kualitas mengontrol seberapa banyak kompresi lossy membuang.

Apa perbedaan antara lossy dan lossless?

Lossless mempertahankan setiap piksel secara persis dan dapat dibalik dengan sempurna (PNG, WebP lossless). Lossy membuang detail untuk mengecilkan file dan tidak dapat dibalik (JPEG, WebP lossy). Lossy unggul dalam ukuran untuk foto; lossless unggul dalam kualitas untuk grafik dan master.

Format mana yang paling baik mengompres foto?

AVIF (terkecil, browser modern), kemudian WebP, lalu JPEG. PNG adalah yang terbesar untuk foto karena lossless. Untuk pengiriman web, WebP adalah default aman; AVIF ketika Anda dapat mengkodekannya dan audiens Anda menggunakan browser modern.

Apakah kompresi mengurangi kualitas?

Lossy memang melakukannya, tetapi pada kualitas 80–85 kehilangan itu tidak terlihat pada ukuran tampilan. Jebakannya adalah mengompres file lossy berulang kali (kehilangan generasi), yang menumpuk artefak. Kompres sekali dari master lossless.

Kredit gambar

• Sampul — Kode sumber pada monitor, foto oleh Leonid Altman di Pexels (dikonversi ke WebP).
• Tangga kualitas JPEG dan kurva ukuran versus kualitas — dibuat oleh penulis dari foto bulu macaw (Pexels #36720663, foto oleh Kaca Skok) untuk menunjukkan output JPEG terukur yang sebenarnya di berbagai tingkat kualitas.