Perbandingan format imej: JPEG, PNG, WebP, dan AVIF
Keempat format ini menutupi lebih dari 99% imej di web modern. Tawaran pemampatan, ketelusan, animasi, dan sokongan pelayar sangat berbeza. Berikut panduan praktis memilih.
Perbandingan ringkas
Ringkasan dulu, uraian per format di bawah.
| Properti | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| Mampati | Lossy | Lossless | Lossy + lossless | Lossy + lossless |
| Alpha (ketelusan) | Tidak | Ya (8-bit) | Ya (8-bit) | Ya (penuh) |
| Animasi | Tidak | Hanya APNG | Ya | Ya |
| Kedalaman bit maks. | 8-bit | 16-bit | 8-bit | 10/12-bit |
| Ukuran tipikal vs JPEG (foto) | 100% | 300–1000% | 65–75% | 40–60% |
| Sokongan pelayar | Luas | Luas | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| Kelajuan enkode tipikal | Cepat | Cepat | Sedang | Lambat |
JPEG — standar paling umum
Cara ia berfungsi
JPEG (Joint Photographic Experts Group) distandarkan 1992 dan tertua di empat format ini. Memakai DCT lossy pada blok 8×8, kuantisasi, dan entropi. Kualiti dikendalikan angka 1–100. Pengekod modern seperti MozJPEG mengejar 10–20% ukuran tanpa ubah aliran bit — setiap decoder JPEG boleh membaca.
Paling sesuai untuk
Foto dengan gradien halus dan banyak detail — potret, lanskap, produk, hero.
Kelebihan
- Disokong hampir semua pemapar imej.
- Dekode dipercepat peranti keras hampir di mana saja.
- Ekosistem optimizer matang (MozJPEG, jpegli).
Kekurangan
- Tanpa saluran alfa — latar harus rata.
- Artefak kotak-kotak pada teks, garis, tepi tajam.
- Hanya 8 bit per saluran.
PNG — lossless dan transparan
Cara ia berfungsi
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/pemampatan agar paling kecil tanpa ubah satu piksel.
Paling sesuai untuk
UI, ikon, tangkapan skrin, diagram, line art, logo warna rata, dan hal yang butuh saluran alfa sejati.
Kelebihan
- Lossless — piksel utuh melalui siklus pemampatan.
- Alpha 8-bit, hingga 16 bit per saluran.
- Disokong 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 ia berfungsi
WebP dirilis Google 2010, berasaskan codec video VP8, lalu ditambah mode lossless terpisah. Menyokong lossy dan lossless dalam satu wadah, alpha dan animasi. Mode lossy biasanya mengungguli JPEG 25–35% pada kualiti sama; mode lossless mengungguli PNG 20–30%.
Paling sesuai 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 kualiti.
- Sokongan lebar: pelayar evergreen sejak 2020.
Kekurangan
- 8 bit per saluran — tanpa HDR.
- Lebih lambat dinyahkod dari JPEG di beberapa peranti lemah.
AVIF — pimpinan pemampatan saat ini
Cara ia berfungsi
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. Pengekod referensi
(aom-av1 melalui libavif) lambat memberi pemampatan terbaik untuk foto nyata.
Paling sesuai untuk
Hero, galeri, dan setiap saat bandwidth lebih penting dari waktu CPU. Baik sebagai tier atas elemen
<picture>.
Kelebihan
- Mampati 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 menyokong 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 melalui
<picture>. - Grafik UI transparan (ikon, logo): PNG keserasian lama, WebP lossless ukuran kecil.
- Line art, tangkapan skrin, 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 pelayar hari ini: JPEG untuk foto, PNG untuk grafis — bukan paling kecil, tanpa utang keserasian.
Praktisnya tidak perlu pilih satu. Sajikan AVIF dulu, WebP kedua, JPEG atau PNG terakhir di
<picture> — setiap pelayar dapat versi terkecil yang boleh dinyahkod.
Soalan lazim
Bagaimana menukar JPG ke WebP?
Buka PicBrewery, letakkan JPG — WebP dihasilkan secara automatik bersama JPEG, PNG, AVIF. Pilih sel WebP dan klik muat turun. Semuanya dalam pelayar, tanpa muat naik.
Bagaimana menukar PNG ke AVIF?
Letakkan PNG ke PicBrewery. Enkode ke JPEG, WebP, dan AVIF paralel di Web Worker. Klik kolom AVIF atau pilih banyak baris lalu muat turun ZIP varian terkecil per sumber.
Adakah AVIF lebih baik dari WebP?
Untuk foto AVIF sering 20–30% lebih kecil berkat AV1. WebP enkode lebih cepat, menyokong pelayar lama lebih luas — saling melengkapi.
Adakah Safari menyokong WebP?
Ya, sejak Safari 14 (2020). Safari kini menyahkod lossy dan lossless WebP.
Adakah PNG selalu lossless?
Ya. DEFLATE PNG lossless; pengurangan ukuran dari filter dan tuning, bukan buang data imej.
Adakah JPEG punya ketelusan?
Tidak. Perlukan ketelusan gunakan PNG, WebP, atau AVIF. JPEG XL punya alpha tetapi belum disokong luas.
Seberapa jauh AVIF lebih kecil dari JPEG?
Foto dengan pengekod modern biasanya 40–60% lebih kecil dari MozJPEG sebanding kualiti. Hemat berkurang saat detail rendah, warna rata.
Adakah pelayar saya menyahkod AVIF?
Chrome 85+, Firefox 93+, Edge 121+, Safari 16+. Pakai <picture> dengan cadangan WebP/JPEG.
Adakah PicBrewery hanya sisi klien?
Ya. Nyahkod dan enkod di WebAssembly di Web Worker Anda. Hanya memuat app statis dan codec.
Tukar antarformat
Mencari pas spesifik? Pilih di bawah — tiap halaman punya langkah, perkiraan penjimatan, dan FAQ.
Coba dengan imej Anda
Letakkan serangkaian JPG ke PicBrewery, lihat WebP dan AVIF berdampingan. Tidak ada muat naik.