Konversi PNG ke WebP

Perkecil tangkapan layar, logo, dan foto produk tanpa latar berformat PNG di situs web Anda menjadi file WebP yang tetap mempertahankan tepi transparannya dan dimuat jauh lebih cepat. Pilih lossy atau lossless, konversi, lalu unggah hasilnya ke CMS Anda.

atau jatuhkan file JPG, JPEG, JPE … di sini ·

Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit

Keluaran

Konversi ke

File diproses di server kami dan dihapus setelah 30 menit.

Cara menggunakan alat ini

1
Masukkan file PNG
Seret hingga 20 PNG ke area unggah atau pilih dari folder. Setiap file boleh berukuran hingga 95 MB, cukup untuk mockup ekspor yang sangat besar sekalipun.
2
Pilih lossy atau lossless
Halaman ini dimulai dengan Kualitas 80 dalam mode lossy, keseimbangan yang baik untuk foto dan ilustrasi di web. Centang Lossless di Pengaturan lanjutan untuk ikon, pixel art, atau tangkapan layar UI yang harus tetap persis hingga ke tiap piksel.
3
Konversi dan ganti
Tekan Konversi ke WebP lalu unduh file satu per satu atau sebagai ZIP.

Jawaban

Apakah PNG layak dikonversi ke WebP?

Untuk gambar di situs web, hampir selalu layak. Gambar yang sama, termasuk transparansinya, biasanya menjadi jauh lebih kecil, dan semua browser saat ini dapat menampilkannya. Simpan PNG untuk file yang masih Anda edit atau yang dikirim ke orang yang membukanya di perangkat lunak desktop.

Mengapa pengembang web mengganti PNG dengan WebP

PNG memang dirancang lossless: format ini distandarkan oleh W3C pada 1996 sebagai pengganti GIF yang bebas paten dan tidak pernah membuang data piksel. Itu sempurna untuk file master, tetapi boros di halaman web, tempat ilustrasi hero selebar 1600 px yang disimpan sebagai PNG bisa lebih berat daripada gabungan semua skrip di halaman itu.

Google memperkenalkan WebP pada 2010 untuk menutup celah tersebut. WebP menawarkan dua mesin dalam satu wadah: mode lossless yang menurut perbandingan resmi Google sekitar 26% lebih kecil daripada PNG, dan mode lossy berbasis codec video VP8 yang lebih kecil lagi. Kedua mode membawa kanal alfa penuh, fitur yang membuat logo dan foto produk tanpa latar tetap bisa dipakai di atas latar berwarna.

Alat pengukur kecepatan halaman seperti PageSpeed Insights sudah lama menunjuk file PNG dan JPEG yang terlalu besar sebagai penghematan yang mudah, dan sekumpulan gambar hasil konversi sering menjadi perbaikan tercepat untuk Largest Contentful Paint. Jika gambar juga perlu dimensi baru, proses dulu dengan pengubah ukuran gambar, lalu konversi.

Seberapa kecil WebP dibandingkan PNG

PNG asli

1,2 MB

1600 × 900 · 24-bit dengan alfa, foto produk tanpa latar

biasanya 80–85% lebih kecil

WebP, kualitas 80

190 KB

1600 × 900 · lossy dengan kanal alfa tetap

PNG

Portable Network Graphics

PNG adalah format raster lossless (tanpa kehilangan kualitas) yang diterbitkan pada 1996 oleh PNG Development Group dan kemudian distandardisasi oleh W3C dan ISO. Format ini menyimpan setiap piksel secara persis, mendukung transparansi alfa penuh, dan menangani teks, tepi tajam, serta warna datar tanpa artefak. Ketepatan itu membuatnya ideal untuk tangkapan layar, logo, ikon, dan grafis antarmuka. Kekurangannya ada pada ukuran: foto yang disimpan sebagai PNG sering kali beberapa kali lebih besar daripada foto yang sama dalam JPEG atau WebP. Semua browser, sistem operasi, dan editor dapat membuka file PNG.

Kompresi: Lossless
Transparansi: Ya
Animasi: Tidak
Diperkenalkan: 1996 · PNG Development Group

Konverter PNG

WEBP

Gambar WebP

WebP adalah format gambar yang dirilis oleh Google pada 2010 agar halaman web dimuat lebih cepat. Format ini mendukung kompresi lossy (dengan kehilangan kualitas) maupun lossless (tanpa kehilangan kualitas), transparansi alfa, dan animasi dalam satu format. File WebP lossy biasanya 25–35% lebih kecil daripada JPEG dengan kualitas visual serupa, dan WebP lossless biasanya lebih kecil daripada PNG. Semua browser saat ini mendukungnya, tetapi sebagian perangkat lunak desktop lama, layanan cetak, dan formulir unggahan masih menolaknya. Windows, macOS, dan sebagian besar editor gambar modern dapat membuka file WebP.

