Penukar WebP: Cara Tukar Imej ke WebP (Dengan Saiz Sebenar)

Dikemaskini kali terakhir: June 27, 2026

Menukar imej kepada WebP adalah salah satu kemenangan tunggal terpantas untuk prestasi web — WebP kira-kira 25–35% lebih kecil daripada JPEG dan jauh lebih kecil daripada PNG untuk kandungan yang sama, dengan ~98% sokongan pelayar. Panduan ini menunjukkan cara menukar imej ke WebP bersama saiz fail yang diukur yang boleh anda jangkakan, dan bagaimana mengekalkan sandaran (fallback) untuk pelayar yang masih memerlukan JPEG.

Jawapan ringkas: bagaimana nak tukar kepada WebP?

Gunakan arahan baris cwebp untuk kelajuan dan pemprosesan kelompok (batching), penukar pelayar untuk penggunaan sekali sahaja, atau Pillow untuk skrip. Pada foto tipikal, JPEG→WebP pada kualiti yang sepadan mengurangkan fail sebanyak ~30–45%.

Berapa banyak penjimatan sebenar WebP?

Diukur pada satu foto 1400×933, ditukar pada kualiti yang sepadan secara visual:

Untuk grafik PNG, WebP tanpa kehilangan biasanya 20–30% lebih kecil daripada PNG pada kualiti piksel yang sama — berguna untuk aset UI lutsinar. Sumber yang sama merentasi keempat-empat format menjadikan perbezaan itu jelas:

Perbandingan format penuh terdapat di image formats explained.

Patutkah anda memilih WebP atau AVIF?

Kedua-duanya lebih kecil daripada JPEG; AVIF adalah 20–30% lebih kecil daripada WebP tetapi menyulitkan (encodes) lebih perlahan dan mempunyai sokongan pelayar yang sedikit rendah. Jawapan praktikal untuk kebanyakan laman web: emit kedua-dua AVIF dan WebP, dengan sandaran JPEG, dan biarkan elemen <picture> menyediakan yang terbaik kepada setiap pelayar yang disokong. Jika anda hanya boleh menambah satu, WebP adalah pilihan yang lebih selamat kerana ia menyulitkan dengan pantas dan mempunyai sokongan yang lebih luas. Apabila anda bersedia untuk menambah AVIF, lihat AVIF vs WebP comparison.

Kaedah 1: Penukar pelayar (Browser converter)

Untuk satu imej, gunakan Imagic AI Image Converter: muat naik, pilih WebP, tetapkan kualiti sekitar 80 untuk foto (atau tanpa kehilangan untuk grafik), dan muat turun. Untuk kawalan kualiti/saiz masa nyata, Squoosh menunjukkan saiz output semasa anda menggerakkan slaid.

Kaedah 2: Baris arahan cwebp

cwebp ialah penyulit WebP rasmi, pantas dan boleh diatur skrip.

## WebP Lossy dari JPEG/PNG, kualiti 80
cwebp -q 80 input.jpg -o output.webp

## WebP Tanpa Kehilangan (terbaik untuk grafik, tangkapan skrin, teks tajam)
cwebp -lossless input.png -o output.webp

## Saiz semula kepada lebar 1600px sambil menukar
cwebp -q 80 -resize 1600 0 input.jpg -o output.webp

## Seluruh folder, secara selari
mkdir -p out
ls *.jpg | xargs -P 4 -I {} cwebp -q 80 {} -o out/{}.webp

Untuk menyahkod semula, dwebp membalikkannya; magick ImageMagick juga membaca dan menulis WebP jika anda sudah menggunakannya. Lihat batch resize guide untuk corak folder selari.

Kaedah 3: Python (Pillow)

Untuk langkah binaan atau pelayan, Pillow menukar dan membenarkan anda mengawal kualiti secara programatik:

from PIL import Image
from pathlib import Path

def to_webp(src: Path, dest: Path, quality: int = 80, lossless: bool = False):
    with Image.open(src) as img:
        img.save(dest, "WebP", quality=quality, lossless=lossless, method=6)

for f in Path("images").glob("*"):
    if f.suffix.lower() in (".jpg", ".jpeg", ".png"):
        to_webp(f, Path("out") / f"{f.stem}.webp", quality=80)

method=6 adalah usaha penyulitan yang paling perlahan dan terbaik untuk mampatan — sesuai apabila anda menyulitkan sekali semasa muat naik, bukan pada setiap permintaan. Untuk grafik tanpa kehilangan, hantar lossless=True.

Bagaimana cara menghidangkan WebP dengan sandaran (fallback)?

Sokongan WebP adalah ~98%, tetapi 2% yang tinggal (Safari lama, beberapa pelayar tertanam) memerlukan sandaran JPEG/PNG. Gunakan elemen <picture>:

<picture>
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Pelayar akan memilih jenis pertama yang disokong. Kekalkan <img> sebenar dengan src JPEG sebagai sandaran akhir supaya tiada apa-apa yang dipaparkan kosong. Jika anda juga menghasilkan AVIF, tambahkan ia sebagai <source> pertama — lihat AVIF vs WebP comparison.

Apakah tetapan kualiti dan kaedah yang patut digunakan?

Untuk foto WebP tanpa kehilangan (lossy), kualiti 75–80 adalah titik ideal — fail kecil tanpa kehilangan kelihatan pada jarak pandangan normal. Di bawah 70, gradien licin dan tona kulit mula menunjukkan artifak; di atas 85 anda membelanjakan bait yang tidak dapat dilihat oleh mata. Bendera -m (kaedah) menukar masa penyulitan untuk fail yang lebih kecil: -m 0 adalah terpantas, -m 6 paling perlahan tetapi menghasilkan output terkecil. Gunakan -m 4 untuk kerja interaktif dan -m 6 untuk penyulitan kelompok sekali sahaja di mana kelajuan tidak penting.

