PNG to WebP: วิธีแปลงและย่อขนาดรูปภาพ PNG

อัปเดตล่าสุด: June 27, 2026

PNG เป็นรูปแบบที่เหมาะสมสำหรับกราฟิกคมชัดและความโปร่งใส แต่ไฟล์ของมันมีขนาดใหญ่—โดยเฉพาะอย่างยิ่งสำหรับภาพถ่ายใด ๆ การแปลง PNG เป็น WebP จะช่วยรักษาความคมชัดและ alpha channel ในขณะที่ลดขนาดไบต์ลงอย่างมาก สิ่งที่ต้องระวังคือการเลือกใช้ WebP แบบ lossless เทียบกับ lossy อย่างถูกต้อง เพราะโหมดที่เหมาะสมขึ้นอยู่กับเนื้อหาของภาพ คู่มือนี้จะครอบคลุมทั้งสองแบบ พร้อมขนาดที่วัดค่าจริง

คำตอบสั้นๆ: ควรแปลง PNG เป็น WebP หรือไม่?

ใช่ สำหรับรูปภาพบนเว็บ — WebP สามารถคงความโปร่งใสและความคมชัดของ PNG ไว้ได้ในขนาดที่เล็กลงมาก เลือกโหมดตามเนื้อหา:

สำหรับรูปภาพเดียว ให้ใช้ Image Converter; สำหรับชุดรูปภาพ ให้ใช้ cwebp การตัดสินใจเกี่ยวกับรูปแบบเหล่านี้อยู่ใน image formats explained.

การแปลงจาก PNG เป็น WebP ประหยัดได้มากแค่ไหน?

ขึ้นอยู่กับว่าคุณเลือกโหมด WebP แบบใด เพราะ PNG เป็นแบบ lossless และการเปรียบเทียบนี้จึงไม่ใช่การเปรียบเทียบที่เท่าเทียมกัน

ข้อสรุปที่ได้จากตัวเลขเหล่านี้มีสองประการ ประการแรก WebP แบบ lossless สำหรับภาพถ่ายยังคงมีขนาดใหญ่ (568 KB) — เนื่องจาก encoding แบบ lossless ไม่สามารถกำจัดสัญญาณรบกวนในภาพออกไปได้ หากเนื้อหาเป็นรูปภาพ ควรใช้ WebP แบบ lossy ไม่ใช่แบบ lossless ส่วนประการที่สอง WebP แบบ lossless จะโดดเด่นบนกราฟิกแบน: สำหรับภาพหน้าจอและงานศิลปะ UI โดยทั่วไปจะมีขนาดเล็กกว่า PNG ที่มีพิกเซลเดียวกันถึง 20–30% ให้เลือกโหมดให้เหมาะสมกับเนื้อหา

แหล่งที่มาเดียวกันในทั้งสี่รูปแบบแสดงให้เห็นว่า PNG อยู่ในตำแหน่งใดเมื่อเทียบกับทางเลือกอื่น ๆ:

รูปภาพใดที่ควรคงเป็น PNG?

รูปภาพบางประเภทไม่ควรถูกแปลงเลย ควรเก็บ PNG ไว้เมื่อรูปภาพนั้นเป็นโลโก้หรือไอคอนที่สามารถใช้ SVG แทนได้ (เพราะ vector มีขนาดเล็กกว่าและคมชัดกว่า) หรือเมื่อคุณกำลังส่งมอบให้กับระบบที่ต้องการ PNG โดยเฉพาะ — เช่น ระบบงานพิมพ์บางส่วน, โปรแกรมแก้ไขรุ่นเก่าบางตัว, และเครื่องมือออกแบบส่วนใหญ่คาดหวัง PNG สำหรับไอคอนขนาดเล็กเพียงอันเดียว (ต่ำกว่า ~3 KB) การแปลงจึงไม่คุ้มค่ากับความซับซ้อนของ pipeline; ควรปล่อยให้เป็น PNG กฎการตัดสินใจนี้เหมือนกันใน image formats explained: ให้แปลง PNG เป็น WebP เมื่อขนาดไบต์มีความสำคัญและปลายทางคือเว็บเบราว์เซอร์ แต่ควรคง PNG ไว้เมื่อความเข้ากันได้หรือทางเลือกแบบ vector มีความสำคัญมากกว่า

วิธีที่ 1: ตัวแปลงในเบราว์เซอร์

สำหรับรูปภาพเดียว ให้ใช้ Imagic AI Image Converter: อัปโหลด PNG, เลือก WebP, เลือกแบบ lossless สำหรับกราฟิก หรือคุณภาพ ~80 สำหรับภาพถ่าย และดาวน์โหลด Squoosh เหมาะสำหรับการเปรียบเทียบแบบ lossless กับ lossy เคียงข้างกันก่อนที่คุณจะตัดสินใจ

