PNG atau JPG? Aturan sepuluh tahun yang saya pakai untuk memutuskan

PNG dan JPG sudah jadi dua jawaban bawaan untuk "simpan gambar ini" selama lebih dari dua puluh tahun, dan kebanyakan orang memilih di antara keduanya secara kebetulan — apa pun yang jadi bawaan di dialog ekspor. Itu jalan sampai hari Anda mengirim tangkapan layar 9 MB ke seseorang, atau merilis logo dengan lingkaran cahaya kelabu yang jelek di sekelilingnya, dan tiba-tiba pilihannya jadi penting.

Begini: keputusannya sebenarnya sederhana. Ia berujung pada satu pertanyaan yang sudah sekitar sepuluh tahun saya ajukan, dan belum sekali pun ia mengecewakan saya.

Satu pertanyaan itu

Apakah gambar ini terbuat dari tepi, atau terbuat dari cahaya?

Itu saja. Teks, logo, ikon, tangkapan layar, diagram, line art, apa pun dengan batas keras dan bidang warna datar — itu tepi. Foto, gradien, apa pun dengan nada kontinu yang mulus dan ribuan pergeseran warna halus — itu cahaya.

Tepi menginginkan PNG. Cahaya menginginkan JPG. Nyaris semuanya mengalir dari situ.

Kenapa tepi menginginkan PNG

PNG bersifat lossless. Tiap piksel yang Anda simpan kembali persis, selamanya, tak peduli berapa kali Anda membukanya ulang. Ia mengompresi dengan mencari deretan warna identik, yang justru memenuhi gambar berbasis tepi — tombol solid, latar putih, garis hitam. PNG melahap itu dan tetap setajam silet.

Ia juga punya kanal alfa, jadi ia bisa benar-benar transparan. Itulah kenapa tiap logo yang ingin Anda taruh di atas latar berwarna sebaiknya PNG. JPG sama sekali tak punya transparansi — ia mengisi area itu dengan putih, dari situlah lingkaran cahaya jelek muncul.

Mode gagalnya adalah foto. Simpan foto sebagai PNG dan ia dengan patuh mencatat tiap bintik derau sensor serta tiap mikro-gradien pada kesetiaan penuh, dan filenya membengkak. PNG boros bukan karena buruk. Ia boros karena jujur soal detail yang mata Anda akan rela maafkan.

Kenapa cahaya menginginkan JPG

JPG bersifat lossy. Ia membuang informasi yang buruk disadari mata Anda — variasi warna halus, detail berfrekuensi tinggi — dan ia melakukan ini luar biasa baik pada foto. Justru itulah yang berlimpah pada sebuah foto. Hasilnya file berukuran sepersekian, dan Anda tak bisa melihat apa yang hilang.

Namun arahkan JPG ke tepi, dan ia berantakan. Ia melumuri artefak kabur di sekitar batas keras — terutama di sekitar teks — karena tepi tajam justru detail berfrekuensi tinggi yang dirancang untuk dibuangnya. Tangkapan layar JPG dari kode terlihat sedikit kotor di sekeliling tiap huruf. Itu bukan monitor Anda. Itu format yang bekerja sesuai rancangan pada masukan yang salah.

Tabel ukuran yang menuntaskannya

Dua gambar sumber yang sama, disimpan dengan kedua cara pada pengaturan wajar:

Baca dalam dua arah. Foto itu hampir 5x lebih kecil sebagai JPG, tanpa kehilangan yang terlihat. Tapi tangkapan layar dan logonya justru lebih besar sebagai JPG — dan keduanya juga akan terlihat lebih buruk, dengan lingkaran cahaya dan keburaman. Format yang lebih kecil berbalik sepenuhnya tergantung apa isi gambarnya. Itulah seluruh pelajaran dalam tiga baris.

Kasus tepi (hanya ada dua yang layak diketahui)

Transparansi memaksa PNG. Kalau ada bagian gambar yang perlu tembus pandang, JPG tersingkir tanpa peduli isinya, karena ia secara fisik tak bisa menyimpan kanal alfa. Bahkan foto yang dipotong di atas latar transparan harus PNG (atau WebP).

Teks-di-atas-foto adalah pertimbangan. Foto dengan teks yang menyatu di dalamnya sebagian cahaya, sebagian tepi. Saya pilih JPG kalau isinya kebanyakan foto dan menerima teks yang sedikit lembut, atau PNG kalau teksnya harus tetap tajam dan saya sanggup menanggung ukurannya. Tak ada pemenang bersih; Anda memilih cacat mana yang lebih rela Anda tanggung.

Saat Anda sudah telanjur salah format

Sebagian besar waktu Anda tak sedang memilih saat ekspor — Anda terjebak dengan file yang sudah disimpan orang lain dengan salah. Seorang fotografer menyerahkan PNG 14 MB. Seorang desainer mengirim logo sebagai JPG berlingkar cahaya. Itu tinggal konversi.

Bergerak ke arah cerdas — PNG ke JPG untuk foto yang tersimpan terlalu berat — adalah kemenangan jelas, dan ia berjalan langsung di browser Anda di sini jadi file tak pernah meninggalkan perangkat. Bergerak ke arah sebaliknya — JPG ke PNG — jujur tapi terbatas: ia membuat file jadi lossless sejak sekarang, yang memang Anda inginkan sebelum menyunting, tapi ia tak bisa menghapus lumuran artefak yang telanjur dipanggang JPG. Lossy adalah pintu satu arah. Mengonversi ke PNG tak membawa Anda kembali melewatinya; ia cuma menghentikan Anda kehilangan apa pun lebih jauh.

Ajukan satu pertanyaan itu — tepi atau cahaya — dan Anda akan benar hampir setiap kali. Saya masih menanyakannya pada tiap ekspor. Butuh setengah detik dan ia sudah menyelamatkan saya dari banyak lingkaran cahaya kelabu.