Untuk WebP tanpa kehilangan (grafik, tangkapan skrin, teks tajam), -lossless -m 6 memberikan nisbah terbaik; WebP tanpa kehilangan mengatasi PNG kira-kira 20–30% pada kandungan yang sama. Jika grafik mempunyai sangat sedikit warna, cuba kurangkan palet warna terlebih dahulu — warna yang lebih sedikit mampat dengan dramatik lebih baik dalam mana-mana format tanpa kehilangan. Perincian penyelarasan ini selaras dengan panduan yang lebih luas dalam image compression deep dive.

Bila WebP adalah pilihan yang salah?

• E-mel. Banyak klien e-mel mengabaikan WebP. Gunakan JPEG/PNG untuk e-mel.
• Pelayar tertanam lama (Smart TV lama, kiosk) yang mendahului sokongan WebP.
• Feed rakan kongsi/pasaran yang hanya menerima JPEG.
• Apabila rantaian alatan tidak dapat menghasilkannya. Jika CMS anda tidak boleh menyediakan <picture>, paip hanya JPEG lebih mudah daripada melawannya.

Untuk kes-kes itu, format guide meliputi alternatif yang betul.

Kesilapan biasa

• Menukar kemudian tidak mengubah saiz (resizing). WebP 4000px masih muat turun 4000px. Ubah saiz dahulu.
• Menggunakan WebP tanpa kehilangan untuk grafik tajam. WebP tanpa kehilangan meluruskannya tepi nipis seperti JPEG; gunakan -lossless untuk tangkapan skrin dan teks.
• Menghidangkan WebP tanpa sandaran (fallback). Pelayar lama tidak memaparkan apa-apa tanpa sandaran <img> JPEG.
• Membandingkan pada nombor kualiti yang sama. JPEG q85 ≈ WebP q80 ≈ AVIF q68 dalam kualiti yang dirasakan; bandingkan secara visual, bukan mengikut nombor.
• Menyulitkan berlebihan pada setiap permintaan. Sulitkan sekali semasa muat naik; penyulitan WebP lebih perlahan daripada JPEG.

Soalan lazim (Frequently asked questions)

Berapa banyak penjimatan sebenar WebP?

25 hingga 35 peratus lebih kecil daripada JPEG pada kualiti yang sama, dan selalunya lebih daripada PNG untuk grafik dengan ketelusan. Penjimatan adalah sebab untuk menukar bagi penghantaran web. Simpan asal sebagai master; eksport WebP untuk penghantaran.

Patutkah saya memilih WebP atau AVIF?

WebP sebagai lalai yang selamat (sokongan pelayar universal, penyulitan mudah); AVIF untuk fail terkecil pada pelayar moden (kira-kira 50 peratus lebih kecil daripada JPEG, tetapi lebih perlahan untuk disulitkan dan terdapat jurang pada pelayar lama). Hantar AVIF dengan sandaran WebP melalui elemen <picture>.

Apakah penukaran baris arahan?

cwebp -q 80 input.jpg -o output.webp. Bendera -q menetapkan kualiti (80 adalah lalai web). Kelompokkan dengan gelung shell atau ImageMagick. Untuk tanpa kehilangan, gunakan -lossless.

Adakah setiap pelayar menyokong WebP?

Semua pelayar semasa menyokongnya. Pelayar yang sangat lama (IE lama) tidak, itulah sebab anda menghidangkan WebP dengan sandaran JPEG atau PNG melalui elemen <picture>. Sandaran itu meliputi jurang kecil yang tinggal.

Bagaimana saya menukar ke WebP secara kelompok (batch)?

Gunakan gelung shell dengan cwebp (for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done), ImageMagick, atau skrip Python (Pillow). Baris arahan mengendalikan ribuan tanpa had per fail dan tanpa pendaftaran, itulah sebabnya ia adalah laluan untuk katalog. Lihat batch processing guide.

Berapa banyak WebP menjimatkan?

25 hingga 35 peratus lebih kecil daripada JPEG pada kualiti yang sama, dan selalunya lebih daripada PNG untuk grafik dengan ketelusan. Penjimatan adalah sebab untuk menukar bagi penghantaran web. Simpan asal sebagai master; eksport WebP untuk penghantaran, dan sediakan sandaran untuk pelayar lama.

Adakah WebP tanpa kehilangan atau tanpa kehilangan (lossy or lossless)?

Kedua-duanya — WebP menyokong mod tanpa kehilangan (lebih kecil, untuk foto) dan mod tanpa kehilangan (piksel tepat, untuk grafik dan master). Pilih mengikut kandungan: tanpa kehilangan untuk foto, tanpa kehilangan untuk grafik dengan tepi tajam atau teks di mana artifak akan kelihatan. Sokongan dwi ini adalah salah satu sebab WebP menggantikan JPEG dan PNG untuk penghantaran web.

Apakah arahan cwebp?

cwebp -q 80 input.jpg -o output.webp menukar JPEG kepada WebP pada kualiti 80. Bendera -q menetapkan kualiti; tambahkan -lossless untuk output tanpa kehilangan, dan -resize W 0 untuk mengubah saiz kepada lebar sasaran. Kelompokkan dengan gelung shell: for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done. Ia adalah laluan percuma tanpa had untuk kelompok.

Kredit Imej

• Carta bar dan sebelum-selepas JPEG/WebP — dijana oleh penulis daripada foto gaya e-dagang (Pexels #16675632, foto oleh Mikael Blomkvist) untuk menunjukkan penjimatan JPEG-ke-WebP yang diukur sebenar.