วิธีที่ 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 คือแฟล็กสำคัญ—หากไม่มีสิ่งนี้, cwebp จะตั้งค่าเริ่มต้นเป็นแบบ lossy ซึ่งจะทำให้ขอบที่บางเบลอเสมอ ควรใช้ -lossless เสมอสำหรับกราฟิกและภาพหน้าจอ

วิธีที่ 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)

เมื่อที่ตั้งค่า lossless=True ค่า quality จะถูกละเลย; สำหรับแบบมีการสูญเสียข้อมูล (lossy) ให้กำหนดเป็นประมาณ 80 สำหรับภาพถ่าย

WebP เก็บความโปร่งใสของ PNG ได้หรือไม่?

ใช่ WebP รองรับ alpha channel แบบเต็มทั้งในโหมด lossy และ lossless ดังนั้น PNG ที่โปร่งใสจึงกลายเป็น WebP ที่โปร่งใสได้โดยไม่ต้องทำอะไรเพิ่มเติม นี่คือเหตุผลหลักในการแปลง UI assets และ product cutouts: คุณยังคงความโปร่งใสไว้ได้และสูญเสียขนาดของไฟล์ (bytes) น้อยลงมาก สำหรับรายละเอียดเกี่ยวกับความโปร่งใส โปรดดูที่ วิธีสร้างภาพโปร่งใส

ต้องแสดงผล WebP พร้อมด้วย PNG fallback อย่างไร?

การรองรับ WebP อยู่ที่ประมาณ 98% แต่ควรเก็บ PNG fallback ไว้สำหรับไคลเอนต์เก่าและอีเมล:

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

เบราว์เซอร์จะเลือกประเภทแรกที่รองรับ; ส่วน PNG <img> คือตัวสำรองสุดท้าย สำหรับกราฟิกที่คมชัด ให้กำหนด width/height เพื่อไม่ให้เลย์เอาต์เกิดการขยับ ดู WebP converter guide สำหรับรูปแบบ fallback ฉบับเต็ม รวมถึง AVIF

เมื่อไหร่ที่การแปลง PNG ไปเป็น WebP ไม่ใช่ตัวเลือกที่เหมาะสม?

• Email. ไคลเอนต์อีเมลจำนวนมากละเลย WebP ดังนั้นควรคงไว้ที่ PNG (หรือ JPEG) สำหรับการใช้งานทางอีเมล.
• เมื่อคุณต้องการ JPEG แทน. หาก PNG เป็นรูปถ่ายสำหรับแพลตฟอร์ม/ตลาดที่ยอมรับเฉพาะ JPEG ควรแปลงเป็น JPEG ไม่ใช่ WebP ดูได้ที่ WebP to JPG.
• เบราว์เซอร์ฝังตัวรุ่นเก่า ที่ไม่มี WebP support — ถึงแม้ว่าการใช้ fallback ด้วย <picture> จะครอบคลุมส่วนนี้อยู่แล้ว.
• เมื่อ PNG มีขนาดเล็กอยู่แล้ว. ไอคอนขนาด 2KB แทบจะไม่ได้รับประโยชน์จากการแปลงเลย ดังนั้นต้นทุนของกระบวนการจึงไม่คุ้มค่า.

ข้อผิดพลาดที่พบบ่อย

• การใช้ WebP แบบ lossy สำหรับกราฟิกคมชัด การบีบอัดแบบ Lossy จะทำให้ขอบบางและข้อความเบลอ ควรใช้ -lossless สำหรับภาพหน้าจอ (screenshots) และ UI
• การใช้ WebP แบบ lossless สำหรับรูปถ่าย ไฟล์จะมีขนาดใหญ่เพราะ lossless ไม่สามารถลดสัญญาณรบกวนของภาพถ่ายได้ ควรใช้ lossy
• ละเลย PNG fallback เบราว์เซอร์เก่าและอีเมลยังต้องการแท็ก <img ของ PNG
• ลืมปรับขนาดก่อน WebP ขนาด 4000px ก็ยังคงเป็นไฟล์ดาวน์โหลด 4000px ไม่ว่ารูปแบบจะเป็นอะไรก็ตาม
• การถือว่า PNG เป็นรูปแบบภาพถ่าย หากรูปภาพนั้นคือภาพถ่าย เดิมทีน่าจะมาจาก JPEG/RAW — ควรแปลงจากแหล่งที่มาที่ถูกต้อง

คำถามที่พบบ่อย

การแปลง PNG เป็น WebP ช่วยประหยัดพื้นที่ได้มากแค่ไหน?

สำหรับเนื้อหาภาพถ่าย จะมีขนาดเล็กลง 25 ถึง 35 เปอร์เซ็นต์โดยที่คุณภาพยังเท่าเดิม; สำหรับกราฟิกแบนที่มีความโปร่งใส มักจะช่วยได้มากกว่านั้น WebP รองรับทั้งโหมด lossy และ lossless รวมถึง alpha channel ด้วย ดังนั้นจึงครอบคลุมสิ่งที่ PNG ทำได้ในขนาดที่เล็กลง

