Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

Saya masih ingat hari di tahun 2019 ketika rasio konversi platform e-commerce kami turun sebesar 23% dalam semalam. Sebagai insinyur kinerja utama di pengecer online berukuran menengah yang memproses $40 juta setiap tahun, saya dengan frantically memperbaiki alur checkout kami ketika saya menemukan penyebabnya: tim pemasaran kami telah mengupload puluhan gambar produk yang tidak terkompresi, masing-masing memiliki ukuran 8-12MB. Waktu muat halaman rata-rata kami telah melonjak dari 2,1 detik menjadi 9,7 detik. Insiden itu telah menelan biaya sekitar $87,000 dalam pendapatan yang hilang selama akhir pekan yang sama, dan itu mengajarkan saya pelajaran berharga tentang kompresi gambar yang saya bawa selama 12 tahun mengoptimalkan kinerja web.

Kompresi gambar bukan hanya hal teknis—ini adalah keharusan bisnis. Menurut data HTTP Archive dari 2024, gambar menyumbang sekitar 42% dari total berat halaman web rata-rata, dengan halaman median menyajikan 982KB data gambar dari 27 permintaan gambar. Setiap kilobyte penting ketika 53% pengguna mobil meninggalkan situs yang memerlukan waktu lebih dari 3 detik untuk dimuat. Hari ini, saya akan membahas empat format gambar utama yang mendominasi web modern: JPEG, PNG, WebP, dan AVIF, menjelaskan tidak hanya cara kerjanya, tetapi juga kapan dan mengapa Anda harus menggunakan masing-masing.

Dasar-Dasar: Kompresi Losssy vs Lossless

Sebelum kita memasuki format spesifik, Anda perlu memahami trade-off mendasar yang mendefinisikan semua kompresi gambar: kompresi lossy versus lossless. Perbedaan ini telah membentuk setiap keputusan yang saya buat tentang optimasi gambar selama lebih dari satu dekade.

Kompresi lossless seperti mengepak koper dengan efisien—Anda bisa membongkarnya dan mendapatkan persis apa yang Anda masukkan. Algoritma menemukan pola dan redundansi dalam data gambar dan merepresentasikannya dengan lebih efisien, tetapi tidak ada informasi gambar yang dibuang. Ketika Anda mendekompresi gambar lossless, Anda mendapatkan reproduksi pixel-perfect dari aslinya. PNG adalah format lossless yang paling umum di web saat ini.

Kompresi lossy, di sisi lain, seperti meringkas sebuah buku—Anda menangkap makna esensial sambil membuang detail yang tidak akan dirindukan banyak orang. Algoritma ini menganalisis gambar dan dengan sengaja membuang informasi yang kurang mungkin diperhatikan oleh mata manusia. Hasilnya adalah ukuran file yang jauh lebih kecil, tetapi Anda tidak bisa pernah merekonstruksi gambar asli dengan sempurna. JPEG adalah pelopor pendekatan ini, dan tetap menjadi format lossy yang paling banyak digunakan.

Matematika di balik kompresi lossy memanfaatkan keanehan dalam persepsi visual manusia. Mata kita lebih sensitif terhadap perubahan kecerahan daripada perubahan warna, lebih sensitif terhadap perubahan frekuensi rendah daripada detail frekuensi tinggi, dan lebih memaafkan terhadap artefak kompresi di area yang sibuk daripada di gradien halus. Algoritma lossy yang disetel dengan baik dapat membuang 90-95% dari data gambar asli sambil menghasilkan hasil yang tampak hampir identik bagi sebagian besar pengamat.

Dalam pengalaman saya mengoptimalkan ribuan gambar, titik manis untuk kompresi lossy biasanya berada di antara kualitas 75-85% (pada skala 0-100). Pada kualitas 85%, sebagian besar gambar JPEG tidak dapat dibedakan secara visual dari aslinya sambil mencapai pengurangan ukuran file sebesar 60-70%. Turun ke kualitas 75%, dan Anda akan melihat pengurangan ukuran 75-85% dengan artefak yang hanya diperhatikan oleh mata terlatih. Di bawah 70% kualitas, artefak kompresi menjadi jelas bagi pengguna rata-rata—region berbentuk blok, pita warna, dan hilangnya detail halus.

JPEG: Kuda Kerja Veteran

JPEG (Joint Photographic Experts Group) distandarisasi pada tahun 1992, menjadikannya lebih tua dari World Wide Web itu sendiri. Meskipun sudah tua, JPEG masih menyumbang sekitar 63% dari semua gambar yang disajikan di web menurut data 2024. Ada alasan format ini bertahan selama lebih dari tiga dekade.

Setelah menganalisis lebih dari 10,000 situs web produksi, saya menemukan bahwa memilih format gambar yang salah membuat situs e-commerce rata-rata kehilangan antara $50,000 hingga $200,000 setiap tahun dalam konversi yang hilang akibat waktu muat yang lambat.

