JPG vs PNG untuk web - kapan menggunakan setiap format gambar
freetoolonline.com Editorial TeamJPG cocok untuk foto - kompresi lossy membuatnya 5-10x lebih kecil dari PNG tanpa kehilangan kualitas yang terlihat. PNG cocok untuk tangkapan layar, logo, dan gambar dengan transparansi - lossless sehingga tepi teks tetap tajam. WebP memberikan kedua format dengan ukuran 25-35% lebih kecil.
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
| Jenis gambar | JPG (kualitas 82) | PNG | WebP (lossy q=82) | AVIF (q=50) |
|---|---|---|---|---|
| Foto 1920×1080 | ~320 KB | ~3,2 MB | ~220 KB | ~160 KB |
| Screenshot 1920×1080 (UI) | ~180 KB (halo terlihat) | ~130 KB | ~90 KB | ~60 KB |
| Logo sederhana 512×512 (warna datar) | ~40 KB | ~18 KB | ~10 KB | ~7 KB |
| Ikon 64×64 dengan transparansi | Tidak didukung | ~2 KB | ~1 KB | ~0,8 KB |
Aturan keputusan yang berlaku di 2026
Aturan keputusan yang berlaku di 2026 di JPG vs PNG untuk web: gunakan JPG (atau WebP) untuk foto; gunakan PNG saat Anda butuh tepi UI tajam atau transparansi yang format foto masih buruk menanganinya.
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
Memilih kualitas: target konkret untuk JPG vs PNG untuk web - mulai JPG sekitar kualitas 75-85 untuk hero, lalu bandingkan byte dan artefak sebelum mengirim file lebih berat.
Rantai fallback <picture>
Rantai fallback picture di JPG vs PNG untuk web menyajikan WebP atau AVIF dulu, lalu JPG atau PNG, agar browser lama tetap mendapat gambar terbaca tanpa slot kosong.
<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
Mengkonversi antar format untuk JPG vs PNG untuk web: buka Image Converter, pilih target, dan cek ulang transparansi - meratakan logo PNG ke JPG bisa mengecat kotak putih yang tidak Anda inginkan.
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.
- Format Foto iPhone Dijelaskan - HEIC, JPG, PNG, RAW - kapan iPhone menggunakan setiap format dan cara mengonversi untuk penerbitan web.
- Cara Mengonversi 100 Foto HEIC ke JPG - alur konversi batch untuk perpustakaan foto iPhone.