Ubah PNG ke WebP agar Halaman Lebih Cepat

PNG sangat bagus untuk grafis tajam dan transparansi, tapi berat. Satu screenshot selebar layar bisa berukuran beberapa megabyte, yang memperlambat halaman dan menguras kuota pengunjung. WebP dirancang Google agar tampilannya tetap sama dengan ukuran jauh lebih kecil, dan semua browser utama sudah mendukungnya sejak 2020.

Jika Anda ingin memperkecil ukuran file PNG tanpa resize atau crop, mengganti format sering kali jadi cara paling ampuh. Grafis berwarna rata dan foto yang disimpan sebagai PNG sering turun 50 hingga 80 persen, dan perbedaannya sulit terlihat di layar.

Perbandingan kedua format

Saat membandingkan WebP vs PNG, keduanya mendukung transparansi dan sama-sama punya mode lossless. PNG lebih banyak diterima software desktop lama dan alur kerja cetak. WebP menambahkan mode lossy opsional, sumber sebagian besar penghematannya, dan juga mendukung animasi. Untuk apa pun yang ditampilkan di browser, WebP biasanya format pengiriman yang lebih baik.

Browser membuka setiap PNG, melukisnya ke canvas tersembunyi dengan kanal alfa tetap utuh, lalu meng-encode canvas itu sebagai WebP sesuai setelan pilihan Anda. Semua ini terjadi di dalam tab. Tidak ada server yang menerima gambar Anda, yang juga berarti tidak ada antrean dan tidak ada batas jumlah file selain memori perangkat Anda.

Chrome, Edge, dan Firefox semuanya bisa membuat file WebP dengan cara ini. Sebagian versi Safari bisa menampilkan WebP tapi tidak bisa meng-encode-nya, jadi jika Anda memakai Safari di Mac, alat ini akan memberi tahu dan menyarankan browser lain.

Ubah banyak PNG ke WebP sekaligus

Perlu memproses satu folder penuh? Pilih atau tarik hingga 50 file sekaligus. File diproses satu per satu dengan bilah progres, dan hasilnya bisa disimpan sendiri-sendiri atau bersamaan. Nama file tetap, jadi header.png menjadi header.webp, sehingga mudah ditukar ke dalam proyek.

Setelan kualitas lossy

Slider mengatur kualitas PNG ke WebP pada skala 50 hingga 100. Nilai bawaan 85 cocok untuk sebagian besar foto dan ilustrasi. Untuk screenshot dengan tulisan kecil, 90 atau lebih menjaga huruf tetap tajam. Untuk foto hero yang besar, 75 hingga 80 sering terlihat sama di layar dengan ukuran jauh lebih ringan. Perhatikan kolom ukuran dan bandingkan pratinjau sampai menemukan keseimbangan yang Anda suka.

PNG ke WebP lossless

Centang Lossless saat setiap piksel harus tetap persis sama, misalnya pixel art, mock-up UI, atau gambar yang akan diedit lagi. WebP lossless biasanya sekitar seperempat lebih kecil daripada PNG yang sudah dioptimalkan. Tidak sekecil mode lossy, tapi tidak ada yang dibuang.

Mempertahankan area transparan

Logo, ikon, dan foto produk yang sudah dipotong mengandalkan latar transparan. Alat ini mengubah PNG ke WebP dengan transparansi tetap terjaga di mode lossy maupun lossless, jadi hasilnya menyatu rapi di warna halaman apa pun. Jika butuh sebaliknya, latar solid untuk marketplace, alat background kami bisa membantu.

Jika Anda ingin ubah PNG ke WebP untuk website, cara termudah adalah mempertahankan nama file dan mengganti ekstensinya di HTML atau CSS. Banyak developer memakai elemen picture dengan sumber WebP dan PNG asli sebagai cadangan, meski dengan dukungan browser saat ini cadangan itu jarang dibutuhkan.

Untuk PNG ke WebP di WordPress, unggah file hasil konversi langsung ke media library; WordPress menerima WebP sejak versi 5.8, selama library gambar di hosting Anda mendukungnya. Shopify, Wix, Squarespace, dan sebagian besar pembuat situs modern juga menerima unggahan WebP.

