WebP menghasilkan file 25 hingga 35 persen lebih kecil dari PNG untuk gambar yang sama, dan tetap mempertahankan latar belakang transparan PNG yang terkenal. Fakta tersebut menjelaskan mengapa Google membuat WebP dan mengapa sebagian besar situs web modern kini menyajikannya. Argumen tandingan PNG adalah jangkauan: ia terbuka di setiap program yang pernah ditulis, termasuk perangkat lunak yang belum pernah mendengar tentang WebP. Jadi pilihannya bukan pada format mana yang secara teknis lebih unggul, karena WebP jelas lebih unggul. Ini tentang apakah Anda mengoptimalkan situs web modern atau untuk jaminan kompatibilitas di mana saja. Panduan ini membandingkan keduanya secara mendalam dalam hal kompresi, transparansi, mode kualitas, dukungan browser, animasi, dan kecepatan halaman, lalu memberi Anda aturan yang jelas dalam memilih.

Apa itu WebP dan mengapa Google membuatnya

WebP adalah format gambar yang dirilis Google pada tahun 2010, dibangun berdasarkan teknologi kompresi dari codec video VP8-nya. Tujuannya jelas: membuat gambar web lebih kecil sehingga halaman dimuat lebih cepat. Google memiliki data untuk mengetahui bahwa gambar mendominasi bobot halaman, dan mengurangi sepertiga dari setiap gambar akan mempercepat web secara signifikan. WebP dirancang sejak awal untuk menggantikan tiga format sekaligus, serasi Transparansi PNG, kompresi fotografi JPG, dan animasi GIF dalam satu wadah. Ambisi itulah yang menyebabkan mereka bisa melakukan hal-hal yang tidak bisa dilakukan oleh PNG.

Apa itu PNG dan mengapa ia bertahan

PNG hadir pada tahun 1996 sebagai pengganti GIF yang bebas paten, menggunakan kompresi DEFLATE lossless dan menambahkan saluran alfa penuh. Ini menjadi standar untuk logo, ikon, tangkapan layar, dan grafik apa pun yang memerlukan latar belakang tembus pandang. Dukungan universal selama hampir tiga dekade adalah tujuan utamanya. Setiap browser, sistem operasi, klien email, office suite, dan editor gambar membaca PNG tanpa pengaturan. Ketika sebuah gambar benar-benar harus dibuka di suatu tempat yang tidak diketahui, PNG adalah format yang tidak pernah gagal.

Ukuran file: WebP menang dengan jelas

Kompres WebP lebih baik daripada PNG pada dasarnya di setiap skenario. Untuk logo atau grafik UI yang khas dengan transparansi, harapkan a Pengurangan 25 hingga 35 persen berpindah dari PNG ke WebP tanpa kehilangan. Masuk ke mode lossy WebP dan penghematan akan meningkat secara dramatis, seringkali 60 hingga 70 persen, sambil tetap mempertahankan saluran alfa. PNG tidak mempunyai pilihan yang merugikan sama sekali, sehingga tidak dapat bersaing di pasar kelas bawah. Di situs dengan lusinan aset gambar, perbedaan tersebut bertambah menjadi ratusan kilobyte per pemuatan halaman.

Kesenjangan tersebut berasal dari kompresi yang lebih cerdas. Algoritme DEFLATE PNG adalah metode tujuan umum yang dipinjam dari ZIP, bagus dalam menemukan pengulangan literal. WebP menggunakan pengkodean prediktif yang dibuat khusus untuk gambar, menebak setiap blok dari tetangganya dan hanya menyimpan perbedaannya. Pendekatan sadar gambar ini menemukan penghematan yang tidak dapat dilihat oleh DEFLATE, itulah sebabnya format dari tahun 2010 mengalahkan format dari tahun 1996 dengan sangat konsisten.

Transparansi: keduanya memilikinya, WebP berbuat lebih banyak

Tidak seperti JPG, kedua format tersebut membawa saluran alfa penuh, sehingga logo tetap terlihat tembus pandang. Namun WebP menambahkan sesuatu yang tidak dapat ditandingi oleh PNG: transparansi dalam mode lossy. Transparansi PNG hanya hadir dengan kompresi lossless, jadi grafik semi-transparan harus disimpan dengan bobot lossless penuh. WebP memungkinkan Anda memiliki latar belakang transparan dan kompresi agresif pada saat yang bersamaan, yang merupakan hal yang dibutuhkan oleh logo PNG yang berat. Untuk aset UI dan potongan produk yang harus tetap transparan dan lebih ringan, kombinasi ini adalah argumen terkuat WebP.