ทุกไฟล์ PNG ควรถูกแปลงเป็น WebP หรือไม่?

สำหรับการส่งมอบผ่านเว็บ ควรทำครับ โดยมี PNG เป็นตัวสำรองสำหรับเบราว์เซอร์รุ่นเก่ามาก ให้เก็บ master ไฟล์ PNG ไว้เผื่อคุณต้องแก้ไขใหม่ เพราะ WebP lossy คือการบีบอัดแบบสร้าง (generation of compression) ให้ใช้ WebP ผ่านองค์ประกอบ <picture> พร้อมด้วย fallback ของ PNG

WebP รองรับความโปร่งใสหรือไม่?

รองรับครับ — WebP รองรับ alpha channel แบบเต็ม ทำให้ไฟล์ PNG ที่มีความโปร่งใสนั้นแปลงได้อย่างสะอาด นี่คือเหตุผลหลักที่ควรเลือกใช้ WebP แทน JPEG สำหรับกราฟิกที่มีความโปร่งใส ดู transparent images guide

การแปลงผ่าน command-line เป็นอย่างไร?

cwebp -q 80 input.png -o output.webp แฟล็ก -q ใช้กำหนดคุณภาพ (80 คือค่าเริ่มต้นของเว็บ) หากต้องการแบบ lossless ให้ใช้ -lossless สามารถทำเป็นชุดได้ด้วย shell loop หรือ ImageMagick ดู WebP converter guide

WebP รองรับภาพเคลื่อนไหวหรือไม่?

รองรับครับ — WebP รองรับรูปภาพเคลื่อนไหว ซึ่งมีขนาดเล็กกว่า GIF แบบเคลื่อนไหวที่มีความเท่าเทียมกัน สำหรับลูปสั้นๆ, animated WebP เป็นทางเลือกที่ทันสมัยแทน GIF ส่วนสำหรับแอนิเมชันที่ยาวขึ้น วิดีโอ (MP4) ยังคงมีขนาดเล็กลงและดีกว่า

ควรแปลง PNG เป็น WebP แบบ lossy หรือ lossless?

แบบ lossy สำหรับภาพถ่าย (เล็กมาก, การสูญเสียที่ไม่สามารถมองเห็นได้ที่คุณภาพ 80); แบบ lossless สำหรับกราฟิก ข้อความ และ master ที่ทุกพิกเซลต้องแม่นยำ WebP รองรับทั้งสองอย่าง ความผิดพลาดทั่วไปคือการแปลงโลโก้แบบ lossy ซึ่งจะเพิ่ม artifact ให้กับขอบที่คมชัด — ควรเก็บกราฟิกแบบ lossless และแปลงภาพถ่ายแบบ lossy

แฟล็กคุณภาพ cwebp คืออะไร?

แฟล็ก -q ใช้กำหนดคุณภาพแบบ lossy ในมาตราส่วน 0 ถึง 100 — 80 คือค่าเริ่มต้นของเว็บ (การสูญเสียที่มองไม่เห็น, ประมาณหนึ่งในสี่ของไบต์ของคุณภาพ 100) ให้ใช้ -lossless แทน -q สำหรับกราฟิกที่ทุกพิกเซลต้องแม่นยำ คุณภาพที่สูงขึ้นหมายถึงไฟล์ที่มีขนาดใหญ่ขึ้นพร้อมผลตอบแทนที่มองเห็นได้ลดลง; 80 คือจุดสมดุลในทางปฏิบัติสำหรับการส่งมอบภาพถ่ายบนเว็บ

การแปลง PNG เป็น WebP ช่วยให้เว็บไซต์ของฉันเร็วขึ้นหรือไม่?

ใช่ครับ, อย่างวัดผลได้ — WebP มีขนาดเล็กกว่า PNG อยู่ 25 ถึง 35 เปอร์เซ็นต์สำหรับเนื้อหาเดียวกัน ดังนั้นหน้าที่มีกราฟิกจำนวนมากจะโหลดได้เร็วกว่า และ LCP ก็จะดีขึ้น การประหยัดนี้จะสะสมไปทั่วทั้งหน้าที่มีไอคอนหรือกราฟิกหลายสิบรายการ ควรใช้ WebP พร้อมด้วย PNG fallback เพื่อให้เบราว์เซอร์รุ่นเก่ายังคงแสดงภาพได้ และคุณก็จะได้ความเร็วโดยไม่สูญเสียการรองรับ

เครดิตรูปภาพ

• แผนภูมิเปรียบเทียบ PNG-to-WebP และแผนภูมิแท่งขนาด — สร้างโดยผู้เขียนจากภาพถ่ายสไตล์อีคอมเมิร์ซ (Pexels #16675632, photo by Mikael Blomkvist) เพื่อแสดงการประหยัด PNG-to-WebP ที่วัดค่าได้จริง