Konverter PNG ke WebP
PNG bersifat lossless namun berukuran besar untuk web. WebP mendukung transparansi dan sering kali memberikan file yang jauh lebih kecil untuk logo, ikon, dan ilustrasi. Konversikan aset PNG secara lokal sebelum diterapkan ke produksi.
Cara mengonversi PNG ke WebP
1. Unggah PNG Anda (dengan atau tanpa alfa).
2. Pilih pengaturan WebP lossy atau lossless jika ditawarkan.
3. Bandingkan ukuran keluaran dengan PNG asli.
4. Unduh WebP file.
Contoh
Logo di situs pemasaran
Logo PNG berukuran 120 KB dapat menjadi WebP 40 KB dengan transparansi yang sama — pemuatan header lebih cepat.
Lembar sprite permainan
Sprite warna datar dikompres secara agresif dalam mode WebP lossless dibandingkan dengan PNG.
Grafik App Store
Ganti tangkapan layar PNG berukuran besar dalam paket aset yang runtimenya mendukung WebP.
Saat PNG ke WebP membantu
• Saat Anda memerlukan transparansi alfa di web dengan byte yang lebih kecil.
• Saat memigrasikan frontend yang banyak PNG ke modern format.
• Saat Lighthouse menandai aset PNG berukuran besar.
PNG vs WebP untuk aset UI
Desainer mengekspor PNG karena kebiasaan. Untuk web produksi, WebP dengan transparansi sering kali mengurangi separuh ukuran transfer. Otomatiskan konversi di CI atau gunakan alat ini untuk aset ad-hoc.
Pertanyaan yang sering diajukan
Apakah transparansi dipertahankan?
Ya — WebP mendukung saluran alfa yang mirip dengan PNG.
Lossless atau WebP lossy?
Grafik dengan warna datar sering kali cocok dengan WebP lossless. Foto yang disematkan dalam PNG mungkin menggunakan WebP lossy untuk ukuran yang lebih kecil.
Apakah warna akan berubah?
Mode lossless harus sama persis dengan PNG. Mode lossy mungkin menunjukkan sedikit perbedaan dalam gradien.
Dapatkah saya menggunakan WebP di gambar latar CSS?
Ya di semua browser modern. Menyediakan penggantian PNG hanya jika analitik menunjukkan lalu lintas lama.
Pemrosesan lokal?
Ya — file tidak pernah keluar dari browser Anda.