PNG vs JPEG vs WebP: format gambar mana yang sebaiknya Anda pakai?

Sebagian besar keputusan format gambar bermuara pada dua pertanyaan. Apakah gambar perlu area transparan? Dan apakah sedikit penurunan kualitas akan terlihat? Jawab dua pertanyaan itu, dan formatnya hampir pasti terpilih dengan sendirinya. Pertanyaan ketiga, ke mana file itu akan dikirim, menentukan apakah format yang lebih baru boleh dipakai sama sekali, karena marketplace dan banyak aplikasi masih hanya menerima JPEG dan PNG.

Panduan ini membandingkan empat format yang paling sering Anda temui untuk foto dan grafis di web: JPEG, PNG, WebP dan AVIF. Di bagian akhir ada pilihan cepat untuk kebutuhan yang paling umum: logo, foto produk, foto biasa, dan potongan gambar dengan background transparan.

Tabel perbandingan

Detail format berasal dari panduan jenis file gambar MDN. Baris dukungan kini tidak terlalu penting untuk browser: semua browser utama versi terbaru menampilkan WebP, dan AVIF didukung di versi terbaru semuanya. Yang masih jadi masalah adalah di luar browser, seperti formulir unggah, marketplace, aplikasi email, dan software desktop lama.

Lossy vs lossless, dengan bahasa sederhana

Kompresi lossless memperkecil file tanpa mengubah satu piksel pun. Buka PNG dan Anda mendapatkan persis apa yang disimpan. Karena itu, format ini ideal untuk apa pun yang punya tepi tegas dan warna rata, seperti teks, logo, gambar garis, tampilan antarmuka dan screenshot, di mana sedikit saja blur atau pinggiran warna mudah terlihat.

Kompresi lossy membuang detail yang kemungkinan tidak disadari mata. Foto cukup tahan terhadap hal ini karena penuh noise dan gradasi warna. JPEG bekerja dengan cara ini, dan dengan pengaturan kualitas yang wajar, ukuran foto bisa jauh lebih kecil dari versi PNG-nya tanpa perbedaan yang terlihat.

Ada dua aturan praktis:

• Setiap kali disimpan ulang secara lossy, kualitas turun sedikit lagi. Simpan master lossless (file asli kamera, PNG, atau file asli editor Anda) dan ekspor salinan lossy darinya, jangan mengedit dan menyimpan ulang JPEG yang sama.
• Kompresi lossy paling buruk di tepi yang tajam. Logo yang disimpan sebagai JPEG mendapat "mosquito noise" yang belepotan di sekitar huruf, dan teks di screenshot jadi buram.

Transparansi: fitur penentu untuk potongan gambar

JPEG tidak punya alpha channel. Tidak ada cara untuk menyimpan "piksel ini tembus pandang" di JPEG, jadi saat Anda hapus background lalu menyimpannya sebagai JPEG, area kosong diisi warna solid, biasanya putih atau hitam. Jika Anda ingin potongan gambar bisa ditaruh di atas konten lain, Anda perlu PNG, WebP atau AVIF.

PNG menyimpan alpha channel penuh: setiap piksel bisa berada di mana saja dari tidak tembus pandang sama sekali sampai transparan penuh, dan inilah yang membuat tepi halus seperti rambut, bulu dan bayangan tetap terlihat alami. PNG juga punya mode yang lebih sederhana, di mana satu warna palet ditandai transparan. Mode ini cukup untuk grafis datar, tetapi menghasilkan tepi bergerigi pada foto. Jika ingin detailnya, baca apa itu alpha channel.

WebP mendukung transparansi di mode lossless maupun lossy. Dokumentasi WebP dari Google menyebutkan bahwa WebP lossless menambahkan transparansi dengan sekitar 22% byte lebih banyak, dan WebP lossy dengan transparansi biasanya sekitar 3 kali lebih kecil dari PNG yang setara. Itu menjadikan WebP lossy cara paling efisien untuk menampilkan foto produk transparan di website Anda sendiri.

Ukuran file

Untuk gambar yang sama, urutan kasarnya dari yang terbesar ke terkecil adalah PNG, JPEG, WebP, AVIF, dengan satu catatan penting: PNG hanya "besar" untuk foto. Untuk grafis datar dengan sedikit warna, PNG sering lebih kecil dari JPEG dan selalu lebih tajam.

Angka resmi Google untuk WebP bisa jadi patokan yang berguna:

• File WebP lossless 26% lebih kecil dari PNG.
• File WebP lossy 25 sampai 34% lebih kecil dari JPEG yang sebanding pada skor kualitas SSIM yang sama.

