WebP vs PNG vs JPG: Format Mana yang Sebaiknya Dipakai Situs Web Anda?

WebP vs PNG bergantung pada ke mana gambar itu akan dipakai. Di situs web, WebP biasanya unggul: Google melaporkan WebP lossless sekitar 26% lebih kecil dari PNG, dengan dukungan transparansi, dan semua browser utama saat ini bisa menampilkannya. Untuk file yang Anda kirim lewat email, upload ke formulir, atau kirim ke orang lain, PNG dan JPG lebih aman, karena dukungan di luar browser masih belum merata.

Apa itu format WebP?

WebP adalah format gambar yang dikembangkan Google, pertama kali diumumkan pada 2010. Satu format ini mencakup beberapa keperluan yang dulu butuh file berbeda:

• Kompresi lossy untuk foto, mirip JPG.
• Kompresi lossless untuk grafis dan tangkapan layar, mirip PNG.
• Transparansi (alpha channel) di kedua mode.
• Animasi, sebagai pengganti GIF yang lebih ringan.

File berakhiran .webp. Chrome, Edge, Firefox, dan Safari semuanya bisa menampilkannya, dengan Safari menyusul sejak versi 14. Setiap pengunjung dengan browser terbaru melihat gambar WebP tanpa Anda perlu melakukan apa pun.

Anda mungkin sudah pernah bertemu WebP. Banyak situs menyajikannya secara otomatis, itulah sebabnya gambar yang Anda simpan dari halaman web kadang terunduh sebagai .webp meski terlihat seperti foto biasa. Panduan kami tentang apa itu file WebP membahas cara membuka dan mengeditnya.

WebP vs PNG: mana yang lebih kecil, dan kapan memakai masing-masing

Menurut angka Google, WebP lossless sekitar 26% lebih kecil dari PNG. Keduanya lossless, jadi Anda mendapat piksel yang sama dengan ruang lebih kecil. Untuk grafik dengan transparansi, WebP lossy bisa jauh lebih hemat: Google menyebut hasilnya biasanya sekitar tiga kali lebih kecil dari PNG yang setara.

Pakai WebP daripada PNG ketika:

• Gambar dipasang di situs web Anda sendiri, seperti logo, ilustrasi, potongan foto produk, atau screenshot.
• Anda ingin transparansi tanpa beratnya PNG.
• Kecepatan halaman penting dan gambarnya besar.

Tetap pakai PNG ketika:

• Anda mengirim file ke orang lain, melampirkannya ke dokumen, atau mengupload ke formulir yang mencantumkan jenis file yang diterima.
• Anda butuh salinan master untuk diedit di software yang mungkin tidak bisa membuka WebP.
• Grafisnya adalah logo atau ikon yang bisa Anda sajikan sebagai SVG, yang sering kali lebih kecil lagi dan tetap tajam di ukuran berapa pun.

WebP lossy dengan transparansi cocok untuk potongan foto produk dan ilustrasi bertepi lembut. Untuk screenshot dan mockup UI yang harus presisi piksel, WebP lossless menjaga teks tetap tajam, sama seperti PNG. Pelajari kelebihan PNG di apa itu file PNG.

WebP vs JPG untuk foto

Untuk foto, Google mengukur WebP lossy 25 sampai 34% lebih kecil dari JPG yang sebanding pada skor kualitas SSIM yang sama. Di halaman dengan selusin foto produk atau gambar hero besar, selisih itu membuat halaman lebih cepat dimuat, terutama dengan data seluler.

JPG masih punya dua kelebihan. JPG bisa dibuka di mana saja, dari penampil foto lama sampai printer, dan merupakan pilihan aman untuk portal upload apa pun. Selain itu, encoder JPG modern sudah bagus, jadi JPG yang dikompres dengan baik pada dimensi yang tepat hasilnya cukup mendekati. Jika hanya bisa melakukan satu hal, mengatur ukuran foto dengan benar lebih berdampak daripada ganti format. Foto 4000 piksel yang ditampilkan selebar 800 piksel membuang jauh lebih banyak byte daripada pilihan format.

Pendekatan praktis untuk situs: simpan file asli sebagai JPG atau PNG, dan terbitkan versi WebP yang ukurannya disesuaikan dengan lebar tampilan. Perbandingan PNG vs JPG yang lebih luas membantu saat memilih format master.

Perbandingan singkat

