1. Beranda
  2. Blog
  3. JPG vs PNG vs WEBP: Format Mana yang Paling Tepat?
Format Gambar12 menit baca

JPG vs PNG vs WEBP: Format Mana yang Paling Tepat?

Pilih JPG untuk foto, PNG untuk teks dan latar transparan, WEBP untuk web. Pahami kompresi, transparansi, ukuran file, dan dampaknya pada hasil gabungan.

JPG vs PNG vs WEBP: Format Mana yang Paling Tepat?
Di artikel ini
  1. Tabel Ringkas: Format Mana untuk Kebutuhan Apa
  2. Empat Hal yang Sering Tertukar: Kompresi, Lossy, Ukuran File, dan Kompatibilitas
  3. JPG dan JPEG: Satu Format, Dua Nama
  4. PNG: Lossless dan Mendukung Transparansi
  5. WEBP: Bisa Lossy, Bisa Lossless
  6. Lossless Tidak Selalu Berarti Kualitas Tertinggi
  7. Format Terbaik untuk Foto, Tangkapan Layar, dan Foto Produk
  8. Bagaimana Format Memengaruhi Hasil Gabungan
  9. Contoh Pilihan Format untuk Hasil Gabungan
  10. Pilih Format Berdasarkan Penerima, Bukan Kebiasaan
  11. Pertanyaan Umum

Pilih JPG untuk foto yang akan dikirim, dicetak, atau dibuka di banyak perangkat. Pilih PNG untuk tangkapan layar berisi teks, grafik, logo, dan gambar yang harus tetap transparan. Pilih WEBP untuk gambar di situs web, jika semua pihak yang menerima file bisa membukanya. Ketiga format bisa dipakai sebagai bahan maupun hasil gabungan, tetapi masing-masing berbeda dalam cara kompresi, dukungan transparansi, ukuran file, dan kompatibilitas.

Tabel Ringkas: Format Mana untuk Kebutuhan Apa

Tabel ini merangkum lima format hasil yang tersedia di Gabung JPG. Kolom kompresi menjelaskan cara format menyimpan data, bukan jaminan kualitas.

Format Kompresi Transparansi Paling Cocok Untuk
JPG/JPEG Lossy (kualitas 50-100 di Gabung JPG, bawaan 92) Tidak ada Foto kamera atau HP, kolase foto, foto produk berlatar penuh
PNG Lossless Ya, termasuk semi-transparan Tangkapan layar berisi teks, grafik, logo, hasil dengan latar transparan
WEBP Lossy atau lossless (hasil Gabung JPG: lossy di kualitas 50-99) Ya Gambar untuk situs web, file lebih ringan dengan transparansi
BMP Tanpa kompresi (hasil Gabung JPG: 24-bit) Tidak ada Perangkat lunak lama yang hanya menerima BMP
PDF Gambar di dalamnya disimpan sebagai JPEG (lossy) Tidak ada Formulir atau portal yang meminta dokumen PDF satu halaman

Empat Hal yang Sering Tertukar: Kompresi, Lossy, Ukuran File, dan Kompatibilitas

Banyak perbandingan format mencampur empat hal berbeda. Memisahkannya membuat pilihan lebih mudah.

  1. Kompresi adalah cara format memadatkan data gambar agar file lebih kecil. Hampir semua format modern memakai kompresi, termasuk PNG.
  2. Lossy atau lossless menjelaskan apakah kompresi membuang data. Kompresi lossy (membuang sebagian detail) menghasilkan file kecil, tetapi piksel hasil dekode tidak persis sama dengan piksel yang disimpan. Kompresi lossless (tanpa membuang data) mengembalikan setiap piksel persis seperti saat disimpan.
  3. Ukuran file bergantung pada format, setelan kualitas, jumlah piksel, dan isi gambar. Foto penuh tekstur seperti dedaunan menghasilkan file lebih besar daripada tangkapan layar berlatar putih polos, meskipun ukuran pikselnya sama.
  4. Kompatibilitas adalah apakah aplikasi, perangkat, atau formulir unggah penerima bisa membuka format tersebut. Format dengan file terkecil tidak berguna, jika penerima tidak bisa membukanya.

Format yang unggul di satu poin bisa kalah di poin lain. PNG unggul dalam ketepatan piksel, tetapi file fotonya besar. WEBP unggul dalam efisiensi, tetapi tidak semua aplikasi lama mendukungnya.

