Cara Kerja Kompresi JPEG Sebenarnya

JPEG itu ibarat kecoak di dunia format file. Distandarkan pada 1992, sudah ada sebelum web browser populer, dan selalu lolos dari setiap upaya untuk menggantikannya. WebP, AVIF, HEIC, semuanya kompresinya lebih baik, tapi JPEG tetap format gambar paling banyak dipakai di internet. Sebagian alasannya memang inersia. Tapi sebagian lagi karena pipeline kompresi JPEG itu benar-benar brilian, sebuah masterclass pemrosesan sinyal terapan yang layak dipahami meskipun kamu tidak pernah menulis encoder.

Kebanyakan developer memperlakukan JPEG seperti kotak hitam: masukkan gambar, keluar file yang lebih kecil, lalu geser slider kualitas sampai hasilnya terlihat cukup bagus. Tapi memahami apa yang terjadi di dalam kotak itu mengubah cara kamu memandang gambar, kompresi, dan trade-off antara ukuran file dan kualitas visual.

Pipeline Sekilas

Kompresi JPEG terdiri dari lima tahap pipeline, dan setiap tahap punya trik cerdasnya sendiri. Kuncinya ada pada cara tahap-tahap ini saling melengkapi: setiap tahap menyiapkan tahap berikutnya agar lebih efektif.

1. Konversi ruang warna — RGB ke YCbCr (memisahkan kecerahan dari warna)
2. Chroma subsampling — menurunkan resolusi kanal warna
3. Discrete Cosine Transform (DCT) — mengubah data spasial menjadi data frekuensi
4. Kuantisasi — membuang detail frekuensi tinggi (ini langkah yang lossy)
5. Entropy coding — kompresi lossless terhadap data hasil kuantisasi

Tahap 1 dan 2 memanfaatkan cara kerja penglihatan manusia. Tahap 3 dan 4 memanfaatkan sifat-sifat gambar alami. Tahap 5 adalah teknik kompresi data standar. Setiap tahap sebenarnya sederhana. Yang membuatnya istimewa adalah urutannya.

Tahap 1: Konversi Ruang Warna

Kamera menangkap gambar dalam RGB, yaitu kanal merah, hijau, dan biru, masing-masing 8 bit per piksel. Langkah pertama JPEG adalah mengubah ini menjadi YCbCr: satu kanal luminansi (kecerahan) dan dua kanal kroma (warna). Ini belum kompresi, belum ada data yang hilang. Ini hanya transformasi koordinat, mirip memutar sumbu.

Kenapa repot-repot? Karena mata manusia jauh lebih sensitif terhadap kecerahan dibanding warna. Kamu bisa melihat detail yang sangat halus di foto hitam-putih, tapi kemampuan kita membedakan resolusi warna jauh lebih kasar. Dengan memisahkan kecerahan dari warna, JPEG bisa memperlakukan keduanya secara berbeda: detail kecerahan dipertahankan, sementara detail warna dikurangi secara agresif.

RGB to YCbCr conversion (simplified):
Y  =  0.299R + 0.587G + 0.114B    (luminance — brightness)
Cb = -0.169R - 0.331G + 0.500B    (blue chrominance)
Cr =  0.500R - 0.419G - 0.081B    (red chrominance)
Note: green dominates the luminance calculation because
human eyes have far more green-sensitive cone cells.
This isn't arbitrary — it matches the physiology.

Tahap 2: Chroma Subsampling

Di sinilah pengurangan data pertama yang nyata terjadi. Karena manusia tidak bisa mempersepsikan warna pada resolusi spasial penuh, JPEG menurunkan resolusi kanal Cb dan Cr, biasanya separuhnya di kedua dimensi. Ini disebut subsampling 4:2:0. Untuk setiap empat piksel luminansi, hanya ada satu sampel kroma.

Hasilnya: data mentah kamu baru saja terpangkas setengah (dari 3 kanal resolusi penuh menjadi 1 kanal penuh + 2 kanal seperempat resolusi), dan gambarnya hampir tidak terlihat berbeda dari aslinya. Coba sendiri: ambil foto apa pun, kurangi resolusi kanal warnanya 4 kali, dan kamu akan kesulitan melihat bedanya. Otakmu mengisi detail warna dari informasi luminansi.