• Ukuran file di web: WebP biasanya paling kecil, lalu JPG untuk foto atau PNG untuk grafik.
• Transparansi: WebP dan PNG ya, JPG tidak.
• Animasi: WebP ya, PNG dan JPG tidak (gunakan GIF atau video).
• Kompatibilitas di luar browser: JPG terbaik, PNG menyusul dekat, WebP paling lemah di aplikasi lama dan formulir upload.
• Edit tanpa penurunan kualitas: PNG atau WebP lossless.

Cara mengonversi PNG atau JPG ke WebP

Untuk beberapa file, alat berbasis browser adalah cara tercepat. Konverter gambar ke WebP bekerja secara lokal di browser Anda, jadi gambar tidak diunggah ke mana pun.

1. Resize dulu jika gambar lebih besar dari ukuran tampilannya. Alat Resize Foto mengatur lebar yang tepat dan menjaga rasio aspek.
2. Buka konverter WebP dan tambahkan file JPG atau PNG Anda.
3. Konversi dan unduh. Pastikan area transparan masih transparan dan teks di tangkapan layar tetap tajam.
4. Jika WebP masih lebih berat dari yang diinginkan, kompres lagi dengan ukuran target dalam KB.
5. Unggah WebP ke situs Anda dan perbarui referensi gambarnya.

Untuk foto, pengaturan kualitas lossy sekitar 75 sampai 85 adalah titik awal yang masuk akal. Bandingkan hasilnya dengan aslinya dalam ukuran penuh, dan turunkan kualitas lebih jauh hanya jika tidak terlihat perbedaannya.

Banyak sistem manajemen konten (CMS) dan CDN gambar membuat salinan WebP secara otomatis. Jika milik Anda begitu, Anda mungkin cukup mengupload JPG atau PNG yang bagus dan membiarkan sistem menangani sisanya.

Cara memeriksa apakah situs Anda menyajikan WebP

CMS atau CDN Anda mungkin mengklaim membuat WebP, tetapi sebaiknya dipastikan. Di Chrome atau Edge, buka halaman, tekan F12 untuk membuka developer tools, lalu pindah ke tab Network. Muat ulang halaman dan filter dengan Img. Kolom Type menunjukkan format setiap gambar yang diterima, dan kolom Size menunjukkan jumlah byte-nya.

Jika di sana masih terlihat file JPG atau PNG yang besar, salinan WebP tidak disajikan. Penyebab umumnya adalah plugin cache yang menyajikan HTML lama, gambar yang ditambahkan lewat kode kustom yang melewati CMS, atau tema yang menuliskan URL gambar secara langsung. Perbaiki halaman-halaman itu dulu, mulai dari gambar yang paling berat.

Haruskah semua gambar di situs web Anda berformat WebP?

Sebagian besar bisa. Ada beberapa pengecualian yang perlu diketahui:

• Logo dan ikon sederhana sering kali lebih baik sebagai SVG.
• File yang memang untuk diunduh orang, seperti foto press kit atau grafis yang bisa dicetak, lebih ramah sebagai JPG atau PNG.
• Gambar untuk berbagi di media sosial (gambar Open Graph yang muncul saat link dibagikan) paling aman sebagai JPG atau PNG, karena Anda tidak mengontrol semua aplikasi yang membacanya.
• Jika harus mendukung browser yang sangat lama, sajikan cadangan JPG atau PNG dengan elemen HTML picture .

Anda mungkin juga melihat AVIF disebut. Ini format yang lebih baru yang bisa lebih kecil lagi dari WebP dan didukung luas di browser saat ini. WebP tetap jadi pilihan default yang lebih mudah karena lebih banyak alat dan platform yang menerimanya.

Cara membuka atau mengonversi file WebP yang Anda unduh

Versi terbaru Photos di Windows dan Preview di Mac bisa membuka file WebP, dan browser apa pun bisa menampilkannya jika Anda menyeretnya ke tab. Masalah muncul saat Anda mengupload file ke tempat yang hanya menerima JPG atau PNG, atau mengeditnya di program lama.

Solusinya konversi singkat. Konverter WebP ke PNG atau JPG menangani satu file maupun banyak sekaligus. Pilih PNG jika gambar punya transparansi atau teks tajam, dan JPG untuk foto jika Anda ingin file lebih kecil. Mengganti ekstensi tidak mengonversi apa pun, jadi selalu ekspor salinan yang asli.

Pertanyaan yang sering diajukan