PNG vs JPG vs WebP — format gambar apa yang sebaiknya saya gunakan?
Hampir setiap gambar di web menggunakan salah satu dari tiga format ini, dan masing-masing mengorbankan hal yang berbeda untuk mencapainya. JPG mengompresi foto secara agresif dengan membuang detail yang kemungkinan besar tidak akan disadari oleh mata Anda, PNG mempertahankan setiap piksel persis seperti aslinya dan menambahkan transparansi, sementara WebP adalah format Google yang lebih baru yang mencoba melakukan kedua fungsi tersebut — lossy dan lossless, dengan transparansi — dalam berkas yang lebih kecil dibanding yang biasanya dihasilkan salah satu dari kedua format lama tersebut. Memilih format yang salah jarang berakibat fatal, tetapi tetap berarti waktu muat halaman yang membengkak atau gambar yang tampak buram dan berblok terlihat jelas. Panduan ini menguraikan apa yang sebenarnya dilakukan masing-masing format di baliknya, di mana posisi HEIC (format tempat iPhone menyimpan foto) dalam gambaran ini, dan cara mengonversi atau mengompres salah satu dari format-format ini tanpa mengunggah berkas ke mana pun.
Apa itu JPG dan kapan sebaiknya digunakan?
JPG (juga ditulis JPEG) menggunakan kompresi lossy: gambar dianalisis dalam blok-blok, detail halus dan variasi warna yang sulit disadari mata manusia dibuang, lalu direkonstruksi menjadi perkiraan (approximation) saat di-decode. Kompromi inilah yang membuat JPG berukuran kecil — sebuah foto yang tanpa kompresi bisa mencapai beberapa megabyte sering kali terkompresi menjadi hanya beberapa ratus kilobyte pada pengaturan kualitas yang tidak bisa dibedakan kebanyakan orang dari aslinya. JPG tidak memiliki kanal transparansi, sehingga selalu dirender dengan latar belakang buram (opaque), dan tidak cocok untuk tangkapan layar, line art, atau teks, di mana efek blur halus di sekitar tepi tajam akan terlihat jelas. Gunakan JPG untuk foto dan gambar sejenis foto — foto produk, potret, lanskap — di mana ukuran berkas penting dan latar belakang memang diharapkan ada.
Apa itu PNG dan kapan sebaiknya digunakan?
PNG menggunakan kompresi lossless: setiap piksel yang Anda simpan adalah persis piksel yang sama saat dibuka kembali, tanpa perkiraan apa pun. Hal ini menjadikan PNG pilihan yang tepat untuk tangkapan layar, mockup UI, logo, diagram, dan gambar apa pun yang memuat teks tajam atau tepi keras, di mana artefak lossy akan langsung terlihat sebagai blur atau noise berblok di sekitar tepinya. PNG juga mendukung kanal alfa (transparansi) secara penuh, sehingga logo atau ikon bisa memiliki latar belakang yang benar-benar tembus pandang, bukan kotak putih atau berwarna di sekelilingnya. Konsekuensinya ada pada ukuran: karena PNG tidak bisa membuang detail, foto yang disimpan sebagai PNG biasanya berukuran beberapa kali lebih besar dibanding foto yang sama yang disimpan sebagai JPG, tanpa peningkatan kualitas yang terlihat pada subjek fotografis.
Apa itu WebP dan apa bedanya dengan JPG dan PNG?
WebP adalah format yang lebih baru yang dirancang untuk menggantikan kedua format lama sekaligus. Format ini mendukung kompresi lossy maupun lossless dalam satu format berkas yang sama, ditambah kanal transparansi penuh seperti PNG — sehingga satu format saja bisa menangani foto terkompresi, tangkapan layar lossless, dan logo transparan. Dalam praktiknya, berkas WebP biasanya berukuran 25-35% lebih kecil dibanding JPG dengan kualitas setara, dan WebP lossless biasanya juga lebih kecil dibanding gambar yang sama yang disimpan sebagai PNG. Dukungan browser sudah hampir universal sejak awal 2020-an (setiap browser besar merendernya secara native), yang menghilangkan keberatan historis utama untuk menggunakannya. Ganjalan yang tersisa adalah kompatibilitas di luar browser: beberapa editor gambar lama, plugin CMS lawas, dan alur kerja percetakan atau desain masih belum bisa membuka WebP secara langsung, sehingga ada baiknya memeriksa toolchain spesifik Anda sebelum menstandarkan penggunaannya di semua tempat.
Di mana posisi HEIC, dan haruskah Anda mengonversinya?
HEIC adalah format yang digunakan iPhone secara default untuk foto sejak iOS 11 — formatnya mengompresi lebih efisien dibanding JPG pada kualitas yang serupa, itulah sebabnya ukurannya lebih kecil di ponsel Anda. Masalahnya ada pada kompatibilitas, bukan kualitas: banyak perangkat lunak Windows, aplikasi Android lama, formulir web, dan klien email yang sama sekali tidak bisa membuka berkas .heic atau menanganinya dengan canggung. Jika Anda membagikan foto ke tempat yang mungkin tidak mendukung HEIC — mengunggah ke sebuah situs web, mengirim email ke seseorang dengan perangkat yang tidak diketahui, mengunggah ke perangkat lunak lama — konversikan ke JPG terlebih dahulu untuk kompatibilitas paling luas, atau ke PNG hanya jika Anda secara spesifik membutuhkan kualitas lossless atau transparansi (jarang terjadi untuk foto kamera biasa). Konverter HEIC ke JPG milik LocalMedia menangani konversi ini sepenuhnya di browser Anda, sehingga foto dibaca dari perangkat Anda, dikonversi, dan disimpan kembali tanpa diunggah ke mana pun.
Format mana yang sebaiknya benar-benar Anda pilih, berdasarkan kebutuhan?
Keputusannya biasanya bergantung pada apa isi gambar tersebut dan ke mana gambar itu akan digunakan. Untuk foto atau gambar mirip foto yang ditujukan untuk web, gunakan WebP jika platform Anda menerimanya, atau JPG jika tidak. Untuk tangkapan layar, dokumen hasil pindaian, diagram, atau apa pun yang mengandung teks, gunakan PNG (atau WebP lossless) agar tepi-tepinya tetap tajam. Untuk logo, ikon, atau grafik yang membutuhkan latar belakang transparan, gunakan PNG atau WebP — jangan pernah JPG, karena sama sekali tidak bisa merepresentasikan transparansi. Untuk kompatibilitas maksimum dengan perangkat lunak lama, klien email, atau alur kerja percetakan, JPG dan PNG tetap menjadi pilihan universal paling aman, karena dukungan WebP di luar browser modern masih belum konsisten.
Mengapa menyimpan ulang JPG berkali-kali membuatnya semakin buruk?
Karena kompresi JPG bersifat lossy, setiap kali Anda membuka sebuah JPG, mengeditnya, dan menyimpannya kembali sebagai JPG, format ini menganalisis ulang dan membuang lagi detail di atas apa yang sudah dibuang pada kali pertama. Edit-dan-simpan-ulang beberapa kali, dan kehilangan yang terakumulasi akan terlihat sebagai blur halus, color banding, atau artefak berblok di sekitar tepi — masalah yang sering disebut generation loss. Hal ini tidak terjadi pada PNG, karena kompresi lossless tidak pernah membuang detail berapa kali pun Anda menyimpannya ulang. Jika Anda perlu mengedit sebuah foto berkali-kali, simpan salinan master PNG atau lossless lainnya selama proses pengeditan dan hanya ekspor ke JPG sekali saja, di akhir, untuk pengiriman final.
Bagaimana cara mengonversi atau mengompres gambar tanpa mengunggahnya?
Mengonversi antara JPG, PNG, WebP, dan HEIC, atau mengecilkan berkas yang terlalu besar, sama sekali tidak memerlukan pengiriman gambar ke server — browser bisa men-decode dan meng-encode ulang sebagian besar format gambar umum dengan sendirinya. Konverter format gambar milik LocalMedia beralih antara JPG, PNG, dan WebP langsung di tab browser Anda, dan kompresor gambar mengurangi ukuran berkas dengan menyesuaikan kualitas atau dimensi, keduanya tanpa berkas pernah meninggalkan perangkat Anda. Anda bisa memastikannya sendiri: buka DevTools browser Anda (F12), masuk ke tab Network, dan amati apakah ada permintaan unggahan selagi Anda mengonversi atau mengompres sebuah berkas — alat yang benar-benar lokal tidak akan mengirim apa pun.
Alat terkait
FAQ
- Lebih bagus mana, PNG atau JPG?
- Tidak ada yang secara universal lebih bagus — keduanya dirancang untuk konten yang berbeda. Kompresi lossy pada JPG membuatnya jauh lebih kecil untuk foto, sementara kompresi lossless pada PNG menjaga tangkapan layar, teks, dan grafik bebas dari blur serta menambahkan dukungan transparansi yang sama sekali tidak dimiliki JPG. Gunakan JPG untuk foto, PNG untuk apa pun yang memiliki tepi tajam, teks, atau latar belakang transparan.
- Apakah WebP lebih bagus dari JPG?
- Untuk ukuran berkas dan kualitas, secara umum ya: WebP biasanya menghasilkan berkas 25-35% lebih kecil dibanding JPG dengan kualitas setara, dan juga mendukung transparansi serta kompresi lossless, yang sama sekali tidak bisa dilakukan JPG. Satu-satunya alasan untuk tetap memilih JPG dibanding WebP adalah kompatibilitas dengan perangkat lunak lama atau alur kerja yang tidak bisa membuka berkas WebP.
- Apakah WebP mendukung transparansi?
- Ya. WebP memiliki kanal transparansi alfa penuh baik dalam mode lossy maupun lossless-nya, sehingga bisa menggantikan PNG untuk logo dan ikon transparan sambil biasanya menghasilkan berkas yang lebih kecil.
- Sebaiknya HEIC dikonversi ke JPG atau PNG?
- Konversikan ke JPG dalam hampir semua kasus — ukurannya lebih kecil dan kompatibel secara universal, sesuai dengan kebutuhan foto kamera pada umumnya. Konversikan ke PNG hanya jika Anda secara spesifik membutuhkan kualitas lossless atau latar belakang transparan, yang jarang diperlukan untuk foto biasa.
- Format mana yang menghasilkan berkas terkecil?
- Untuk foto, WebP lossy biasanya paling kecil, diikuti oleh JPG, dengan PNG jauh lebih besar. Untuk tangkapan layar, teks, atau line art, WebP lossless biasanya paling kecil, diikuti oleh PNG, karena kompresi lossy pada JPG tidak cocok untuk tepi tajam berapa pun ukuran berkasnya.
- Bisakah saya mengonversi antara PNG, JPG, dan WebP tanpa kehilangan kualitas?
- Mengonversi dari format lossless (PNG) ke pengaturan lossless lainnya mempertahankan kualitas persis sama. Mengonversi ke atau di antara format lossy (JPG, WebP lossy) selalu mengompresi ulang gambar, sehingga sejumlah kualitas hilang pada setiap konversi — simpan salinan master lossless jika Anda memperkirakan akan mengonversi atau mengedit sebuah gambar lebih dari sekali.