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.
Kapan menyimpan PNG
• Ketika lingkungan target hanya menerima PNG (beberapa pipeline email dan PDF).
• Saat desainer memerlukan pertukaran pengeditan lossless universal.
• Saat dukungan Safari di iOS lama merupakan persyaratan yang sulit tanpa fallback.
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.
Strategi penggantian
Gunakan kumpulan gambar/sumber: WebP terlebih dahulu, PNG kedua. Atau deteksi sisi server dukungan melalui header Terima. Jangan sajikan WebP kepada klien yang tidak dapat memecahkan kodenya.
Mengedit alur kerja
Simpan master PNG dalam repo desain. Hasilkan WebP hanya untuk menyebarkan artefak — mengembalikan pengeditan lebih mudah dari sumber PNG lossless.
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.
Lebih baik dari SVG?
Untuk logo sederhana, SVG sering kali berukuran paling kecil dan berskala tanpa batas. WebP cocok dengan karya seni raster dan foto dengan alfa.