JPG vs WebP vs AVIF: perbandingan format kompresi
Perbandingan praktis dari tiga format gambar raster dominan di 2026 - rasio kompresi, kompatibilitas, dan kapan menggunakan yang mana.
Kalau Anda pernah menelusuri topik optimasi gambar, tiga format ini pasti muncul terus: JPG, WebP, dan AVIF. Ketiganya pada dasarnya melakukan pekerjaan yang sama — mengompresi foto — tapi berada di titik yang sangat berbeda pada spektrum kompatibilitas vs efisiensi kompresi.
Ini perbandingan praktis: cara kerjanya, seberapa kecil sebenarnya perbedaan ukurannya, di mana didukung, dan kapan harus memilih yang mana.
Ringkasan cepat
| Format | Dirilis | Ukuran file (foto, kualitas sama) | Dukungan browser | Kecepatan encoding |
|---|---|---|---|---|
| JPG | 1992 | Baseline (100%) | 100% | Cepat |
| WebP | 2010 | 65-75% | ~96% | Sedang |
| AVIF | 2019 | 40-55% | ~92% | Lambat |
JPG menang pada kompatibilitas dan kecepatan encoding. WebP adalah sweet spot saat ini. AVIF menghasilkan file terkecil tetapi memakan waktu jauh lebih lama untuk dibuat.
Cara kerja di balik layar
JPG
JPG mengompresi gambar dengan membaginya menjadi blok 8×8 piksel dan mengubah setiap blok menjadi komponen frekuensi menggunakan Discrete Cosine Transform. Komponen frekuensi tinggi (detail halus) dikuantisasi secara agresif - di situlah kompresi lossy terjadi. Hasilnya direkonstruksi dengan set artefak yang dapat diprediksi: batas blok terlihat pada kualitas rendah, “ringing” di sekitar tepi tajam, dan detail halus yang buram.
Matematika dasarnya pada dasarnya tidak berubah sejak 1990-an. Format ini sederhana, didukung secara universal, dan cepat untuk di-encode dan di-decode.
WebP
WebP (Google, 2010) menggunakan prediksi berbasis blok yang berasal dari codec video VP8. Alih-alih blok 8×8 independen, setiap blok dapat merujuk ke tetangganya, yang jauh lebih efisien untuk gambar alami. WebP juga mendukung:
- Kompresi lossless (kompetitif dengan PNG)
- Transparansi alpha (seperti PNG)
- Animasi (seperti GIF, tetapi jauh lebih kecil)
Pada kualitas perseptual yang sama dengan JPG, file WebP biasanya 25-35% lebih kecil. WebP mendukung pengaturan kualitas dari 0 hingga 100 seperti JPG.
AVIF
AVIF (Alliance for Open Media, 2019) didasarkan pada codec video AV1 - generasi terbaru kompresi open source. Ia menggunakan teknik yang lebih canggih: blok berukuran lebih besar dan bervariasi, lebih banyak mode prediksi, dan entropy coding yang lebih baik.
Pada kualitas perseptual yang sama dengan JPG, file AVIF biasanya 45-55% lebih kecil. AVIF juga mendukung transparansi, HDR, gamut warna luas, dan animasi.
Jeratan: encoding AVIF lambat. Membuat AVIF dari foto dapat memakan waktu 2-10× lebih lama dari WebP setara, dan 10-30× lebih lama dari JPG. Decoding lebih cepat tetapi masih lebih banyak pekerjaan daripada JPG.
Perbandingan ukuran file dunia nyata
Foto tipikal (4000×3000 px, keluaran kamera) di-encode pada kualitas yang setara secara visual:
| Format | Ukuran file | vs JPG |
|---|---|---|
| PNG (lossless) | 28 MB | +2400% |
| JPG (kualitas 85) | 1,2 MB | 100% |
| JPG (kualitas 75) | 620 KB | 52% |
| WebP (kualitas 85) | 780 KB | 65% |
| WebP (kualitas 75) | 380 KB | 32% |
| AVIF (kualitas 85) | 540 KB | 45% |
| AVIF (kualitas 75) | 250 KB | 21% |
Penghematannya dramatis. Beralih dari JPG-85 ke AVIF-75 lebih dari 4× lebih kecil - untuk halaman yang memuat 10 gambar, itu perbedaan multi-megabyte.
Dukungan browser dan tool pada 2026
JPG: Universal. Setiap browser, klien email, sistem operasi, editor dokumen, CMS, dan penampil gambar mendukungnya. Jika sistem dapat menampilkan gambar sama sekali, ia bisa menampilkan JPG.
WebP: Didukung di semua browser modern (Chrome, Firefox, Safari, Edge, Opera, Samsung Internet) dan pada dasarnya semua sistem operasi utama. WebP sekarang aman sebagai format utama untuk gambar web. Celah yang tersisa ada di tooling lama: beberapa editor gambar, klien email, dan CMS pihak ketiga masih menangani WebP dengan canggung.
AVIF: Didukung di Chrome, Firefox, Safari, Edge, dan sebagian besar browser baru. Dukungan global berada di sekitar 92%. Celah yang tersisa sebagian besar adalah Safari lama, Firefox lama (pre-93), dan browser enterprise legacy. Dukungan AVIF di editor gambar dan alat desain lebih tidak merata daripada WebP.
Untuk pengiriman web, baik WebP maupun AVIF sekarang aman jika Anda menyediakan fallback JPG menggunakan elemen <picture>:
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="...">
</picture>
Browser memilih format terbaik yang didukungnya.
Kecepatan encoding dalam praktik
Jika Anda mengompresi satu gambar untuk posting blog, perbedaan kecepatan encoding tidak menjadi masalah - kita berbicara tentang hitungan detik. Jika Anda memproses katalog 50.000 foto produk, itu sangat penting.
Perkiraan waktu encoding untuk foto 4000×3000 pada laptop modern:
- JPG (kualitas 75): 0,1 detik
- WebP (kualitas 75): 0,3 detik
- AVIF (kualitas 75): 3-8 detik (tergantung pada encoder dan pengaturan effort)
Encoder AVIF memiliki pengaturan “effort” atau “speed”. Effort lebih tinggi = file lebih kecil tetapi jauh lebih lambat. Untuk batch processing, menggunakan pengaturan effort lebih rendah sering membuat AVIF praktis dengan biaya output 5-15% lebih besar.
Kapan menggunakan masing-masing
Gunakan JPG saat Anda butuh kompatibilitas yang terjamin di mana saja — email, dokumen Office, sistem lama. Juga untuk alur kerja cetak, stock photography, atau saat encode harus cepat seperti pembuatan thumbnail massal.
Gunakan WebP untuk gambar web, terutama saat bisa menyediakan fallback JPG. WebP bisa menggantikan JPG dan PNG sekaligus — termasuk mendukung transparansi. Sweet spot antara kompresi yang bagus dan kecepatan encoding yang masuk akal.
Gunakan AVIF kalau Anda ingin file sekecil mungkin dan kecepatan encoding bukan prioritas — gambar hero yang sudah diproses sebelumnya, konten CDN yang di-cache. AVIF juga sangat baik untuk konten HDR atau wide-gamut, dan animasi pendek berkualitas tinggi yang jauh mengalahkan GIF maupun APNG.
Apa yang terjadi kalau menyajikan WebP/AVIF tanpa fallback?
Browser lama atau klien non-browser — beberapa klien email, Office, pembaca layar — akan menampilkan ikon gambar rusak. Pengguna melihat konten yang hilang. Selalu gunakan <picture> dengan fallback JPG atau PNG kecuali Anda mengontrol klien dan tahu pasti format tersebut didukung.
Rekomendasi untuk situs web biasa di 2026
- Simpan master setiap gambar dalam format aslinya (JPG kamera, PSD, dll.)
- Ekspor JPG pada kualitas 85 sebagai fallback universal
- Ekspor WebP pada kualitas 75 sebagai format web utama
- Opsional ekspor AVIF pada kualitas 70 untuk penghematan maksimum
- Gunakan
<picture>agar browser memilih format terbaiknya
Kalau ingin tetap sederhana dan skip AVIF, WebP saja sudah memberi penghematan 25-35% vs JPG dengan overhead operasional minimal. Itu sudah hasil yang sangat berarti.
Image Compressor kami menerima JPG, PNG, dan WebP, dan mempertahankan format input. Untuk konversi format — misalnya JPG → WebP — Anda perlu konverter khusus, tapi untuk mengurangi ukuran file dalam format yang sama, ini alat browser-side yang cepat dengan slider kualitas langsung.
Apa pun format yang Anda pilih, intinya satu: jangan sajikan gambar tanpa kompresi. JPG kualitas 95 untuk web seperti mencetak situs Anda di kertas foto glossy padahal PDF sudah lebih dari cukup.