JPEG vs PNG vs WebP vs AVIF: Perbandingan Format Gambar Lengkap

Memilih format gambar yang salah adalah salah satu kesalahan paling umum dan paling mahal dalam performa web. JPEG di mana WebP sudah cukup, PNG di mana JPEG sudah memadai, atau format yang tidak didukung browser — masing-masing menambahkan beban yang tidak perlu pada setiap pemuatan halaman, secara langsung membahayakan skor Core Web Vitals dan pengalaman pengguna. Panduan ini menjelaskan cara kerja JPEG, PNG, WebP, dan AVIF di baliknya, kapan menggunakan masing-masing, dan cara membuat pilihan yang tepat untuk konteksmu.

Kamu bisa mengkonversi antara format apa pun menggunakan BrowseryTools Image Converter — gratis, tanpa daftar, dan semuanya berjalan secara lokal di browsermu.

JPEG: Standar Fotografi

JPEG (Joint Photographic Experts Group) diperkenalkan pada 1992 dan tetap menjadi format dominan untuk foto. Algoritma kompresinya didasarkan pada Discrete Cosine Transform (DCT): setiap gambar dibagi menjadi blok piksel 8×8, dan setiap blok ditransformasi dari domain spasial (warna piksel) ke domain frekuensi (seberapa cepat warna berubah di seluruh blok). Encoder kemudian melakukan kuantisasi data frekuensi ini — mempertahankan komponen frekuensi rendah yang mendeskripsikan area warna luas, dan membuang atau mengkasar komponen frekuensi tinggi yang mendeskripsikan detail halus dan tepi tajam.

Inilah mengapa kompresi JPEG menghasilkan artefak khas pada pengaturan agresif: patch 8×8 blok (disebut macroblocking), smearing di sekitar tepi tajam, dan color banding pada gradien. Artefak ini muncul di area detail halus dan kontras tinggi — tepatnya area di mana komponen frekuensi tinggi yang dibuang encoder akan paling berpengaruh.

JPEG bersifat lossy — setiap penyimpanan membuang informasi secara permanen. Pada kualitas 85–90 (dalam skala 0–100), foto biasanya terlihat tidak dapat dibedakan dari aslinya pada ukuran tampil web sambil 5–20× lebih kecil dari PNG dari gambar yang sama. JPEG tidak mendukung transparansi (alpha channel) atau animasi.

PNG: Presisi Lossless

PNG (Portable Network Graphics) menggunakan kompresi lossless berdasarkan algoritma DEFLATE, yang menggabungkan kompresi kamus LZ77 (menemukan dan mengganti urutan byte yang berulang) dengan Huffman coding (menetapkan kode bit lebih pendek untuk nilai yang lebih sering muncul). Tidak ada data gambar yang pernah dibuang. Setiap piksel disimpan dengan tepat.

Ini membuat PNG sangat baik untuk gambar yang harus direproduksi secara piksel-sempurna: screenshot, logo, ikon, ilustrasi dengan tepi tajam, teks yang ditumpangkan pada gambar, dan apa pun yang memiliki transparansi. PNG mendukung alpha channel 8-bit penuh, memungkinkan gradien semi-transparan yang mulus.

Trade-off-nya adalah ukuran file. Untuk konten fotografi dengan gradien warna yang berkelanjutan, file PNG sangat besar dibandingkan JPEG pada kualitas yang sama. Foto yang disimpan sebagai PNG mungkin 10–20× lebih besar dari gambar yang sama sebagai JPEG yang terkompresi dengan baik. PNG unggul ketika konten memiliki area seragam yang besar, tepi keras, atau relatif sedikit warna berbeda — pola yang dikompresi LZ77 secara efisien. Fotografi, dengan jutaan nilai warna yang sedikit berbeda, adalah kasus terburuk untuk PNG.

WebP: Format Web Modern

WebP diperkenalkan oleh Google pada 2010, diturunkan dari codec video VP8. Ia mendukung mode kompresi lossy dan lossless, plus animasi dan transparansi di kedua mode. Mode lossy menggunakan pendekatan blok berbasis DCT yang mirip dengan JPEG tetapi dengan teknik prediksi yang lebih canggih dan entropy coding yang lebih baik, biasanya mencapai file 25–35% lebih kecil dari JPEG pada kualitas visual yang setara. Mode lossless 15–25% lebih efisien dari PNG untuk sebagian besar konten.

Dukungan browser kini hampir universal — semua browser utama telah mendukung WebP sejak 2020. Kesenjangan yang tersisa adalah software lama: beberapa aplikasi pengedit gambar lama dan penampil gambar sistem operasi tidak menangani WebP secara native. Untuk pengiriman web, WebP adalah default modern yang langsung menggantikan JPEG dan PNG di sebagian besar kasus.

AVIF: Generasi Berikutnya

