WebP vs PNG vs JPG: Format Mana untuk Gambar Anda?

Cara setiap format memampatkan

JPG: lossy, dioptimalkan untuk foto

JPG membagi gambar menjadi blok 8×8, mengubah masing-masing menjadi komponen frekuensi, dan membuang detail frekuensi tinggi yang paling kecil kemungkinan diperhatikan mata. Penggeser kualitas mengendalikan seberapa agresif pembuangannya. Ini sangat efektif pada foto, yang detailnya halus dan tidak teratur serta kesalahan kecil tersembunyi dalam noise.

Format ini buruk pada apa pun dengan tepian tegas. Garis hitam pada putih adalah informasi frekuensi tinggi murni, tepat hal yang dibuang format, sehingga muncul halo berdering khas di sekitar teks dan garis tepi. JPG juga sama sekali tidak memiliki kanal alfa — bukan kanal lemah, melainkan tidak ada. Simpan gambar transparan sebagai JPG dan transparansinya diganti warna solid, biasanya hitam atau putih, secara permanen.

PNG: lossless, dioptimalkan untuk grafis datar

PNG tidak pernah membuang data piksel. Memprediksi setiap piksel dari tetangganya, menyimpan perbedaan kecil, lalu menjalankan hasil melalui DEFLATE. Rangkaian panjang piksel identik atau hampir identik memampatkan hingga hampir tidak ada, sehingga grafis warna datar, tangkapan layar UI, gambar garis, dan seni piksel sangat mudah diperkecil.

Format memiliki dua mode yang perlu dibedakan. PNG truecolor menyimpan warna 24-bit penuh ditambah alfa opsional. PNG Berpalet (PNG-8) menyimpan indeks ke tabel yang berisi hingga 256 warna, sehingga setiap piksel hanya memerlukan satu byte, bukan empat. Untuk grafis datar yang benar-benar memakai sedikit warna, mode palet menghasilkan berkas jauh lebih kecil tanpa kehilangan kualitas sama sekali. Kebanyakan orang tidak pernah memakainya, padahal inilah alasan PNG terkadang mengalahkan WebP secara mutlak.

WebP: keduanya, dalam satu kontainer

WebP memiliki dua mode terpisah dengan ekstensi file yang sama. WebP lossy menggunakan prediksi blok yang dipinjam dari pengodean video — biasanya menghasilkan file 20–30% lebih kecil daripada JPG pada kualitas yang terasa setara. WebP lossless menggunakan skema berbeda dengan prediksi lebih canggih daripada PNG dan biasanya menghasilkan ukuran 20–30% di bawah PNG truecolor.

Yang penting, kedua mode mendukung alfa. Itulah keunggulan sebenarnya WebP: sebelumnya, gambar transparan harus berupa PNG, yang berarti lossless, yang berarti besar. WebP lossy dengan alfa memungkinkan foto potongan dipampatkan seperti foto biasa.

Perbandingan sekilas

Memilih berdasarkan isi gambar

Foto, tanpa transparansi

WebP lossy kualitas 80 adalah jawaban terkecil yang masuk akal, dengan JPG kualitas 80 sebagai cadangan kompatibel. Keduanya baik; WebP biasanya seperempat lebih kecil. Dengan negosiasi konten, <picture> elemen yang menyajikan WebP dengan cadangan JPG memberi keduanya, walaupun pada 2026 cadangan sebagian besar hanya berjaga-jaga.

Grafis datar, logo, seni piksel, tangkapan layar UI

PNG, dan coba mode palet. Inilah kegagalan terbesar aturan "WebP untuk semua gambar". Logo dua belas warna dalam PNG berpalet dapat hanya beberapa kilobyte; logo sama sebagai WebP lossy kualitas 80 sering lebih besar, karena pengodean lossy memakai bit untuk menjelaskan detail tingkat blok yang dipaletkan tanpa biaya tambahan — serta menambah artefak pada wilayah datar sempurna. WebP lossless bersaing dan terkadang menang, tetapi selisih cukup kecil sehingga layak mengekspor keduanya dan membandingkan.

Sprite dan apa pun yang memerlukan alfa

