JPG vs PNG untuk web - kapan menggunakan setiap format gambar

Diterbitkan 20 April 2026

---

JPG dan PNG adalah dua format gambar web yang dominan dari 1996 hingga 2010-an, dan mereka masih merupakan format yang didukung oleh setiap browser, setiap pustaka gambar, dan setiap situs stok tanpa keraguan. Pembagiannya sederhana pada prinsipnya - JPG untuk foto, PNG untuk apa pun dengan tepi tajam atau transparansi - tetapi keputusan nyata hari ini melibatkan ukuran file, rantai fallback WebP/AVIF modern, dan apakah screenshot PNG terlalu berat untuk dikirim. Panduan ini mencakup mekanika encoding, aturan keputusan yang berlaku di 2026, dan jalur peningkatan ke format modern.

Bagaimana setiap format mengkompresi piksel

JPG (juga ditulis JPEG) adalah format lossy. Encoder mengkonversi piksel ke domain frekuensi (DCT), mengkuantisasi koefisien frekuensi tinggi, dan membuang detail yang paling tidak mungkin diperhatikan mata manusia. Kenop kualitas (0-100, di mana lebih tinggi lebih baik) mengontrol seberapa agresif kuantisasi itu menghilangkan detail. JPG cemerlang pada foto dan buruk pada tepi tajam - teks, krom UI, dan line art memperoleh artefak halo yang terlihat pada pengaturan kualitas web yang tipikal.

PNG (Portable Network Graphics) adalah format lossless. Piksel keluar identik bit-demi-bit dengan piksel masuk. PNG mengkompresi dengan menemukan pola dalam grid piksel (DEFLATE pada scanline yang difilter) - bagus pada area warna datar yang besar, sedang pada gradien fotografis. PNG juga mendukung transparansi via channel alpha, yang tidak dilakukan JPG.

Perbandingan ukuran file untuk gambar yang sama

Aturan keputusan yang berlaku di 2026

Foto, full bleed, tidak butuh transparansi. → JPG (kualitas 80-85) sebagai baseline; WebP/AVIF sebagai varian yang ditingkatkan. JPG pada q=82 secara visual tidak dapat dibedakan dari aslinya yang lossless untuk semua kecuali mata yang paling terlatih. File 5-10× lebih kecil daripada PNG dari foto yang sama.

Foto dengan transparansi (subjek dipotong pada latar belakang transparan). → PNG - JPG tidak dapat mewakili alpha. Pilih WebP jika audiens Anda mengecualikan klien email lama dan WebView Android lama.

Screenshot UI, kode, atau teks. → PNG sebagai kanonik; WebP lossless sebagai ditingkatkan. Tepi piksel tajam (anti-aliasing teks, batas UI) mengungkapkan artefak kompresi JPG pada kualitas apa pun di bawah 90, dan JPG kualitas 90 lebih besar daripada PNG yang setara.

Logo atau grafik sederhana. → SVG jika Anda memiliki sumber vektor (lihat panduan PNG vs SVG). Jika hanya raster yang ada, PNG menang dalam ketajaman; WebP lossless sebagai ditingkatkan.

Header newsletter email. → Hanya JPG atau PNG. Banyak klien email tidak merender WebP/AVIF. Gunakan format universal bahkan ketika codec modern akan menghemat byte.

Sweet spot kualitas-vs-ukuran

JPG kualitas 82 adalah default web yang berfungsi selama satu dekade. Di bawah 75, artefak kompresi menjadi terlihat pada foto kaya detail; di atas 90, ukuran file tumbuh cepat dengan keuntungan visual minimal.

JPG progressive adalah penataan ulang data gambar yang sama - kualitas sama, ukuran sama, tetapi browser dapat menampilkan pratinjau resolusi rendah segera setelah grup scanline pertama diunduh. Gunakan encoding progressive untuk setiap foto hero above-the-fold.

Pengoptimal PNG (pngquant, oxipng, zopflipng) dapat memotong 30-70% dari ekspor PNG default tanpa kehilangan kualitas - mereka mencari parameter filter/kompresi yang lebih baik daripada yang dicoba encoder. Selalu jalankan optimasi sebelum mengirim PNG besar ke produksi.

Memilih kualitas: target konkret

Pemeriksa level kompresi JPEG kami menginspeksi JPG yang ada dan melaporkan tabel kuantisasinya. Gunakan untuk merekayasa-balik kualitas apa yang digunakan foto saat disimpan sebelum re-encoding. Aturan praktis: foto yang di-re-encode lebih dari dua kali pada kualitas 82 kehilangan detail yang terlihat; jika Anda adalah hop ketiga dalam rantai, naikkan kualitas ke 90 untuk mempertahankan margin untuk re-save di masa depan.

Rantai fallback <picture>

Situs modern menyajikan varian AVIF atau WebP ke browser yang dapat memecahkan kodenya dan kembali ke JPG atau PNG untuk sisanya:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Deskripsi" width="1920" height="1080">
</picture>

Browser memilih source pertama yang dapat dipecahkan kodenya. <img> adalah fallback universal. Selalu sertakan width dan height untuk mencegah cumulative layout shift.

Kapan meningkatkan PNG ke WebP atau AVIF

WebP lossless adalah pengganti langsung PNG dengan penghematan ukuran file ~25-35% pada sebagian besar konten. Dukungan browser bersifat universal sejak Safari 14 (2020). Jika audiens Anda hanya-browser (tidak berat email), satu file WebP lossless menggantikan PNG tanpa perbedaan visual. AVIF lossless mengkompresi lebih lanjut tetapi memiliki waktu encoding yang lebih lambat dan hanya ditambahkan ke Safari di 16 (2022).

Untuk foto, AVIF pada kualitas 50-60 biasanya cocok dengan JPG kualitas 85 pada setengah ukuran file. Trade-off-nya adalah waktu encoding (AVIF 10-30× lebih lambat daripada JPG untuk encode) dan dukungan dekoding hardware pada perangkat lama.

Mengkonversi antar format

Gunakan alat kompres gambar kami untuk re-encoding JPG dengan kualitas yang disetel AI. Untuk konversi format ke arah lain, PNG ke SVG melacak logo PNG menjadi vektor; SVG ke PNG meraster vektor pada ukuran piksel eksplisit. Semua konversi berjalan di browser - tidak ada yang diunggah.

Alat terkait

• Kompres Gambar - kurangi ukuran file JPG/PNG dengan penyetelan kualitas AI.
• Pemeriksa Level Kompresi JPEG - inspeksi kualitas tersimpan dari setiap JPG.
• Ubah Ukuran Gambar - atur dimensi piksel persis dengan interpolasi bicubic.
• Pengoptimal Gambar Insights - audit gambar menghadap PageSpeed.

← Kembali ke Alat Gambar