JPG dan JPEG: Satu Format, Dua Nama

JPG dan JPEG adalah format yang sama. Nama JPEG berasal dari Joint Photographic Experts Group, kelompok yang menyusun standarnya. Ekstensi .jpg dan .jpeg sama-sama umum dipakai. Sistem operasi lama membatasi ekstensi file menjadi tiga huruf, sehingga .jpg lebih populer. Mengganti .jpeg menjadi .jpg tidak mengubah isi file.

JPG memakai kompresi lossy. Format ini membuang detail halus yang sulit dilihat mata, terutama pada perubahan warna yang kecil. Hasilnya, file foto menjadi jauh lebih ringan daripada versi tanpa kompresi.

Kelebihan JPG:

  • Hampir semua perangkat, galeri, aplikasi chat, printer, dan formulir unggah bisa membukanya.
  • File foto relatif kecil, sehingga cepat dikirim.
  • Setelan kualitas bisa dinaikkan atau diturunkan sesuai kebutuhan.

Keterbatasan JPG:

  • Tidak mendukung transparansi. Area transparan selalu diisi warna padat.
  • Tepi tajam seperti huruf kecil, garis tipis, dan ikon bisa memunculkan artefak kompresi, yaitu bintik atau bayangan halus di sekitar tepi.
  • Setiap kali disimpan ulang sebagai JPG, kompresi lossy berjalan lagi.

Di Gabung JPG, slider Kualitas di menu Lanjutan mengatur kompresi JPG dari 50 hingga 100, dengan nilai bawaan 92. Angka lebih tinggi menyimpan lebih banyak detail dan menghasilkan file lebih besar. Kualitas 100 tetap lossy, jadi JPG kualitas 100 tidak identik piksel demi piksel dengan sumbernya.

PNG: Lossless dan Mendukung Transparansi

PNG (Portable Network Graphics) memakai kompresi lossless. Setelah dibuka, setiap piksel sama persis dengan piksel yang disimpan. Format ini cocok untuk gambar dengan tepi tajam dan area warna rata, misalnya tangkapan layar aplikasi, tabel, grafik, logo, dan ilustrasi.

PNG mendukung kanal alfa (alpha channel), yaitu data tambahan per piksel yang menyimpan tingkat transparansi. Satu piksel bisa transparan penuh, buram penuh, atau setengah transparan. Karena itu PNG umum dipakai untuk logo tanpa latar dan foto produk yang latarnya sudah dihapus.

Keterbatasan PNG terlihat pada foto. Foto kamera berisi jutaan variasi warna halus, dan kompresi lossless tidak bisa memadatkannya seefisien JPG. File PNG sebuah foto biasanya jauh lebih besar daripada versi JPG-nya. Pada tangkapan layar berlatar polos, selisihnya sering lebih kecil karena area warna rata mudah dipadatkan tanpa kehilangan data.

WEBP: Bisa Lossy, Bisa Lossless

WEBP adalah format yang dikembangkan Google. WEBP punya dua mode:

  • WEBP lossy membuang sebagian detail seperti JPG, dengan setelan kualitas.
  • WEBP lossless menyimpan setiap piksel tanpa kehilangan data seperti PNG.

Kedua mode mendukung transparansi, dan WEBP juga mendukung animasi. Jadi WEBP tidak bisa disebut lossless begitu saja. Sebuah file WEBP bisa lossy atau lossless, tergantung cara file itu dibuat.

Dokumentasi WebP dari Google menyatakan bahwa gambar WebP lossless 26% lebih kecil daripada PNG, dan gambar WebP lossy 25-34% lebih kecil daripada gambar JPEG yang sebanding pada indeks kualitas SSIM (Structural Similarity Index, ukuran kemiripan struktur dua gambar) yang setara. Angka tersebut adalah temuan Google pada kumpulan gambar uji mereka. Selisih pada file Anda bisa lebih besar, lebih kecil, atau tidak terasa, tergantung isi gambar dan setelan kualitas.

Kompatibilitas adalah pertimbangan utama WEBP. Browser modern umumnya bisa membuka WEBP, tetapi sebagian aplikasi lama, perangkat lunak cetak, atau formulir unggah mungkin hanya menerima JPG dan PNG. Kirim JPG atau PNG, jika Anda tidak yakin penerima bisa membuka WEBP.