Email, media sosial, dan dokumen

WebP dibuat untuk browser, jadi pikir dua kali sebelum memakainya di luar web. Beberapa aplikasi email, software perkantoran lama, dan sebagian media sosial masih mengonversi atau menolaknya, dan tempat cetak umumnya meminta JPG, PNG, atau PDF. Untuk tujuan itu, simpan PNG aslinya, atau buat salinan JPG dengan konverter kami. Pakai WebP di tempat terbaiknya: halaman dan aplikasi yang Anda kelola, di mana setiap kilobyte yang dihemat membuat pengalaman lebih cepat bagi setiap pengunjung, di perangkat dan koneksi apa pun.

Apakah membantu Core Web Vitals?

Gambar sering menjadi elemen terbesar di halaman, jadi file yang lebih ringan membantu skor Largest Contentful Paint dan menghemat kuota pengunjung seluler. Padukan pergantian format dengan atribut width dan height yang benar serta lazy loading untuk gambar di bawah layar pertama, dan dua peringatan kecepatan paling umum pun hilang.

Resize dulu, baru konversi

Format hanyalah separuh cerita. Screenshot 4.000 piksel yang ditampilkan di kolom 800 piksel tetap memboroskan bandwidth meski sudah WebP. Perkecil gambar sampai kira-kira dua kali lebar tampilannya, agar tetap tajam di layar beresolusi tinggi, lalu konversi. Alat resize kami menangani langkah pertama dengan cara yang sama: privat dan di browser.

Cek tulisan dan garis halus

Kompresi lossy bisa melembekkan garis tipis dan tulisan kecil. Setelah mengonversi screenshot, grafik, atau diagram, perbesar pratinjau dan bandingkan dengan aslinya. Jika tepinya tampak kabur, naikkan slider lima atau sepuluh poin atau beralih ke lossless. Foto jauh lebih toleran dan jarang butuh lebih dari nilai bawaan.

Beri nama file yang jelas

Mesin pencari membaca nama file sebagai petunjuk relevansi kecil, dan orang melihatnya saat mengunduh gambar Anda. Karena itu, nama deskriptif seperti sepatu-lari-merah.webp lebih baik daripada IMG_2041.webp. Ganti nama PNG sebelum dikonversi dan file baru akan mewarisi nama itu, jadi tidak ada yang perlu dibenahi setelahnya. Tambahkan alt text yang bermakna saat menaruh gambar di halaman, dan atur width serta height agar tata letak tidak melompat saat gambar dimuat.

Saat file tidak bisa dikonversi

Jika file ditolak, pastikan file itu benar-benar PNG; alat ini memeriksa tanda tangan file, bukan sekadar ekstensinya. Gambar yang terunduh sebagian atau rusak tidak bisa dibuka, jadi unduh ulang. Jika semua file gagal, kemungkinan browser Anda tidak bisa meng-encode WebP, dan beralih ke Chrome, Edge, atau Firefox akan menyelesaikannya.

Untuk ubah PNG ke WebP di Mac, buka halaman ini di Chrome, Edge, atau Firefox lalu tarik file langsung dari Finder. Di Windows dan Chromebook, browser yang sama bisa dipakai tanpa instal apa pun. Untuk ubah PNG ke WebP di Android, buka halaman di Chrome, ketuk area unggah, pilih gambar dari galeri atau file, lalu simpan hasilnya ke Download.

Apakah WebP lebih kecil daripada PNG? Hampir selalu, terutama di mode lossy, dan selisihnya paling besar untuk foto yang disimpan sebagai PNG. Pengecualian langka adalah ikon kecil berwarna rata yang sudah dikompres dengan baik oleh PNG; kolom ukuran akan menunjukkannya, dan Anda cukup menyimpan yang asli.

Bagaimana dengan WebP vs AVIF? AVIF bisa lebih kecil lagi, tapi proses encode-nya lebih lambat, dukungan browser untuk membuatnya belum merata, dan banyak platform CMS serta aplikasi email masih menolaknya. WebP adalah jalan tengah yang andal: didukung luas, cepat dibuat, dan jauh lebih ringan daripada PNG. Simpan file PNG asli sebagai master jika nanti perlu diedit atau dicetak.