Kualitas: mode lossless dan lossy

WebP menawarkan kedua mode tersebut, yang membuatnya fleksibel dalam hal yang tidak dimiliki PNG:

WebP Tanpa Rugi sama persis dengan PNG, piksel demi piksel, sekaligus menghasilkan file yang lebih kecil. Tidak ada trade-off kualitas, hanya ukuran yang menang.
WebP yang Rugi membuang detail seperti yang dilakukan JPG, memperkecil file lebih jauh, dan tidak seperti JPG, ia masih dapat mempertahankan transparansi.

PNG hanya menawarkan lossless, itulah sebabnya PNG tetap besar. Jika Anda membutuhkan salinan sempurna, WebP lossless memberikannya kepada Anda dengan ukuran lebih kecil. Jika Anda dapat menerima kerugian yang tidak terlihat, WebP yang lossy memberi Anda sebagian kecil dari ukurannya. Apa pun yang terjadi, ada pengaturan WebP yang mengalahkan PNG.

Dukungan browser dan perangkat lunak

Ini adalah satu-satunya keuntungan nyata yang dimiliki PNG, dan hal ini semakin menyempit. Setiap browser modern mendukung WebP, termasuk Chrome, Firefox, Safari, dan Edge, jadi di web terbuka, pertanyaan kompatibilitas pada dasarnya telah diselesaikan. Kesenjangannya juga ada di tempat lain: beberapa perangkat lunak desktop lama, klien email tertentu, versi Office lama, dan platform lawas masih menolak WebP. Formulir unggahan adalah jebakan lainnya, karena banyak yang hanya menerima JPG dan PNG dan akan langsung menolak file WebP.

Jadi kesimpulan jujurnya adalah WebP aman untuk situs web Anda dan berisiko untuk file yang Anda serahkan ke sistem yang tidak dikenal. PNG tetap menjadi pilihan universal untuk segala hal yang berada di luar kendali Anda.

Animasi: WebP juga menggantikan GIF

Salah satu kemampuan yang tidak dimiliki PNG adalah animasi. PNG standar menampung satu frame, dan meskipun ekstensi APNG ada, dukungannya selalu tidak konsisten. Mendukung WebP animasi secara native dengan full alpha, menghasilkan file yang jauh lebih kecil daripada GIF yang setara sambil menampilkan jutaan warna, bukan GIF 256. Jika Anda memilih antara format untuk grafik perulangan pendek, WebP mengalahkan PNG dan GIF dengan pasti.

Mengapa WebP mempercepat situs web

Berat halaman dimasukkan langsung ke dalamnya Cat Contentful Terbesar, salah satu Data Web Inti Google dan sinyal peringkat yang dikonfirmasi. Gambar biasanya merupakan bagian terberat di sebuah halaman, jadi memotong setiap gambar sebanyak sepertiganya akan berdampak besar pada waktu muat, skor LCP, dan rasio pentalan. Halaman yang lebih cepat juga menghasilkan konversi yang lebih baik, itulah sebabnya kinerja kerja dibayar dua kali lipat.

Pola praktis yang digunakan sebagian besar situs bersifat progresif: menyajikan WebP ke browser yang mendukungnya dan kembali ke PNG atau JPG untuk sisanya. HTML modern menangani hal ini secara otomatis dengan elemen gambar, dan sebagian besar sistem pengelolaan konten dan layanan gambar melakukannya untuk Anda. Anda mendapatkan kemenangan cepat tanpa merusak apa pun untuk klien lama.

Kapan menggunakan setiap format

Gunakan WebP untuk gambar situs web, terutama logo dan ikon dengan transparansi, di mana file yang lebih kecil berarti halaman lebih cepat.
Gunakan WebP ketika Anda memerlukan transparansi dan ukuran kecil, karena ini adalah satu-satunya format umum yang menawarkan keduanya.
Gunakan PNG ketika gambar harus dibuka di program apa pun, termasuk perangkat lunak lama dan klien email.
Gunakan PNG untuk formulir dan sistem unggahan yang secara eksplisit mencantumkan format yang diterima dan menghilangkan WebP.
Gunakan PNG sebagai master arsip Anda, karena dukungan universal lebih penting daripada ukuran file yang Anda simpan selamanya.

Bagaimana mengkonversi PNG ke WebP