PNG. Format ini dibaca setiap engine game, editor, dan alur aset tanpa masalah, lossless sehingga edit berulang tidak menumpuk kerusakan, dan sprite cukup kecil sehingga ukuran berkas jarang menjadi batasan. WebP lossless merupakan format pengiriman masuk akal jika engine mendukungnya; tetap simpan PNG sebagai salinan kerja. Jangan pernah JPG — tanpa alfa, sprite yang dipotong cermat akan memiliki kotak putih di sekelilingnya.

Foto dengan transparansi

Inilah kekuatan utama WebP lossy dan kemampuan yang benar-benar kurang sebelumnya. Foto produk potongan transparan sebagai PNG mungkin 800KB; WebP lossy beralfa kualitas 80 dapat di bawah 100KB tanpa perbedaan terlihat. PNG satu-satunya cadangan jika diperlukan dan beberapa kali lebih besar.

Dua contoh yang perlu diketahui

Angka konkret membuat komprominya lebih mudah dipahami. Dua kasus dari proses optimasi nyata:

• Kartu sosial PNG 606KB yang dikodekan ulang menjadi JPG 81KB. Kartu berupa latar foto dengan teks, diekspor sebagai PNG karena bawaan kebanyakan alat desain. PNG tidak cocok untuk foto sehingga berkas sangat besar; pada JPG kualitas 82, perbedaan terlihat tidak ada pada ukuran yang dilihat orang. Pengurangan 87% hanya dengan mengganti satu menu.
• Gambar latar halaman berkurang sekitar 57% setelah konversi PNG ke WebP. Gambar besar, lembut, penuh gradasi — konten halus tanpa tepi tegas atau transparansi, paling cocok bagi lossy. Hasil visual sama, kurang dari setengah byte.

Kedua kemenangan diperoleh dengan mencocokkan format terhadap konten, bukan menerapkan aturan umum. Jika tes sama dilakukan pada kumpulan ikon warna datar, PNG akan menang keduanya.

Pengecualian gambar sosial

Satu tempat untuk sengaja tidak memakai WebP: gambar Open Graph dan kartu Twitter. URL itu diambil oleh crawler dan bot pratinjau tautan — Slack, Discord, iMessage, WhatsApp, LinkedIn, pembaca RSS, peramban dalam aplikasi, serta banyak alat internal — bukan peramban modern yang dicakup statistik dukungan WebP.

Dukungan di kelompok itu jauh lebih buruk, dan kegagalannya bermasalah secara khusus: bukan kesalahan terlihat, tetapi tautan tampil tanpa gambar sama sekali, baru diketahui berminggu-minggu kemudian ketika disebut orang. Biaya memakai JPG mungkin 30% byte tambahan pada satu berkas yang diambil infrastruktur, bukan pengguna berkoneksi berkuota.

Kehati-hatian serupa berlaku untuk email. Klien email memiliki dunia kompatibilitas sendiri dan beberapa masih tidak mendukung WebP. Lampiran dan gambar untuk email sebaiknya JPG atau PNG.

Prosedur pengambilan keputusan

1. Apakah diperlukan transparansi? Jika tidak, lanjutkan ke langkah 3. Jika ya, JPG sama sekali tidak dapat dipilih.
2. Apakah gambar transparan berupa foto? Konten foto dengan alfa → WebP lossy. Karya datar atau sprite dengan alfa → PNG.
3. Apakah ini foto? Ya → WebP lossy, atau JPG jika kompatibilitas penting. Tidak → lanjutkan.
4. Warna datar dan tepian tegas? Ekspor PNG berpalet dan WebP lossless, bandingkan kedua berkas, lalu kirim yang lebih kecil. Jangan berasumsi.
5. Apakah ini kartu sosial, gambar email, atau aset untuk alur yang tidak diketahui? Abaikan semua saran di atas dan gunakan JPG atau PNG.

Langkah 4 sering dilewati. Mengekspor dua berkas dan membandingkan byte memerlukan lima belas detik dan lebih andal daripada patokan apa pun karena jawaban memang bergantung pada gambar tertentu.

Alat kami Pemotong Lembar Sprite mengekspor ke PNG, JPG, atau WebP dengan kontrol kualitas untuk format lossy, sehingga Anda dapat memotong sheet sekali dan mencoba dua format tanpa meninggalkan halaman. Untuk sprite, PNG tetap menjadi default aman — format ekspor jauh lebih penting untuk aset web akhir daripada bingkai perantara.

Pertanyaan yang sering diajukan