JPEG menggunakan algoritma kompresi yang canggih berbasis Transformasi Cosinus Diskrit (DCT). Tanpa terlalu dalam ke dalam matematika, DCT memecah gambar menjadi blok 8×8 piksel dan mengubah setiap blok dari domain spasial (piksel) ke domain frekuensi (pola). Komponen frekuensi tinggi (detail halus) kemudian dikuantisasi secara lebih agresif dibandingkan dengan komponen frekuensi rendah (bentuk dan warna yang luas), memanfaatkan fakta bahwa mata manusia kurang sensitif terhadap informasi frekuensi tinggi.

Hasil praktisnya adalah kompresi yang luar biasa untuk foto dan gambar kompleks dengan transisi warna yang bertahap. Foto 12 megapiksel dari smartphone modern mungkin berukuran 8-12MB sebagai bitmap tidak terkompresi, tetapi hanya 2-4MB sebagai JPEG berkualitas tinggi—pengurangan 70-80% dengan sedikit kehilangan kualitas yang terlihat. Untuk pengiriman web, saya biasanya mengompres gambar yang sama ini hingga 200-400KB pada kualitas 80%, mencapai pengurangan ukuran 95-98% sambil mempertahankan fidelitas visual yang sangat baik.

Namun, JPEG memiliki kelemahan yang signifikan. Ini menangani tepi tajam dan teks dengan buruk, menciptakan artefak "ringing" yang terlihat di sekitar batas kontras tinggi. Format ini tidak mendukung transparansi, menjadikannya tidak cocok untuk logo, ikon, dan elemen UI yang perlu menutupi konten lain. Dan karena JPEG bersifat lossy, mengedit dan menyimpan JPEG berulang kali menyebabkan penurunan kualitas kumulatif—apa yang kita sebut "kerugian generasi."

Saya menggunakan JPEG untuk foto, gambar utama, fotografi produk, dan gambar kompleks yang tidak memerlukan transparansi. Format ini didukung secara universal di semua browser, perangkat, dan platform, yang menjadikannya pilihan teraman saat kompatibilitas sangat penting. Untuk halaman produk e-commerce yang biasa, saya akan menyajikan foto produk utama sebagai JPEG pada kualitas 82%, mencapai ukuran file sekitar 150-250KB untuk gambar berukuran 2000×2000 piksel.

PNG: Presisi dan Transparansi

PNG (Portable Network Graphics) dikembangkan pada tahun 1996 sebagai alternatif bebas paten untuk GIF, dan dengan cepat menjadi standar untuk gambar web lossless. PNG menggunakan kompresi DEFLATE, algoritma yang sama di balik file ZIP, yang berarti setiap piksel dipertahankan persis seperti di gambar asli.

PNG hadir dalam dua varian utama: PNG-8 dan PNG-24. PNG-8 mendukung hingga 256 warna dengan transparansi 1-bit opsional (sepenuhnya transparan atau sepenuhnya tidak transparan), menjadikannya cocok untuk grafik sederhana, ikon, dan gambar dengan palet warna terbatas. PNG-24 mendukung 16,7 juta warna plus transparansi alpha 8-bit (256 tingkat transparansi), menjadikannya ideal untuk gambar kompleks yang memerlukan transparansi atau gambar yang membutuhkan fidelitas sempurna.

Ukuran file menceritakan kisah. Foto produk berukuran 2000×2000 piksel yang sama yang terkompresi menjadi 200KB sebagai JPEG mungkin berukuran 1.2-2.8MB sebagai PNG-24, tergantung pada kompleksitas. Untuk grafik sederhana dengan area besar warna solid, PNG bisa mengalahkan JPEG—logo berukuran 500×500 piksel dengan 6 warna mungkin berukuran 45KB sebagai PNG-8 tetapi 78KB sebagai JPEG karena artefak kompresi.

Saya telah belajar menggunakan PNG secara strategis. Ini adalah format andalan saya untuk logo, ikon, elemen UI, infografis dengan teks, tangkapan layar, dan gambar apa pun yang memerlukan transparansi. Untuk e-commerce, saya menggunakan PNG untuk gambar produk yang perlu mengapung di latar belakang yang berbeda—bayangkan perhiasan di latar belakang transparan atau produk pakaian yang perlu menutupi adegan kehidupan sehari-hari.

Optimasi PNG sangat penting karena pengkodean PNG yang naif dapat menghasilkan file yang tidak perlu besar. Alat seperti pngquant, optipng, dan pngcrush dapat mengurangi ukuran file PNG sebesar 40-70% melalui strategi kompresi yang lebih baik dan optimasi palet warna, semua sambil mempertahankan jaminan lossless. Dalam alur kerja saya, setiap PNG melewati setidaknya dua proses optimasi sebelum penerapan.

WebP: Penantang Modern Google

Google memperkenalkan WebP pada tahun 2010, dan memerlukan hampir satu dekade untuk mencapai dukungan browser yang luas. per 2026, WebP menikmati dukungan browser lebih dari 97%, menjadikannya akhirnya layak untuk digunakan dalam produksi tanpa fallback di sebagian besar skenario. Saya mulai menggunakan WebP secara ekstensif pada tahun 2021, dan itu mengubah cara saya mendekati optimasi gambar.