Trik ini tidak sama efektifnya untuk semua gambar. Foto terkompresi dengan sangat baik karena pemandangan alami punya gradasi warna yang halus. Tapi gambar dengan batas warna yang tajam, seperti teks di atas latar berwarna, lingkaran merah di atas putih, atau pixel art, akan menunjukkan color fringing yang terlihat setelah chroma subsampling. Inilah alasan JPEG buruk untuk teks: tepi warna yang tajam jadi melebar dan kabur.

Tahap 3: Discrete Cosine Transform

Di tahap DCT inilah JPEG mulai menarik. Gambar dibagi menjadi blok piksel 8×8, lalu setiap blok ditransformasikan dari domain spasial (nilai kecerahan piksel) ke domain frekuensi (seberapa besar kontribusi setiap frekuensi spasial).

Bayangkan begini: blok piksel 8×8 bisa direpresentasikan sebagai jumlah berbobot dari 64 pola dasar. Pola pertama adalah blok datar (nilai rata-rata). Pola berikutnya menambahkan gradien horizontal dan vertikal. Pola dengan nomor lebih tinggi menambahkan detail yang makin halus, yaitu osilasi kecerahan yang cepat.

An 8x8 DCT block conceptually:
DC ──► Low frequency ──────────────► High frequency
┌─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┐
│ AVG │  →  │  →  │  →  │  →  │  →  │  →  │  →  │ Low freq
│     │     │     │     │     │     │     │     │   ↓
│  ↓  │  ↘  │     │     │     │     │     │     │
│     │     │  ↘  │     │     │     │     │     │
│     │     │     │  ↘  │     │     │     │     │
│     │     │     │     │  ↘  │     │     │     │
│     │     │     │     │     │  ↘  │     │     │
│     │     │     │     │     │     │  ↘  │     │
│     │     │     │     │     │     │     │ FINE │ High freq
└─────┴─────┴─────┴─────┴─────┴─────┴─────┴─────┘
Top-left = low frequency (smooth gradients)
Bottom-right = high frequency (sharp edges, fine detail)
Natural images: most energy concentrated in top-left
Text/line art: significant energy in bottom-right

DCT itu sendiri bersifat lossless. Kamu bisa merekonstruksi blok 8×8 asli dengan sempurna dari 64 koefisien DCT-nya. Tapi di sinilah sifat kritisnya: pada gambar alami (foto, gradien, tekstur organik), sebagian besar energi terkonsentrasi di koefisien frekuensi rendah. Koefisien frekuensi tinggi, yang merepresentasikan detail halus, cenderung kecil. Inilah yang membuat langkah berikutnya bisa bekerja.

Kenapa 8×8? Ini adalah kompromi. Blok yang lebih besar (16×16, 32×32) akan mengonsentrasikan energi dengan lebih baik, tapi lebih mahal dihitung dan menimbulkan artefak 'blocking' yang terlihat pada kualitas rendah. Blok yang lebih kecil (4×4) mengurangi blocking, tapi tidak sebaik itu dalam mengonsentrasikan energi. Ternyata 8×8 adalah titik manis yang sudah bertahan lebih dari 30 tahun.

Tahap 4: Kuantisasi, Tempat Data Dihabisi

Ini langkah yang lossy. Setiap koefisien DCT dibagi dengan nilai yang sesuai dari tabel kuantisasi, lalu dibulatkan ke bilangan bulat terdekat. Pembagi yang besar (untuk koefisien frekuensi tinggi) membuat nilai kecil menjadi nol. Nol-nol itu hilang selamanya. Di sinilah informasi dibuang secara permanen.

Example quantization (quality ~50):
DCT coefficient: 42.7    Quantization divisor: 16    Result: round(42.7/16) = 3
DCT coefficient: 8.3     Quantization divisor: 40    Result: round(8.3/40)  = 0
DCT coefficient: -2.1    Quantization divisor: 99    Result: round(-2.1/99) = 0
The quality slider in your image editor controls the quantization table.
Quality 100: divisors close to 1 (almost no rounding, huge file)
Quality 75:  moderate divisors (good balance, typical web use)
Quality 50:  large divisors (noticeable artifacts, small file)
Quality 10:  very large divisors (blocky mess, tiny file)

Tabel kuantisasi adalah faktor paling penting dalam kualitas JPEG. Standar JPEG mendefinisikan tabel default, tapi encoder boleh memakai tabel apa pun. Encoder modern seperti MozJPEG memakai tabel yang sudah dioptimasi, yang memeras kualitas lebih banyak dari file yang lebih kecil dengan menyetel pembagi sesuai sensitivitas persepsi manusia. Hasilnya lebih agresif pada frekuensi yang kurang disadari mata manusia.

