JPG vs PNG vs WebP vs AVIF — Format Gambar Mana yang Harus Dipakai?

Pada akhirnya ada tiga pertimbangan saat memilih format gambar: apa isinya (foto, atau grafis dengan banyak teks dan garis), apakah perlu latar transparan, dan apakah pihak penerima bisa membuka format tersebut. Artikel ini terlebih dahulu menjelaskan perbedaan struktural empat format utama, lalu di akhir merangkum tabel pilihan per situasi. Angka dukungan browser adalah nilai yang dicek dari data Can I use pada tanggal acuan (2026-09-23).

Tabel perbandingan sekilas

Persentase dukungan didasarkan pada pangsa penggunaan browser global yang dihimpun Can I use. Jika Anda juga harus memperhitungkan browser lama atau penampil internal kantor, JPG dan PNG tetap pilihan paling aman.

JPG — standar 30 tahun yang dioptimalkan untuk foto

JPG membagi gambar menjadi blok 8×8 piksel, mengubahnya menjadi komponen frekuensi dengan transformasi kosinus diskret (DCT), lalu mengkuantisasi secara kasar dan membuang komponen frekuensi tinggi yang kurang disadari mata manusia. Informasi warna juga sering disimpan dengan resolusi lebih rendah daripada kecerahan (chroma subsampling). Karena itu, pada foto dengan gradasi warna halus seperti langit atau kulit, perbedaan sulit dikenali bahkan pada kualitas sekitar 80, tetapi pada gambar dengan banyak teks, garis, dan batas warna solid, muncul noda yang menyebar di sekitar tepi (ringing, noise blok).

• Kelebihan: diterima hampir semua perangkat, program, dan formulir unggah. Ukuran file bisa diatur dalam rentang lebar lewat nilai kualitas.
• Keterbatasan: tidak ada transparansi, dan kehilangan data menumpuk setiap kali disimpan ulang. Tidak cocok sebagai file perantara saat mengedit.

PNG — pilihan default untuk teks, logo, dan tangkapan layar

PNG adalah format lossless yang mempertahankan nilai piksel apa adanya. Setiap baris diberi filter yang menghitung selisih dengan piksel tetangga, lalu dikompresi dengan Deflate (keluarga yang sama dengan zip). Pada tangkapan layar, diagram, dan logo yang memiliki area warna sama yang luas, PNG lebih kecil dan lebih tajam daripada JPG, tetapi pada foto yang nilai pikselnya sedikit berbeda satu sama lain, kompresinya kurang efektif sehingga ukurannya bisa beberapa kali JPG.

PNG edisi ketiga yang diterbitkan W3C pada Juni 2025 secara resmi memasukkan PNG animasi (APNG), informasi warna HDR, dan chunk EXIF ke dalam standar. Kompatibilitas dengan file PNG lama tetap terjaga.

WebP — JPG dan PNG dalam satu format

WebP memiliki mode lossy (berbasis codec video VP8) dan mode lossless dalam satu format, dan kedua mode mendukung transparansi serta animasi. Google menyatakan bahwa pada metrik kualitas SSIM yang sama, WebP lossy 25–34% lebih kecil daripada JPG, dan WebP lossless 26% lebih kecil daripada PNG. Angka ini adalah hasil uji internal Google, jadi penghematan nyata bergantung pada isi gambar dan pengaturan encoder.

Spesifikasi dan tipe media WebP (image/webp) resmi didaftarkan sebagai IETF RFC 9649 pada November 2024. Safari mulai mendukungnya sejak versi 14 (di macOS mulai Big Sur), jadi jika banyak pengguna Anda memakai perangkat Apple sebelum 2020, lebih aman menyiapkan gambar cadangan.

AVIF — format terbaru yang paling kecil, tetapi lambat dienkode

AVIF adalah format yang menyimpan gambar terkompresi dengan codec video bebas royalti AV1 di dalam kontainer keluarga HEIF; Alliance for Open Media (AOMedia) merilis spesifikasi 1.0.0 pada Februari 2019. AVIF bisa memuat warna 10·12 bit per kanal dan HDR, dan pada kualitas yang sama sering lebih kecil daripada WebP. Sebaliknya, beban komputasi encoding-nya besar sehingga mengonversi banyak foto besar memakan waktu lama, dan menurut MDN AVIF tidak mendukung tampilan progresif.