Lossless Tidak Selalu Berarti Kualitas Tertinggi

Lossless hanya menjamin satu hal: format tidak membuang data saat menyimpan. Lossless tidak menambah detail yang sudah hilang sebelumnya.

Ada 3 situasi ketika PNG tidak memperbaiki apa pun:

  1. Sumber sudah berupa JPG terkompresi. Menyimpan foto JPG sebagai PNG hanya mengunci artefak lama ke dalam file yang lebih besar.
  2. Sumber sudah buram atau beresolusi rendah. PNG menyimpan keburaman itu secara akurat, bukan menghilangkannya.
  3. Gambar diubah ukurannya sebelum disimpan. Di Gabung JPG, gambar disusun dan diubah skalanya di kanvas terlebih dahulu, lalu baru dienkode ke format pilihan. Pembesaran atau pengecilan tetap terjadi, apa pun formatnya.

Untuk foto, JPG kualitas tinggi sering terlihat sama dengan PNG pada ukuran tampilan normal, sementara file PNG jauh lebih besar. Pilih PNG untuk foto, jika Anda butuh salinan kerja yang akan diedit lagi atau dikonversi ulang nanti. Penjelasan lengkap tentang penyebab hasil buram ada di panduan hasil gabung foto buram atau pecah.

Format Terbaik untuk Foto, Tangkapan Layar, dan Foto Produk

Foto dari kamera atau HP

Pakai JPG untuk kolase foto liburan, dokumentasi acara, atau foto keluarga. Kualitas bawaan 92 sudah cocok untuk kebanyakan keperluan. Turunkan kualitas secara bertahap, jika file harus lebih ringan, lalu periksa hasilnya pada ukuran penuh sebelum mengirim.

Tangkapan layar berisi teks

Pakai PNG untuk gabungan tangkapan layar percakapan, bukti transaksi, tabel, atau langkah tutorial. Huruf kecil dan garis tipis tetap tegas karena tidak ada kompresi lossy. Pakai JPG kualitas tinggi, jika file PNG terlalu besar untuk saluran pengiriman Anda, lalu periksa apakah teks terkecil masih terbaca.

Foto produk

Pakai JPG untuk foto produk berlatar penuh, misalnya produk di atas meja atau latar putih hasil pemotretan. Pakai PNG atau WEBP, jika foto produk sudah dipotong tanpa latar dan transparansinya harus tetap ada di hasil akhir. Aturan format setiap marketplace bisa berbeda dan berubah, jadi periksa panduan penjual terbaru di platform Anda sebelum mengunggah.

Campuran foto dan tangkapan layar

Gabungan yang berisi foto sekaligus tangkapan layar membutuhkan kompromi. Pilih PNG, jika keterbacaan teks paling penting. Pilih JPG, jika ukuran file paling penting. Bandingkan angka Perkiraan ukuran di panel pratinjau Gabung JPG untuk kedua format sebelum mengunduh, karena angka itu dihitung dari gambar Anda sendiri.

Bagaimana Format Memengaruhi Hasil Gabungan

Format bekerja di dua titik: saat gambar dibaca (format masukan) dan saat hasil disimpan (format keluaran). Keduanya berpengaruh pada hasil akhir.

Format masukan yang diterima Gabung JPG

Saat Anda menggabungkan gambar menjadi satu di Gabung JPG, alat membaca JPG/JPEG, PNG (termasuk transparansi), WEBP, GIF, dan BMP. Format masukan boleh dicampur dalam satu penggabungan. Ada 3 catatan khusus:

  • GIF (Graphics Interchange Format): hanya bingkai pertama yang dipakai. Animasi tidak ikut ke hasil gabungan.
  • AVIF (AV1 Image File Format): bisa dibaca di browser yang mendukung AVIF.
  • HEIC (High Efficiency Image Container): tidak didukung di Chrome desktop. File HEIC ditolak dengan pesan “Tidak dapat membaca” diikuti nama file. Di iPhone, pemilih foto Safari biasanya memberikan salinan JPEG kepada situs web, sehingga foto HEIC umumnya tetap bisa dipakai. Ubah setelan kamera iPhone ke format Paling Kompatibel (Most Compatible) atau ekspor foto sebagai JPG, jika file HEIC tetap ditolak.