Setelah kuantisasi, blok 8×8 yang khas pada kualitas sedang biasanya hanya punya 6-10 koefisien bukan nol dari 64. Sisanya nol. Pengurangan besar pada nilai bukan nol inilah yang membuat langkah kompresi terakhir menjadi efektif.

Tahap 5: Entropy Coding

Langkah terakhir adalah kompresi lossless terhadap koefisien hasil kuantisasi. JPEG memakai kombinasi run-length encoding (RLE) dan Huffman coding. Koefisien dibaca dalam pola zigzag dari blok 8×8, dimulai dari koefisien DC (kiri atas) lalu bergerak zigzag menuju frekuensi yang makin tinggi. Ini mengelompokkan semua nol di bagian akhir, dan RLE menanganinya dengan efisien: alih-alih menyimpan '0, 0, 0, 0, 0, 0, ..., 0', cukup menyimpan 'empat puluh tujuh nol'.

Huffman coding kemudian memberi urutan bit yang lebih pendek untuk nilai yang sering muncul, dan urutan yang lebih panjang untuk nilai yang jarang. Karena sebagian besar koefisien bukan nol berupa bilangan bulat kecil (1, -1, 2, -2), mereka mendapat kode yang sangat pendek. Hasilnya: blok 8×8 yang awalnya berisi 64 nilai biasanya terkompres menjadi 20-40 byte, tergantung isi gambar dan pengaturan kualitasnya.

Kenapa Sebagian Gambar Lebih Mudah Dikompres

Memahami pipeline ini menjelaskan perilaku kompresi yang kalau tidak dipahami akan terasa membingungkan.

• Foto terkompres dengan baik karena punya gradasi warna yang halus (chroma subsampling bekerja maksimal) dan sebagian besar energinya ada di koefisien DCT frekuensi rendah (kuantisasi bisa menormalkan banyak koefisien tanpa dampak visual yang terlihat).
• Teks dan line art terkompres buruk karena tepi yang tajam menghasilkan koefisien DCT frekuensi tinggi yang besar dan tidak bisa dinolkan tanpa menimbulkan artefak. Batas blok 8×8 jadi terlihat sebagai ringing di sekitar tepi teks.
• Noise menghancurkan kompresi karena noise sensor adalah data acak frekuensi tinggi. Setiap piksel berisik menambah koefisien frekuensi tinggi bukan nol yang sulit dikuantisasi. Foto berisik pada kualitas 80 bisa 3-5x lebih besar dibanding foto bersih dari pemandangan yang sama pada kualitas yang sama.
• Gradien hampir gratis karena gradien halus di blok 8×8 cukup direpresentasikan oleh 2-3 koefisien DCT saja. Sisanya nol bahkan tanpa kuantisasi.
• Menyimpan ulang menurunkan kualitas karena setiap kali disimpan, kuantisasi diterapkan lagi dan error pembulatannya menumpuk. Menyimpan JPEG 10 kali pada kualitas 75 jelas lebih buruk dibanding menyimpannya sekali pada kualitas 75. Makanya selalu edit dari file sumber aslinya.

Slider Kualitas Itu Tidak Linear

Kebanyakan developer memperlakukan slider kualitas JPEG seolah-olah itu trade-off linear: kualitas 50 berarti setengah kualitas 100 dan setengah ukuran file. Dua-duanya tidak benar.

Kualitas 100 bukan 'lossless'. Tetap ada kuantisasi, hanya saja pembaginya kecil. Filenya besar (sering lebih besar dari PNG) dan secara visual nyaris tidak bisa dibedakan dari kualitas 95. Untuk foto, kualitas 95 juga hampir tidak bisa dibedakan dari kualitas 90. Perbedaan persepsi antara kualitas 85 dan 75 justru lebih besar dibanding antara 100 dan 85. Di bawah kualitas 50, artefak menjadi parah dan pengurangan ukuran file melambat.

Titik manis untuk gambar web biasanya ada di kualitas 75-85. Di bawah 75, artefak mulai terlihat di ukuran tampilan normal. Di atas 85, ukuran file naik cukup signifikan tanpa peningkatan persepsi yang berarti. Default kualitas 75 dari MozJPEG sudah dipilih dengan baik, karena pas di titik 'lutut' kurva kualitas-vs-ukuran untuk sebagian besar foto.