Kompresi: Lossy atau lossless
Transparansi: Ya
Animasi: Ya
Diperkenalkan: 2010 · Google

Konverter WEBP

Pemilik situs mengubah PNG menjadi WebP untuk mengurangi bobot halaman sambil mempertahankan transparansi; mengubah WebP kembali ke PNG dilakukan untuk mengedit atau membuka file di perangkat lunak yang tidak bisa membaca WebP.

Angka di atas adalah hasil umum untuk foto produk tanpa latar, bukan janji. Grafis datar menyusut lebih sedikit dalam mode lossy dan kadang lebih banyak dalam mode lossless. Tangkapan layar yang penuh teks adalah satu-satunya kasus ketika WebP lossy dapat mengaburkan tepi huruf; centang Lossless untuk file seperti itu dan Anda tetap menghemat ruang tanpa mengubah piksel sedikit pun.

Dimensi, warna, dan transparansi terbawa tanpa perubahan, dan Hapus metadata (aktif secara bawaan) membuang riwayat pengeditan yang tidak pernah dibutuhkan browser.

Sebelum mengunggah file WebP ke situs Anda

Simpan PNG asli di folder terpisah; WebP adalah salinan untuk ditayangkan, bukan master untuk diedit.
Pastikan CMS Anda menerima unggahan .webp (WordPress menerimanya sejak versi 5.8).
Lihat satu gambar transparan di atas latar putih dan latar gelap untuk memastikan tepinya bersih.
Perbarui rujukan gambar di HTML atau CSS dari .png ke .webp, atau biarkan CMS membuat ulang thumbnail.
Bandingkan bobot halaman sebelum dan sesudah di panel jaringan browser agar Anda tahu berapa yang dihemat.

Pertanyaan seputar PNG ke WebP

Apakah WebP mempertahankan latar transparan PNG saya?

Ya. WebP menyimpan kanal alfa baik dalam mode lossy maupun lossless, sehingga foto produk tanpa latar dan logo tetap transparan. Dalam mode lossy, piksel tepi sedikit terkompresi; jika Anda melihat lingkaran samar di sekitar rambut halus atau teks, ulangi konversi dengan Lossless dicentang. Perlu kebalikannya nanti? WebP ke PNG mengembalikan PNG yang bisa diedit.

Sebaiknya pilih WebP lossy atau lossless untuk PNG?

Lossless jika PNG berupa UI datar, diagram, logo, atau pixel art, karena setiap piksel tetap persis seperti semula dan ukuran file biasanya tetap turun. Lossy dengan kualitas 75 sampai 85 jika PNG sebenarnya foto atau ilustrasi bergradasi lembut, karena di situlah penghematan besar didapat.

Browser apa saja yang dapat menampilkan gambar WebP?

Chrome, Edge, Firefox, dan Opera sudah menampilkan WebP selama bertahun-tahun, dan Safari menyusul lewat versi 14 pada 2020 (di macOS Big Sur atau yang lebih baru dan iOS 14). Praktis semua browser yang dipakai saat ini dapat menampilkannya, jadi tag img biasa yang mengarah ke file .webp sudah cukup untuk sebagian besar situs.

Apakah WordPress menerima unggahan WebP?

WordPress 5.8, yang dirilis Juli 2021, menambahkan WebP ke jenis file yang boleh diunggah ke pustaka media. Instalasi lama menolak file itu kecuali ada plugin yang menambahkan tipe MIME-nya, jadi periksa versi Anda sebelum mengonversi satu folder penuh.

Mengapa file WebP saya lebih besar daripada PNG aslinya?

Ini terjadi pada PNG mungil yang memakai palet terindeks berisi sedikit warna, seperti ikon 8 warna, karena PNG sudah sangat efisien untuk kasus itu. Coba Lossless untuk file tersebut, dan jika hasilnya masih lebih besar, pertahankan PNG-nya; penghematan didapat dari gambar yang lebih besar dan lebih kaya warna.

Bisakah saya mengonversi satu folder PNG ke WebP sekaligus?

Hingga 20 file diproses dalam sekali jalan, masing-masing sampai 95 MB, dan semuanya kembali bersama dalam satu ZIP. Untuk folder yang lebih besar, ulangi per 20 file; tidak ada batas harian dan file unggahan terhapus otomatis setelah 30 menit.