Data orientasi EXIF (Exchangeable Image File Format) dibaca saat impor, sehingga foto HP yang tersimpan miring tampil tegak di kanvas.

Format hasil yang tersedia

Menu Format berisi JPG, PNG, WEBP, PDF, dan BMP. Rinciannya:

  • JPG: lossy, mengikuti slider Kualitas 50-100.
  • PNG: lossless. Slider Kualitas dinonaktifkan karena tidak berlaku.
  • WEBP: hasil WEBP dari Gabung JPG mengikuti slider Kualitas. Pada kualitas 50 hingga 99, hasilnya lossy. Di Chrome, kualitas 100 menghasilkan WEBP lossless dengan ukuran file yang biasanya jauh lebih besar. Browser lain bisa berbeda. Transparansi tetap didukung. Opsi WEBP disembunyikan di browser yang tidak bisa menyimpan WEBP, misalnya Safari versi lama. Sisi terpanjang hasil WEBP maksimal 16.383 px.
  • PDF: satu halaman berisi gambar gabungan yang disimpan sebagai JPEG. Ukuran halaman mengikuti ukuran gambar pada 96 dpi (dots per inch). Untuk satu gambar per halaman, Anda butuh alat JPG ke PDF terpisah.
  • BMP: 24-bit tanpa kompresi dan tanpa transparansi. File BMP berukuran besar, jadi pakai hanya jika perangkat lunak tujuan memintanya.

Kapan transparansi hilang

Transparansi pada hasil gabungan hanya bertahan jika dua syarat terpenuhi: Warna latar di menu Lanjutan diatur ke Transparan, dan format hasil adalah PNG atau WEBP.

Transparansi hilang dalam situasi berikut:

  • Format hasil JPG, BMP, atau PDF. Ketiganya tidak menyimpan transparansi, sehingga area transparan diisi warna padat.
  • Warna latar tetap putih (setelan bawaan). Hasil PNG pun akan berisi area putih, bukan area transparan.
  • Bagian transparan dari sumber PNG yang disimpan sebagai JPG berubah menjadi warna latar, yaitu putih pada setelan bawaan.

Area kosong yang dimaksud termasuk jarak antar gambar, bingkai tepi, dan ruang di samping gambar yang lebih kecil saat memakai mode Ukuran asli.

Kompresi lossy yang berulang

Setiap hasil JPG dan WEBP dari Gabung JPG adalah enkode baru. Meskipun semua gambar masukan sudah JPG, hasil gabungan dikompres ulang secara lossy (kecuali WEBP kualitas 100 di Chrome, yang disimpan lossless). Pada kualitas tinggi, satu kali kompresi ulang biasanya sulit terlihat. Masalah muncul saat file yang sama dikompres berkali-kali: hasil gabungan digabung lagi, dikirim lewat aplikasi chat, diunduh, lalu digabung ulang. Artefak kecil dari tiap tahap bertumpuk.

Cara mencegahnya:

  1. Simpan foto asli dan selalu gabungkan ulang dari foto asli, bukan dari hasil gabungan sebelumnya.
  2. Simpan salinan kerja sebagai PNG, jika gambar masih akan diedit atau digabung lagi.
  3. Ekspor ke JPG atau WEBP satu kali di tahap terakhir.

Kompresi berulang hanya salah satu penyebab kualitas foto turun setelah digabung. Pembesaran gambar kecil dan kompresi dari aplikasi chat juga berperan, dan langkah pemeriksaannya ada di artikel penyebab foto pecah setelah digabung.

Profil warna dan metadata

Browser menggambar hasil gabungan di kanvas sRGB, yaitu ruang warna standar untuk layar dan web. Foto dari kamera atau HP yang memakai ruang warna lebih luas, seperti Display P3, bisa terlihat sedikit kurang jenuh setelah diekspor. Perbedaan ini berasal dari perilaku umum browser, bukan dari format yang dipilih.

Hasil gabungan juga tidak membawa metadata EXIF. Model kamera, tanggal pengambilan, dan lokasi GPS (Global Positioning System) dari foto asli tidak ikut tersimpan, baik di hasil JPG maupun PNG. Simpan foto asli, jika Anda masih butuh data tersebut.

Contoh Pilihan Format untuk Hasil Gabungan