Saran MDN untuk gambar raster di web adalah mengutamakan WebP atau AVIF, yang umumnya lebih efisien kompresinya daripada PNG, JPEG dan GIF. AVIF juga mendukung warna 10 dan 12 bit, yang membantu untuk gradasi yang halus. Kelemahannya ada pada dukungan di luar browser: banyak aplikasi dan formulir unggah masih menolaknya.

Ukuran file paling berpengaruh saat Anda menyajikan banyak gambar ke banyak pengunjung. Untuk satu kali unggah ke marketplace yang toh akan mengompres ulang semuanya, format yang diterima marketplace lebih penting daripada byte yang Anda hemat.

Di mana setiap format diterima

Browser adalah bagian yang mudah. Marketplace dan aplikasi adalah tempat format ditolak. Berikut format yang diterima menurut dokumentasi resmi setiap platform, dicek pada Oktober 2026:

Ada dua hal yang menonjol. Pertama, WebP dan AVIF tidak diterima oleh Amazon, Walmart atau katalog Meta, jadi gunakan JPEG atau PNG untuk unggahan ke marketplace. Kedua, Etsy menyatakan PNG transparan tidak didukung dan area transparan bisa tampil hitam, jadi ratakan potongan gambar ke sebuah warna sebelum mengunggah ke sana. Untuk ukuran piksel yang tepat per platform, lihat referensi ukuran foto produk.

Format mana untuk kebutuhan umum

Logo

Gunakan SVG jika Anda punya file vektor aslinya; MDN merekomendasikannya untuk logo dan ikon. Jika Anda butuh file raster, gunakan PNG dengan background transparan, atau WebP lossless di website Anda sendiri. Jangan pernah JPEG: format ini menambah noise di sekitar tepi dan tidak bisa transparan.

Foto produk

Untuk gambar utama di marketplace, gunakan JPEG dengan background putih bersih. Blog penjual Amazon menyebut JPEG sebagai format yang diutamakan, dan semua marketplace di tabel di atas menerimanya. Ekspor dengan pengaturan kualitas tinggi (sekitar 85 sampai 92 di kebanyakan alat) dari master lossless.

Di toko online Anda sendiri, unggah JPEG atau PNG berkualitas tinggi dan biarkan platform yang mengonversi. Shopify, misalnya, menyebutkan bahwa layanan gambarnya otomatis menyajikan format terbaik yang didukung browser setiap pengunjung.

Foto biasa

JPEG adalah pilihan default yang aman untuk dibagikan dan diunggah. Di website yang Anda kelola, WebP atau AVIF dengan cadangan JPEG memberikan tampilan yang sama dengan byte lebih sedikit. Jika ponsel Anda menyimpan file HEIC, ubah ke JPEG sebelum mengunggah ke tempat yang tidak mencantumkan HEIC.

Potongan gambar dan gambar transparan

Gunakan PNG jika file harus bisa dipakai di mana saja: di slide, dokumen, aplikasi desain dan kebanyakan formulir unggah. Gunakan WebP jika Anda menaruh gambar di halaman web Anda sendiri dan ingin ukurannya kecil. Gunakan JPEG hanya jika Anda memang sengaja mengisi background dengan warna solid, misalnya putih untuk marketplace.

Screenshot dan diagram

PNG, atau WebP lossless. Format lossy membuat teks buram.

Menyajikan format modern dengan cadangan

Jika Anda mengelola website sendiri, Anda tidak harus memilih satu format saja. Elemen HTML picture membiarkan browser memilih format pertama yang dipahaminya:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Browser yang mendukung AVIF mengambil source pertama, yang lain beralih ke WebP, dan browser lama memakai PNG. Banyak platform hosting dan CDN gambar melakukan konversi ini untuk Anda berdasarkan header Accept dari browser, yang sering kali lebih praktis daripada membuat setiap format sendiri.

Mengonversi antarformat tanpa kejutan

• PNG atau WebP ke JPEG: area transparan diratakan. Pilih sendiri warna isinya (biasanya putih), jangan biarkan alat yang memilih, karena beberapa alat memakai hitam sebagai default.
• JPEG ke PNG: file jadi lebih besar tetapi tidak lebih bagus. Kualitas yang hilang di JPEG tidak kembali.
• Format apa pun ke WebP atau AVIF: pastikan transparansi tetap ada dan warnanya terlihat benar; ubah dulu ke profil warna sRGB jika gambar akan dilihat di web.
• Menyimpan ulang JPEG: setiap penyimpanan dengan kualitas lebih rendah menumpuk penurunannya. Ekspor sekali saja dari master.

Cara lebih cepat untuk potongan gambar

Jika Anda menghapus background secara massal, removebackground.dev mengekspor potongan gambar sebagai PNG atau WebP transparan, atau sebagai JPG dengan warna solid apa pun, sehingga Anda bisa membuat JPEG putih untuk marketplace dan PNG transparan untuk website dari satu unggahan yang sama.