PNG ke WebP: Cara Mengubah dan Mengecilkan Gambar PNG

Terakhir diperbarui: June 27, 2026

PNG adalah format yang tepat untuk grafis tajam dan transparansi, tetapi file-nya besar — terutama untuk materi fotografi apa pun. Mengubah PNG ke WebP mempertahankan ketajaman dan alpha channel sambil memotong byte secara dramatis. Tantangannya adalah memilih mode WebP lossless versus lossy dengan benar, karena mode yang tepat tergantung pada konten gambar. Panduan ini mencakup keduanya, lengkap dengan ukuran terukur yang sebenarnya.

Jawaban Singkat: Haruskah Anda Mengubah PNG ke WebP?

Ya untuk gambar web — WebP mempertahankan transparansi dan ketajaman PNG dengan fraksi ukurannya. Pilih mode berdasarkan konten:

Untuk satu gambar, gunakan Image Converter; untuk batch, gunakan cwebp. Keputusan format di balik ini ada di image formats explained.

Seberapa Banyak Penghematan dari PNG ke WebP?

Ini sepenuhnya tergantung pada mode WebP mana yang Anda pilih, karena PNG adalah lossless dan perbandingannya tidak sejenis.

Dua kesimpulan jujur dari angka-angka ini. Pertama, WebP lossless dari foto masih besar (568 KB) — karena encoding lossless tidak dapat menghilangkan noise dalam foto. Jika kontennya adalah foto, itu harus WebP lossy, bukan lossless. Kedua, WebP lossless bersinar pada grafis datar: pada tangkapan layar dan seni UI, ukurannya biasanya 20–30% lebih kecil dari PNG dengan piksel yang identik. Sesuaikan mode dengan konten.

Gambar sumber yang sama di keempat format menunjukkan posisi PNG relatif terhadap alternatif:

Gambar Apa yang Sebaiknya Tetap PNG?

Beberapa gambar sama sekali tidak boleh diubah. Pertahankan PNG ketika gambarnya adalah logo atau ikon yang bisa diganti dengan SVG (vektor lebih kecil dan lebih tajam), atau ketika Anda mengirimkannya ke sistem yang secara spesifik memerlukan PNG — beberapa pipeline cetak, beberapa editor lama, dan sebagian besar pertukaran alat desain mengharapkan PNG. Untuk satu ikon kecil (di bawah ~3 KB), konversinya tidak sebanding dengan kerumitan pipeline; biarkan saja sebagai PNG. Aturan keputusannya sama di image formats explained: ubah PNG ke WebP ketika byte itu penting dan tujuannya adalah peramban web, pertahankan PNG ketika kompatibilitas atau alternatif vektor lebih penting.

Method 1: Browser converter

Untuk satu gambar, gunakan Imagic AI Image Converter: unggah PNG, pilih WebP, pilih lossless untuk grafis atau kualitas ~80 untuk foto, dan unduh. Squoosh bagus untuk membandingkan lossless vs lossy berdampingan sebelum Anda berkomitmen.

Method 2: cwebp command line

## Lossless WebP (best for graphics, screenshots, sharp text, transparent UI)
cwebp -lossless input.png -o output.webp

## Lossy WebP (best if the PNG is actually a photo)
cwebp -q 80 input.png -o output.webp

## A folder of PNGs, lossless, in parallel
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless adalah flag kuncinya — tanpa itu, cwebp secara default menggunakan lossy, yang membuat tepi tipis menjadi buram. Selalu gunakan -lossless untuk grafis dan tangkapan layar.

Method 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless for sharp graphics; switch to lossless=False for photographic PNGs
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Ketika lossless=True, nilai quality diabaikan; ketika lossy, atur ke ~80 untuk foto.

Apakah WebP Mempertahankan Transparansi PNG?

Ya. WebP mendukung alpha channel penuh dalam mode lossy dan lossless, jadi PNG transparan menjadi WebP transparan tanpa pekerjaan tambahan. Ini adalah alasan utama untuk mengonversi aset UI dan potongan produk: Anda mempertahankan transparansi dan kehilangan sebagian besar byte. Untuk detail transparansi, lihat how to make transparent images.

Bagaimana Cara Menyajikan WebP dengan Fallback PNG?

Dukungan WebP sekitar 98%, tetapi pertahankan fallback PNG untuk klien lama dan email:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Deskripsi" width="200" height="200" loading="lazy">
</picture>

Peramban akan memilih tipe pertama yang didukung; <img PNG adalah fallback terakhir. Untuk grafis tajam, sediakan width/height agar tata letak tidak bergeser. Lihat WebP converter guide untuk pola fallback lengkap termasuk AVIF.

Kapan Konversi PNG ke WebP Adalah Langkah yang Salah?