Contoh berikut memakai dimensi yang kami uji dengan Gabung JPG. Ukuran file tidak dicantumkan karena hasilnya bergantung pada isi gambar Anda. Periksa angka Perkiraan ukuran di panel pratinjau untuk file Anda sendiri.

Contoh 1: Tiga tangkapan layar menjadi satu gambar panjang

Tiga tangkapan layar 1080 × 2400 px digabung dengan tata letak Vertikal menghasilkan gambar 1080 × 7200 px. Pilih PNG, jika tangkapan layar berisi teks percakapan atau angka transaksi, agar huruf kecil tetap tegas. Jika hasil yang lebih ringan dibutuhkan, coba JPG kualitas tinggi dan bandingkan keterbacaan teks pada ukuran penuh.

Contoh 2: Empat foto produk dalam grid

Empat foto 1200 × 800 px dengan tata letak Grid · 2 kolom menghasilkan 2400 × 1600 px. Pilih JPG kualitas bawaan 92 untuk foto berlatar penuh. Hasil ini bisa dibuka di hampir semua perangkat dan aplikasi.

Contoh 3: Foto lanskap dan potret dengan area kosong

Foto 1200 × 800 px dan 800 × 1200 px digabung Vertikal dengan mode Ukuran asli menghasilkan 1200 × 2000 px. Foto potret selebar 800 px diberi ruang kosong 200 px di kiri dan kanan.

  • Dengan format JPG, ruang kosong itu terisi warna latar, putih pada setelan bawaan.
  • Dengan Warna latar Transparan dan format PNG atau WEBP, ruang kosong itu tetap transparan.

Cara mengatur foto berbeda ukuran tanpa terpotong dibahas di panduan menggabungkan foto berbeda ukuran.

Pilih Format Berdasarkan Penerima, Bukan Kebiasaan

Mulailah dari pertanyaan sederhana: siapa yang akan membuka file ini, dan apa isinya? Foto untuk banyak orang paling aman dalam JPG. Teks dan grafik paling tegas dalam PNG. Gambar web yang butuh file ringan cocok dalam WEBP, selama penerima mendukungnya.

Siap mencoba? Buka alat Gabung JPG, susun gambar Anda, lalu ganti format di menu Format dan bandingkan dimensi serta perkiraan ukuran sebelum mengunduh. Semua proses berjalan di browser, dan gambar tidak dikirim ke server Gabung JPG.

Pertanyaan Umum

Apakah JPG dan JPEG adalah format yang berbeda?

Tidak, JPG dan JPEG adalah format yang sama. Perbedaannya hanya pada ekstensi file. Ekstensi .jpg populer karena sistem operasi lama membatasi ekstensi menjadi tiga huruf.

Apakah PNG selalu lebih tajam daripada JPG?

Tidak, PNG hanya menjamin tidak ada data yang dibuang saat menyimpan. Jika sumbernya sudah buram, sudah terkompresi, atau diperbesar saat digabung, PNG menyimpan kondisi itu apa adanya. Untuk foto, JPG kualitas tinggi sering terlihat setara dengan file yang jauh lebih kecil.

Apakah semua file WEBP lossless?

Tidak, WEBP punya mode lossy dan mode lossless. Hasil WEBP dari Gabung JPG memakai mode lossy pada kualitas 50 hingga 99. Di Chrome, kualitas 100 menghasilkan WEBP lossless. Transparansi tetap didukung di kedua mode.

Mengapa latar transparan PNG berubah putih setelah digabung?

Latar transparan berubah putih karena format hasilnya JPG, BMP, atau PDF, atau karena Warna latar masih putih. Transparansi hanya bertahan dengan Warna latar Transparan dan format hasil PNG atau WEBP.

Apakah foto HEIC dari iPhone bisa langsung digabung?

Tidak di Chrome desktop, karena HEIC tidak didukung di sana. Di Safari iPhone, pemilih foto biasanya memberikan salinan JPEG, sehingga foto umumnya tetap bisa dipakai. Ekspor foto sebagai JPG, jika file HEIC ditolak.

Apakah hasil gabungan menyimpan data EXIF foto asli?

Tidak, hasil gabungan tidak membawa metadata EXIF. Model kamera, tanggal pengambilan, dan lokasi GPS tidak ikut tersimpan. Orientasi EXIF tetap dipakai saat impor, sehingga foto tampil tegak di hasil gabungan.