Encoder JPEG Modern Lebih Pintar dari Dugaanmu

Standar JPEG mendefinisikan format decode, bukan encoder. Artinya implementasi encoder bisa sangat berbeda dalam efisiensi kompresi, tapi tetap menghasilkan file yang sesuai spesifikasi. MozJPEG, yang dikembangkan Mozilla, menghasilkan file 5-15% lebih kecil dibanding libjpeg pada kualitas visual yang sama, berkat beberapa teknik.

• Trellis quantization — alih-alih membulatkan setiap koefisien DCT secara independen, trellis quantization mempertimbangkan bagaimana keputusan pembulatan memengaruhi tahap entropy coding, lalu membuat pilihan yang secara global lebih baik.
• Huffman table yang dioptimasi — tabel Huffman JPEG default itu generik. MozJPEG membuat tabel khusus yang disetel sesuai distribusi koefisien aktual di setiap gambar.
• Progressive encoding — JPEG progresif menyimpan koefisien dalam beberapa tahap (kasar dulu, lalu penyempurnaan). Ini sering lebih efisien dibanding encoding sekuensial karena tahap kasar punya distribusi koefisien yang lebih mudah diprediksi.
• Tabel kuantisasi adaptif — alih-alih satu tabel kuantisasi untuk seluruh gambar, encoder adaptif menyetel kuantisasi per area: lebih agresif di area yang ramai (artefaknya kurang terlihat) dan lebih konservatif di area yang halus.

Kalau kamu menyajikan gambar di web, beralih dari encoder libjpeg default ke MozJPEG adalah salah satu peningkatan performa termudah yang bisa kamu lakukan. Sebagian besar image CDN dan library pemrosesan gambar sudah mendukungnya. Proses encoding-nya memang lebih lambat (tidak masalah untuk gambar statis yang sudah diproses sebelumnya), tapi hasilnya lebih kecil pada kualitas yang sama.

JPEG vs Format Baru

WebP, AVIF, dan HEIC semuanya memakai teknik kompresi yang lebih modern: blok transformasi yang lebih besar, in-loop deblocking filter, dan intra-prediction (memakai blok tetangga untuk memprediksi blok saat ini). Ukurannya 20-50% lebih kecil dibanding JPEG pada kualitas visual yang sama. AVIF, yang berbasis codec video AV1, sangat mengesankan efisiensinya.

Lalu kenapa JPEG masih ada di mana-mana? Karena dukungannya universal. Setiap browser, setiap image viewer, setiap sistem operasi, setiap kamera, setiap ponsel, dan setiap perangkat lunak yang menangani gambar mendukung JPEG. WebP hampir universal di browser, tapi dukungan di level sistem operasi belum merata. Dukungan AVIF masih tidak konsisten. HEIC terutama ada di ekosistem Apple. Untuk format yang harus bisa berjalan di mana saja, JPEG masih satu-satunya pilihan yang aman.

Saran praktisnya: gunakan AVIF atau WebP dengan fallback JPEG jika infrastruktur penyajianmu mendukung (kebanyakan CDN mendukungnya lewat content negotiation). Kalau hanya bisa memakai satu format, JPEG yang di-encode dengan MozJPEG pada kualitas 80 sulit dikalahkan untuk foto. Untuk screenshot, diagram, dan gambar yang dominan teks, PNG tetap pilihan yang lebih baik, atau jelajahi pendekatan yang lebih kreatif untuk representasi gambar.

Blok 8×8 yang Menaklukkan Dunia

Pipeline kompresi JPEG adalah contoh klasik rekayasa yang bekerja selaras dengan persepsi manusia, bukan melawannya. Setiap tahap memanfaatkan sifat tertentu: ketidaksensitifan terhadap warna, distribusi frekuensi pada gambar alami, dan masking persepsi terhadap noise kuantisasi. Semuanya tersusun menjadi sistem yang mengecilkan file 10-20x dengan dampak visual yang minim. Tiga puluh empat tahun kemudian, blok DCT 8×8 yang sama, yang dulu berjalan di perangkat keras tahun 1992, masih membawa sebagian besar gambar di internet. Itu tanda desain yang sejak awal sudah tepat dalam hal fundamentalnya.