WebP vs JPG vs PNG: Mana yang Sebaiknya Kamu Pakai

Pakai JPG untuk foto. Pakai PNG kalau kamu butuh transparansi atau teks dan logo yang tajam. Pakai WebP kapan pun platformnya mengizinkan, karena biasanya ukuran filenya paling kecil dengan kualitas visual yang setara dengan dua format lainnya. Keputusan sederhana itu saja sudah bisa memperbaiki banyak masalah website yang lambat.

Sekarang mari kita bahas alasannya.

Kenapa Kebingungan Format Gambar Bikin Banyak Website Jadi Lambat

Kamu upload foto. Kelihatannya baik baik saja. Lalu skor kecepatan halamanmu anjlok, atau klien komplain situsnya terasa berat di ponsel mereka, dan tiba tiba kamu dihadapkan dengan tiga ekstensi file tanpa tahu apa bedanya.

Kebanyakan orang tidak pernah memikirkan ini sampai ada yang bermasalah. Logo yang terlihat buram secara aneh. Gambar latar yang muncul dengan kotak putih jelek alih alih menyatu dengan baik. Foto produk yang butuh lima detik untuk dimuat di jaringan 4G. Ketiga masalah ini biasanya berasal dari akar yang sama. Format salah, tugas salah.

Bagaimana Kompresi JPG Sebenarnya Bekerja untuk Foto

JPG mengompres gambarmu dengan membuang informasi yang mata kamu mungkin tidak akan sadari. Pergeseran warna yang kecil, sedikit noise di area yang ramai detail, hal hal semacam itu. Ini semacam trade off, dan untuk foto biasanya ini pilihan yang bagus, karena fotografi sudah punya begitu banyak detail alami sehingga sedikit kehilangan kualitas jadi tidak terasa.

Itulah alasan kenapa foto produk, potret, dan apa pun dengan gradasi atau pencahayaan masih mengandalkan JPG. Formatnya menangani kompleksitas dengan baik.

Tapi coba simpan logo sebagai JPG. Zoom ke bagian teksnya. Kamu akan lihat tepi yang buram dan semacam bayangan warna aneh di sekitar huruf, karena kompresi tidak tahu bedanya antara noise yang bisa diterima dan garis tajam yang memang disengaja. Ia cuma mengompres semuanya dengan cara yang sama.

Dan ada satu hal lagi yang sama sekali tidak bisa dilakukan JPG. Transparansi. Tidak ada versi JPG di mana sebagian gambar bisa tembus pandang. Kalau kamu butuh itu, berarti kamu sudah salah format dari awal.

Kenapa File PNG Jadi Jauh Lebih Berat Dibanding JPG

PNG tidak membuang apa pun. Setiap piksel tetap sama persis seperti aslinya. Itu sebabnya PNG jadi pilihan default untuk logo, ikon, tangkapan layar, dan apa pun yang tepinya harus benar benar tajam.

PNG juga mendukung transparansi penuh, yang jadi alasan sebenarnya kenapa hampir semua file logo yang pernah kamu unduh formatnya PNG.

Konsekuensi dari presisi seperti itu adalah ukuran file. Karena tidak ada yang dikompres, foto dengan detail tinggi yang disimpan sebagai PNG bisa jadi dua bahkan tiga kali lebih berat dibanding foto yang sama persis dalam format JPG. Dan matamu bahkan tidak akan sadar bedanya pada foto itu, karena ini jenis gambar yang sedikit kehilangan kualitas memang tidak masalah. Jadi kamu membayar ukuran ekstra untuk sesuatu yang sebenarnya tidak bisa kamu lihat bedanya.

Apa yang Membuat WebP Berbeda dari JPG dan PNG

WebP adalah jawaban Google untuk semua masalah ini. Ia menangani kompresi lossy maupun lossless dalam satu format, dan juga mendukung transparansi. Jadi tergantung apa yang kamu simpan, WebP bisa berperilaku seperti JPG yang lebih pintar atau PNG yang lebih ringan.

Pengujian di dunia nyata umumnya menunjukkan gambar WebP berukuran jauh lebih kecil dibanding JPG yang setara dengan kualitas visual yang mirip, dan selisihnya cenderung lebih besar lagi untuk gambar bergaya PNG yang punya transparansi.

Dulu, orang menghindari WebP karena masalah dukungan browser. Alasan itu sekarang sudah tidak berlaku lagi. Semua browser utama, termasuk Safari, sudah mendukungnya, jadi kecuali kamu berurusan dengan sistem lama yang sudah tidak dipakai siapa pun lagi, hampir tidak ada alasan nyata untuk menghindarinya.

Satu satunya kendala yang masih ada adalah beberapa alat atau alur kerja tertentu masih mengharapkan JPG atau PNG secara default, jadi kamu mungkin perlu mengonversi file sesekali. Harga kecil untuk kecepatan yang kamu dapat sebagai gantinya.

Format Gambar Mana yang Sebaiknya Kamu Pakai untuk Website Kamu

Kalau itu foto, pilih WebP dulu, dan gunakan JPG sebagai cadangan hanya kalau platformnya menolak. Untuk logo dan ikon yang butuh transparansi, WebP biasanya sudah cukup sambil tetap lebih ringan dibanding PNG, meskipun PNG masih pilihan yang lebih aman kalau kamu memang butuh aset merek tanpa kehilangan kualitas untuk keperluan cetak atau arsip.

Tangkapan layar itu soal pertimbangan. Kalau ketajaman adalah yang paling penting, PNG menang. Kalau kamu ingin keseimbangan yang bagus antara kejernihan dan ukuran file, WebP juga bisa menangani itu dengan baik.

Satu tempat di mana saran ini agak berbeda adalah formulir pemerintahan, portal lamaran kerja, atau sistem unggah dengan batasan ukuran. Banyak platform lama semacam ini hanya menerima JPG atau PNG, kadang dengan batas KB yang sangat spesifik dan menyebalkan. Selalu cek dulu apa yang sebenarnya diminta portalnya sebelum berasumsi WebP akan berfungsi di sana, karena sistem pihak ketiga itu hasilnya bisa berbeda beda.

Seberapa Kecil Sebenarnya Gambar WebP Bisa Jadi

Bayangkan sebuah blog kecil yang menampilkan foto produk sekitar 800kb masing masing dalam format PNG. Gambar yang sama kalau disimpan sebagai WebP bisa dengan mudah turun jadi sebagian kecil dari ukuran itu tanpa perbedaan yang terlihat bagi pembaca biasa. Kalikan itu dengan sepuluh gambar dalam satu halaman, dan kamu mulai paham kenapa pilihan format saja bisa jadi pembeda antara situs yang cepat dan yang lambat.

Kalau kamu mau membuktikannya sendiri tanpa install apa pun, coba jalankan sebuah gambar lewat ZeeCompress dan bandingkan hasil WebP dengan JPG atau PNG aslimu secara berdampingan. Biasanya itu langsung menyelesaikan perdebatannya dengan cepat.

Perbedaan Sebenarnya Antara WebP, JPG, dan PNG dalam Praktiknya

Tidak ada format yang selalu menang di setiap situasi, tapi kalau kamu butuh satu pilihan default, jadikan WebP. Pakai JPG sebagai cadangan untuk foto yang WebP nya ditolak, dan simpan PNG di kantong belakangmu untuk momen momen di mana presisi piksel yang sempurna benar benar penting atau kamu terpaksa berurusan dengan sistem lama yang belum mengikuti perkembangan zaman.

Begitu kamu paham untuk apa sebenarnya masing masing format ini dibuat, ini berhenti jadi permainan tebak tebakan.