1. Beranda
2. Format gambar

Perbandingan format gambar: JPEG, PNG, WebP, dan AVIF

Keempat format ini menutupi lebih dari 99% gambar di web modern. Tawaran kompresi, transparansi, animasi, dan dukungan peramban sangat berbeda. Berikut panduan praktis memilih.

Perbandingan ringkas

Ringkasan dulu, uraian per format di bawah.

JPEG — standar paling umum

Cara kerja

JPEG (Joint Photographic Experts Group) distandarkan 1992 dan tertua di empat format ini. Memakai DCT lossy pada blok 8×8, kuantisasi, dan entropi. Kualitas dikendalikan angka 1–100. Encoder modern seperti MozJPEG mengejar 10–20% ukuran tanpa ubah aliran bit — setiap decoder JPEG bisa membaca.

Paling cocok untuk

Foto dengan gradien halus dan banyak detail — potret, lanskap, produk, hero.

Kelebihan

• Didukung hampir semua penampil gambar.
• Dekode dipercepat perangkat keras hampir di mana saja.
• Ekosistem optimizer matang (MozJPEG, jpegli).

Kekurangan

• Tanpa saluran alpha — latar harus rata.
• Artefak kotak-kotak pada teks, garis, tepi tajam.
• Hanya 8 bit per saluran.

PNG — lossless dan transparan

Cara kerja

PNG (Portable Network Graphics) muncul pertengahan 1990an menggantikan GIF bebas paten. Benar-benar lossless: DEFLATE di atas filter per baris. Optimizer seperti oxipng (Rust, dari optipng) mencoba kombinasi filter/kompresi agar paling kecil tanpa ubah satu piksel.

Paling cocok untuk

UI, ikon, tangkapan layar, diagram, line art, logo warna rata, dan hal yang butuh saluran alpha sejati.

Kelebihan

• Lossless — piksel utuh lewat siklus kompresi.
• Alpha 8-bit, hingga 16 bit per saluran.
• Didukung universal.

Kekurangan

• Besar untuk foto — sering jauh lebih besar dari JPEG/WebP/AVIF.
• Tanpa animasi di spesifikasi asli (APNG ekstensi belakangan).

WebP — format khusus web Google

Cara kerja

WebP dirilis Google 2010, berbasis codec video VP8, lalu ditambah mode lossless terpisah. Mendukung lossy dan lossless dalam satu wadah, alpha dan animasi. Mode lossy biasanya mengungguli JPEG 25–35% pada kualitas sama; mode lossless mengungguli PNG 20–30%.

Paling cocok untuk

Pengiriman web umum saat AVIF belum aman — foto, sprite dengan alpha, menggantikan GIF animasi, tier fallback di bawah AVIF.

Kelebihan

• Satu format untuk foto, grafik, alpha, animasi.
• Lebih kecil jelas dari JPEG dan PNG sebanding kualitas.
• Dukungan lebar: peramban evergreen sejak 2020.

Kekurangan

• 8 bit per saluran — tanpa HDR.
• Lebih lambat didekode dari JPEG di beberapa perangkat lemah.

AVIF — terdepan dalam kompresi saat ini

Cara kerja

AVIF (AV1 Image File Format) profil still-image codec video AV1, 2019, Alliance for Open Media. Warna hingga 12-bit, alpha, HDR, gamut lebar, sintesis film grain. Encoder referensi (aom-av1 lewat libavif) lambat memberi kompresi terbaik untuk foto nyata.

Paling cocok untuk

Hero, galeri, dan setiap saat bandwidth lebih penting dari waktu CPU. Baik sebagai tier atas elemen <picture>.

Kelebihan

• Kompresi terdepan — umum 40–60% lebih kecil dari JPEG.
• Alpha, animasi, HDR, gamut lebar, kedalaman 10/12-bit.
• Bebas royalti dan terbuka.

Kekurangan

• Enkode lambat — rencanakan saat build atau async.
• Safari mendukung sejak versi 16 (2022).
• Kurang anggun untuk sintetis dibanding WebP lossless atau PNG.

Format mana yang dipakai?

• Foto, hero full-bleed: AVIF utama, WebP dan JPEG cadangan lewat <picture>.
• Grafik UI transparan (ikon, logo): PNG kompatibilitas lama, WebP lossless ukuran kecil.
• Line art, tangkapan layar, diagram: PNG (atau WebP lossless) — JPEG/AVIF tidak ramah pada tepi tajam.
• Menggantikan GIF animasi: WebP atau AVIF — jauh lebih kecil, alpha asli.
• Satu format untuk semua peramban hari ini: JPEG untuk foto, PNG untuk grafis — bukan paling kecil, tanpa utang kompatibilitas.

Praktisnya tidak perlu pilih satu. Sajikan AVIF dulu, WebP kedua, JPEG atau PNG terakhir di <picture> — setiap peramban dapat versi terkecil yang bisa didekode.