Konversi tidak memerlukan instalasi. Buka kami konverter, tambahkan PNG Anda, dan pilih opsi yang menjaga transparansi, yang mengekspor WebP. Pemrosesan berjalan secara lokal melalui HTML5 Canvas API, jadi tidak ada yang diunggah, dan Anda dapat mengelompokkan beberapa file sekaligus. Latar belakang transparan tetap utuh sementara file menjadi lebih ringan. Panduan lengkapnya ada di Panduan PNG ke WebP.

Bagaimana dengan AVIF?

Perlu diketahui konteksnya: AVIF adalah format baru yang mengompresi lebih baik daripada WebP, seringkali 20 persen lebih kecil, dan juga mendukung transparansi dan animasi. Dukungan browser kini sudah bagus namun sedikit tertinggal dari WebP, dan dukungan perangkat lunak masih jauh tertinggal. Bagi sebagian besar situs saat ini, WebP adalah pilihan pragmatis dengan keseimbangan penghematan dan dukungan terbaik, dan AVIF layak untuk diperhatikan seiring dengan meningkatnya adopsi. PNG tetap menjadi pilihan kedua dalam kedua hal tersebut.

Putusannya

WebP unggul dalam hal teknis secara komprehensif: file lebih kecil, transparansi dalam mode lossless dan lossy, animasi, dan dukungan browser modern penuh. PNG menang dalam satu hal yang masih penting, yaitu terbuka di mana-mana tanpa keraguan. Gunakan WebP untuk situs web Anda dan PNG untuk apa pun yang Anda kirim ke tempat yang tidak diketahui, dan sajikan WebP dengan fallback PNG saat Anda menginginkan keduanya. Untuk gambar format yang lebih luas, Panduan PNG vs JPG sampul tempat foto cocok.

Contoh ukuran dunia nyata

Persentase abstrak kurang membantu dibandingkan angka sebenarnya, jadi inilah kesenjangan yang terlihat pada aset pada umumnya:

SEBUAH Logo 500 kali 500 piksel dengan transparansi: sekitar 45KB sebagai PNG-24, sekitar 30KB sebagai WebP lossless, dan di bawah 12KB sebagai WebP lossy dengan saluran alfa utuh.
SEBUAH grafis pahlawan lebar penuh dengan bayangan lembut: sering kali 400KB atau lebih sebagai PNG, sekitar 260KB sebagai WebP lossless, dan jauh di bawah 100KB sebagai WebP lossy.
SEBUAH Kumpulan ikon UI dari dua puluh grafik kecil: keseluruhan rangkaian dapat turun dari sekitar 200KB menjadi 130KB tanpa kehilangan, sebelum penyetelan yang hilang.

Lipat gandakan contoh pahlawan di selusin halaman dan penghematannya menjadi beberapa detik waktu buka pada koneksi yang lambat, yang merupakan perbedaan yang diukur oleh Core Web Vitals.

Mengonversi perpustakaan PNG yang ada

Kebanyakan situs tidak dimulai dengan bersih; mereka memiliki ratusan PNG yang sudah dikerahkan. Tiga pendekatan berhasil, bergantung pada pengaturan Anda. Jika situs Anda berjalan pada kerangka kerja modern atau CMS, saluran gambar mungkin mengonversi dan menyajikan WebP secara otomatis, sehingga Anda mengubah pengaturan, bukan file. Jika Anda menggunakan CDN atau layanan gambar, sebagian besar menawarkan negosiasi format otomatis, mengirimkan WebP ke browser yang menerimanya dan PNG ke browser yang tidak menerimanya, dari file sumber yang sama. Dan jika Anda mengelola file dengan tangan, konversi aset secara batch dan memperbarui referensi akan berhasil, meskipun ini adalah pekerjaan yang paling sulit.

Rute mana pun yang Anda ambil, simpan PNG aslinya. Mereka adalah master Anda, dan Anda mungkin memerlukannya untuk sistem yang nantinya menolak WebP.

Kesalahan umum WebP yang harus dihindari

Beberapa jebakan membuat orang berpindah ke WebP:

Mengonversi master arsip Anda: mengonversi salinan untuk pengiriman dan menyimpan PNG asli, karena dukungan WebP lebih sempit di perangkat lunak desktop.
Menggunakan WebP lossy pada grafik teks: kompresi lossy menghilangkan huruf-huruf tajam seperti halnya JPG. Gunakan WebP lossless untuk tangkapan layar dan gambar dengan banyak teks.
Melewatkan fallback: menyajikan WebP tanpa alternatif PNG atau JPG akan merusak gambar untuk klien lama dan beberapa konteks email.
Mengirim WebP untuk mengunggah formulir: banyak yang hanya menerima JPG dan PNG dan akan langsung menolak file tersebut.