• Email. Banyak klien email mengabaikan WebP. Pertahankan PNG (atau JPEG) untuk email.
• Ketika Anda memerlukan JPEG sebagai gantinya. Jika PNG adalah foto untuk pasar yang hanya menerima JPEG, konversikan ke JPEG, bukan WebP. Lihat WebP to JPG.
• Peramban tertanam lama tanpa dukungan WebP — meskipun fallback <picture> menutupi ini.
• Ketika PNG sudah sangat kecil. Ikon 2KB tidak banyak mendapat manfaat dari konversi; biaya pipeline tidak sebanding.

Kesalahan Umum

• Menggunakan WebP lossy untuk grafis tajam. Lossy membuat tepi tipis dan teks menjadi buram. Gunakan -lossless untuk tangkapan layar dan UI.
• Menggunakan WebP lossless untuk foto. Ukurannya tetap besar karena lossless tidak dapat menghilangkan noise fotografi. Gunakan lossy.
• Menghilangkan fallback PNG. Peramban lama dan email membutuhkan <img PNG.
• Lupa mengubah ukuran terlebih dahulu. WebP 4000px masih unduhan 4000px, apa pun formatnya.
• Memperlakukan PNG sebagai format foto. Jika gambarnya adalah foto, mungkin awalnya JPEG/RAW — konversi dari sumber yang benar.

Pertanyaan yang Sering Diajukan

Seberapa Banyak Penghematan dari Mengubah PNG ke WebP?

Untuk konten fotografi, 25 hingga 35 persen lebih kecil pada kualitas yang sama; untuk grafis datar dengan transparansi, seringkali lebih banyak. WebP mendukung mode lossy dan lossless ditambah alpha channel, jadi ini mencakup apa yang dilakukan PNG dengan ukuran yang lebih kecil.

Haruskah Setiap PNG Menjadi WebP?

Untuk pengiriman web, ya, dengan fallback PNG untuk peramban yang sangat lama. Simpan master PNG jika Anda mungkin mengeditnya kembali, karena WebP lossy adalah generasi kompresi. Sajikan WebP melalui elemen <picture> dengan fallback PNG.

Apakah WebP Mendukung Transparansi?

Ya — WebP mendukung alpha channel penuh, jadi PNG transparan dikonversi dengan bersih. Ini adalah alasan utama untuk memilih WebP daripada JPEG untuk grafis dengan transparansi. Lihat transparent images guide.

Apa Konversi Command-Line-nya?

cwebp -q 80 input.png -o output.webp. Flag -q mengatur kualitas (80 adalah default web). Untuk lossless, gunakan -lossless. Lakukan secara batch dengan shell loop atau ImageMagick. Lihat WebP converter guide.

Apakah WebP Mendukung Animasi?

Ya — WebP mendukung gambar animasi, lebih kecil dari GIF animasi yang setara. Untuk putaran pendek, WebP animasi adalah alternatif modern untuk GIF. Untuk animasi yang lebih lama, video (MP4) masih lebih kecil dan lebih baik.

Haruskah Saya Mengubah PNG ke WebP lossy atau lossless?

Lossy untuk foto (jauh lebih kecil, kehilangan tak terlihat pada kualitas 80); lossless untuk grafis, teks, dan master di mana setiap piksel harus tepat. WebP mendukung keduanya. Kesalahan umum adalah mengonversi logo secara lossy, yang menambahkan artefak ke tepi tajam — pertahankan grafis lossless, konversikan foto lossy.

Apa Flag Kualitas cwebp?

Flag -q mengatur kualitas lossy pada skala 0 hingga 100 — 80 adalah default web (kehilangan tak terlihat, kira-kira seperempat byte dari kualitas 100). Gunakan -lossless alih-alih -q untuk grafis di mana setiap piksel harus tepat. Kualitas yang lebih tinggi berarti file yang lebih besar dengan pengembalian visual yang semakin berkurang; 80 adalah titik manis praktis untuk pengiriman web foto.

Apakah Mengubah PNG ke WebP Mempercepat Situs Saya?

Ya, terukur — WebP 25 hingga 35 persen lebih kecil dari PNG untuk konten yang sama, jadi halaman dengan banyak grafis memuat lebih cepat dan LCP meningkat. Penghematan ini menumpuk di seluruh halaman dengan lusinan ikon atau grafis. Sajikan WebP dengan fallback PNG agar peramban yang lebih tua tetap merender gambar, dan Anda mendapatkan kecepatan tanpa kehilangan kompatibilitas.

Image credits

• Perbandingan PNG-ke-WebP dan diagram batang ukuran — dibuat oleh penulis dari foto gaya ecommerce (Pexels #16675632, foto oleh Mikael Blomkvist) untuk menunjukkan penghematan PNG-ke-WebP terukur yang sebenarnya.