Versi awal dukungan di browser utama adalah Chrome 85, Firefox 93, Safari 16.4 (dukungan parsial 16.1), dan Edge 121. Karena Edge paling akhir bergabung (awal 2024), gambar mungkin tidak tampil jika Edge di PC kantor dikunci pada versi lama.

Tampilan saat kualitas turun juga berbeda

Meski sama-sama "kualitas rendah", cara kualitas rusak berbeda di tiap format. Mengetahui bagian mana yang perlu diperiksa memudahkan Anda menentukan nilai kualitas.

• JPG: batas blok 8×8 terlihat seperti kisi, dan muncul riak seperti gelombang (ringing) di sekitar teks dan garis. Di area landai seperti langit muncul tangga berbentuk pita.
• WebP (lossy): bekas blok lebih sedikit daripada JPG, tetapi detail jadi lembek dan warna tampak meluber. Garis tipis merah dan biru khususnya menjadi kabur.
• AVIF: bahkan pada kualitas rendah hampir tidak ada bekas blok, tetapi tekstur seperti pori kulit, rumput, dan rambut bisa terhapus mulus sehingga tampak seperti "lukisan cat air".
• PNG: karena lossless, tidak ada penurunan kualitas. Namun jika Anda mengurangi jumlah warna untuk memperkecil ukuran, gradasi akan berpita.

Saat memeriksa hasil, lebih baik memperbesar wajah, teks, dan langit hingga 100% atau lebih lalu membandingkannya dengan aslinya, alih-alih melihat seluruh layar.

Di mana posisi JPEG XL dan HEIC?

• JPEG XL: format generasi berikutnya dengan banyak kelebihan, misalnya bisa mengemas ulang JPG lama secara lossless dengan ukuran lebih kecil, tetapi per tanggal acuan, menurut Can I use hanya Safari 17 ke atas yang mendukung sebagian, sementara Chrome dan Firefox tidak menampilkannya dengan pengaturan bawaan. Masih terlalu dini untuk langsung dipakai di web.
• HEIC: format bawaan foto iPhone, tetapi di antara browser web hanya Safari 17 ke atas yang menampilkannya. Umumnya diubah ke JPG sebelum dikirim atau dibagikan (panduan HEIC).

Alur memilih per situasi

1. Apakah pihak penerima (instansi pemerintah, sekolah, toko online) sudah menentukan format yang diizinkan? → Ikuti daftar itu. Kebanyakan JPG.
2. Perlu latar transparan? → Untuk web, WebP; untuk edit dan cetak, PNG.
3. Foto atau grafis? → Foto: JPG (kompatibilitas) atau WebP·AVIF (ukuran); teks, garis, diagram: PNG atau WebP lossless.
4. Ingin mempercepat situs web? → Gunakan AVIF atau WebP, dan sediakan JPG untuk browser lama.

Hal yang perlu diketahui saat mengonversi

• Konversi lossy → lossy menumpuk kehilangan. Jika JPG diubah ke WebP, kehilangan WebP ditambahkan di atas informasi yang sudah dibuang JPG. Jika punya file asli, konversikan sekali saja dari aslinya.
• Konversi transparan → buram (PNG·WebP → JPG) mengharuskan area transparan diisi warna latar seperti putih.
• Kedalaman warna dan HDR turun menjadi 8 bit begitu diubah ke JPG.
• Jika mengganti format saja tidak mengecilkan ukuran, menurunkan resolusi sekaligus adalah cara paling efektif. Prinsipnya dijelaskan rinci di cara kerja kompresi gambar.

Konversi antarformat bisa dilakukan sepenuhnya di dalam browser dengan alat konversi format gambar, dan spesifikasi rinci tiap format dirangkum di kamus format.

Pertanyaan umum

Diperbarui: 2026-09-23

Sumber

• MDN — Image file type and format guide
• Google for Developers — An image format for the Web (WebP)
• ITU-T Recommendation T.81 (09/92) — spesifikasi JPEG
• W3C — PNG Specification (Third Edition)
• AOMedia — AV1 Image File Format (AVIF)
• Can I use — WebP image format
• Can I use — AVIF image format
• Can I use — HEIF/HEIC image format
• Can I use — JPEG XL image format