Tak satu pun dari hal ini yang menjadi alasan untuk menghindari WebP. Itu adalah alasan untuk menggunakannya di tempatnya, yaitu pengiriman ke browser modern, sambil tetap menjaga PNG untuk master dan untuk apa pun yang berada di luar kendali Anda.

Bagaimana sebenarnya browser memilih formatnya

Penyajian dua format tersebut terdengar rumit, namun mekanismenya sederhana dan otomatis. Setiap browser mengirimkan header Terima dengan setiap permintaan gambar, mencantumkan format yang dipahaminya. Server atau CDN membaca header tersebut dan mengembalikan WebP ke browser yang mengiklankan dukungan, atau PNG ke browser yang tidak, dari URL yang sama. Dalam HTML Anda dapat melakukan hal yang sama secara eksplisit dengan elemen gambar, mencantumkan sumber WebP terlebih dahulu dan fallback PNG kedua; browser memilih yang pertama dapat dibaca dan mengabaikan sisanya. Bagaimanapun, tidak ada pengunjung yang pernah melihat gambar rusak, dan browser modern secara diam-diam mendapatkan file yang lebih kecil sementara browser lama mendapatkan file yang kompatibel.

Pertanyaan yang sering diajukan

Apakah WebP lebih baik dari PNG?

Secara teknis ya. File WebP berukuran 25 hingga 35 persen lebih kecil, menjaga transparansi, dan menambahkan mode lossy dan animasi yang tidak dimiliki PNG. PNG hanya menang dalam hal kompatibilitas universal.

Apakah WebP mendukung transparansi seperti PNG?

Ya, dan selanjutnya. WebP menyimpan saluran alfa dalam mode lossless dan lossy, sedangkan PNG hanya menawarkan transparansi dengan kompresi lossless.

Seberapa kecil WebP daripada PNG?

Biasanya 25 hingga 35 persen lebih kecil tanpa kerugian, dan 60 hingga 70 persen lebih kecil dalam mode lossy sambil tetap menjaga transparansi.

Apakah semua browser mendukung WebP?

Setiap browser modern mendukung WebP, termasuk Chrome, Firefox, Safari, dan Edge. Beberapa perangkat lunak desktop lama dan formulir unggahan masih menolaknya.

Format mana yang mendukung transparansi dan animasi?

WebP melakukan keduanya. PNG memiliki transparansi tetapi tidak ada animasi yang dapat diandalkan, dan GIF dianimasikan tetapi dibatasi hingga 256 warna dengan transparansi kasar.

Apakah WebP atau PNG lebih baik untuk situs web?

WebP, untuk kecepatan. File yang lebih kecil meningkatkan Cat Konten Terbesar, sinyal peringkat Core Web Vitals. Sajikan fallback PNG untuk klien lama.

Haruskah saya menggunakan WebP atau AVIF?

WebP, untuk saat ini. AVIF melakukan kompresi sekitar 20 persen lebih baik namun memiliki dukungan yang lebih sempit, jadi WebP adalah keseimbangan pragmatis antara penghematan dan kompatibilitas saat ini.

Bisakah saya mengunggah file WebP ke formulir?

Seringkali tidak. Banyak formulir unggahan hanya menerima JPG dan PNG, jadi konversikan ke salah satu format tersebut ketika sistem mencantumkan format yang diterima dan menghilangkan WebP.

Haruskah saya mengonversi file PNG saya yang ada ke WebP?

Konversikan salinan untuk pengiriman, bukan master Anda. Simpan PNG asli, karena dukungan WebP lebih sempit pada perangkat lunak desktop dan formulir unggah.

Apakah WebP lossy bagus untuk tangkapan layar dengan teks?

Tidak. Kompresi lossy membuat huruf tajam tercoreng, persis seperti yang dilakukan JPG. Gunakan WebP lossless untuk grafik dan tangkapan layar yang banyak teks.

Apakah saya masih memerlukan fallback PNG dengan WebP?

Untuk keamanan maksimal, ya. Semua browser modern membaca WebP, namun perangkat lunak desktop lama, beberapa klien email, dan banyak formulir unggahan masih belum dapat melakukannya.

Bagaimana browser mengetahui apakah akan memuat WebP atau PNG?

Melalui Terima header yang dikirimkannya pada setiap permintaan, yang mencantumkan format yang didukung. Server dan CDN membacanya dan mengembalikan WebP atau cadangan PNG secara otomatis.