AVIF (AV1 Image File Format) didasarkan pada keyframe dari codec video AV1, yang dikembangkan oleh Alliance for Open Media dan dirilis pada 2018. Teknik kompresi AV1 jauh lebih canggih dari yang mendasari JPEG atau WebP: blok prediksi berukuran besar dan variabel, prediksi intra-frame yang lebih canggih, penanganan film grain dan noise yang lebih baik, dan entropy coding yang superior. Hasilnya biasanya file 40–50% lebih kecil dari JPEG pada kualitas yang setara — sering mengalahkan WebP sebesar 20–30% juga.

AVIF mendukung HDR penuh, gamut warna luas, transparansi, animasi, dan kedalaman warna 8-bit dan 10-bit. Dukungan browser telah mengejar dengan cepat: Chrome (85+), Firefox (93+), dan Safari (16+) semuanya mendukung AVIF. Kelemahan utama adalah kecepatan encoding — AVIF jauh lebih lambat untuk di-encode dari JPEG atau WebP, yang penting untuk pipeline pemrosesan gambar real-time tetapi tidak relevan untuk aset statis yang sudah dikompresi sebelumnya.

Perbandingan Ukuran File untuk Gambar yang Sama

Untuk membuat perbedaannya lebih konkret, berikut perbandingan representatif untuk foto 1920×1080 pada kualitas visual yang sebanding:

• PNG (lossless) — 4,2 MB. Reproduksi sempurna, tanpa artefak. Tepat untuk master sumber atau ketika akurasi piksel diperlukan.
• JPEG (kualitas 85) — 380 KB. Artefak yang terlihat minimal pada ukuran layar. Standar untuk pengiriman web fotografi selama tiga dekade.
• WebP (lossy, kualitas setara) — 270 KB. Sekitar 30% lebih kecil dari JPEG, secara visual sebanding. Upgrade langsung untuk sebagian besar proyek web.
• AVIF (kualitas setara) — 180 KB. Sekitar 50% lebih kecil dari JPEG, secara visual sebanding atau lebih baik. Ukuran file terbaik yang tersedia saat ini untuk konten fotografi.

Ini adalah angka representatif; rasio aktualnya bervariasi berdasarkan konten gambar. Fotografi dengan detail tinggi dan noise tinggi mendapat manfaat lebih sedikit dari codec lebih baru dibandingkan gambar yang halus dan noise rendah.

Kapan Menggunakan Setiap Format

• Foto di web — Gunakan WebP dengan fallback JPEG melalui elemen HTML <picture>. Jika pipeline build-mu mendukung encoding AVIF, sajikan AVIF dengan fallback WebP dan JPEG.
• Logo, ikon, elemen UI dengan transparansi — WebP (lossless) atau PNG. JPEG tidak dapat merepresentasikan transparansi sama sekali.
• Screenshot dan rekaman layar — PNG untuk apa pun yang memerlukan reproduksi piksel tepat. WebP lossless sebagai alternatif lebih kecil ketika fidelitas tepat tidak kritis.
• Ilustrasi dengan warna datar dan tepi tajam — PNG atau WebP lossless. JPEG akan menimbulkan artefak ringing yang terlihat di sekitar tepi keras bahkan pada pengaturan kualitas tinggi.
• Cetak dan arsip — PNG (lossless) atau TIFF. Format lossy tidak tepat untuk aset sumber yang akan diedit ulang.
• Email — JPEG atau PNG. Klien email memiliki dukungan tidak konsisten untuk WebP dan hampir tidak ada untuk AVIF. Utamakan kompatibilitas daripada optimasi.

Dampak pada Core Web Vitals dan Performa Halaman

Largest Contentful Paint (LCP) — salah satu Core Web Vitals Google — mengukur berapa lama waktu yang dibutuhkan elemen konten terbesar yang terlihat (sering kali gambar hero) untuk dimuat. Pilihan format gambar secara langsung mempengaruhi LCP: gambar hero AVIF dimuat lebih cepat dari JPEG yang setara, dan LCP yang lebih cepat meningkatkan pengalaman pengguna sekaligus peringkat pencarian.

Efek kumulatifnya juga penting. Halaman dengan 20 gambar produk, masing-masing disimpan sebagai PNG alih-alih WebP secara tidak perlu, mungkin 5–10 MB lebih berat dari yang dibutuhkan. Pada koneksi mobile, itu adalah perbedaan antara halaman yang dimuat dalam 2 detik dan yang dimuat dalam 8 detik.

Menyajikan Format Berbeda ke Browser yang Berbeda

Elemen HTML <picture> dan <source> anaknya memungkinkanmu menyajikan format terbaik yang didukung setiap browser tanpa JavaScript:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" />
</picture>

Browser memilih <source> pertama yang didukungnya. Browser dengan dukungan AVIF mengunduh file terkecil; browser tanpa dukungan akan jatuh ke WebP atau JPEG. Tag <img> di bagian akhir berfungsi sebagai fallback universal dan satu-satunya elemen yang memerlukan atribut alt.

Untuk mengkonversi gambar yang ada ke WebP atau AVIF untuk pengaturan multi-format seperti ini, BrowseryTools Image Converter menangani konversi batch tanpa mengupload apa pun ke server — file sumbermu tetap di perangkatmu.