PNG vs JPEG vs WebP: ควรใช้รูปแบบไฟล์ภาพแบบไหน

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

คู่มือนี้เปรียบเทียบสี่รูปแบบที่คุณจะเจอบ่อยที่สุดสำหรับรูปถ่ายและกราฟิกบนเว็บ: JPEG, PNG, WebP และ AVIF ปิดท้ายด้วยคำแนะนำแบบเร็วสำหรับงานที่คนทำกันบ่อย: โลโก้ รูปสินค้า รูปถ่ายทั่วไป และภาพไดคัทพื้นหลังโปร่งใส

ตารางเปรียบเทียบ

รายละเอียดของแต่ละรูปแบบมาจากคู่มือประเภทไฟล์ภาพของ MDN แถวการรองรับมีความสำคัญกับเบราว์เซอร์น้อยลงกว่าเดิม: เบราว์เซอร์หลักทุกตัวในปัจจุบันแสดง WebP ได้ และ AVIF ก็รองรับในเวอร์ชันล่าสุดของทุกตัว ที่ยังสำคัญอยู่คือที่อื่นๆ เช่น ฟอร์มอัปโหลด มาร์เก็ตเพลส โปรแกรมอีเมล และซอฟต์แวร์เดสก์ท็อปรุ่นเก่า

lossy กับ lossless แบบเข้าใจง่าย

การบีบอัดแบบ lossless ลดขนาดไฟล์โดยไม่เปลี่ยนพิกเซลแม้แต่จุดเดียว เปิด PNG ขึ้นมาก็จะได้สิ่งที่บันทึกไว้ทุกประการ จึงเหมาะกับทุกอย่างที่มีขอบคมและสีเรียบ เช่น ข้อความ โลโก้ ลายเส้น หน้าตาโปรแกรม และภาพหน้าจอ ซึ่งความเบลอหรือขอบสีเพี้ยนจะเห็นได้ง่าย

การบีบอัดแบบ lossy ทิ้งรายละเอียดที่ตาไม่น่าจะสังเกตเห็น รูปถ่ายรับมือกับเรื่องนี้ได้ดีเพราะเต็มไปด้วยนอยส์และโทนสีที่ไล่ระดับ JPEG ทำงานแบบนี้ และที่การตั้งค่าคุณภาพที่เหมาะสม รูปถ่ายจะเล็กลงเหลือเพียงเศษเสี้ยวของขนาด PNG โดยมองไม่เห็นความต่าง

จึงได้กฎใช้งานจริงสองข้อ:

• ทุกครั้งที่บันทึกแบบ lossy จะสูญเสียเพิ่มอีกนิด เก็บไฟล์ต้นฉบับแบบ lossless ไว้ (ไฟล์จากกล้อง PNG หรือไฟล์งานของโปรแกรมแต่งรูป) แล้วส่งออกสำเนาแบบ lossy จากไฟล์นั้น แทนการแก้และบันทึก JPEG ไฟล์เดิมซ้ำ
• การบีบอัดแบบ lossy แย่ที่สุดกับขอบคม โลโก้ที่บันทึกเป็น JPEG จะมี "mosquito noise" เลอะๆ รอบตัวอักษร และภาพหน้าจอจะมีข้อความเบลอ

ความโปร่งใส: ตัวตัดสินสำหรับภาพไดคัท

JPEG ไม่มี alpha channel ไม่มีทางเก็บข้อมูลว่า "พิกเซลนี้มองทะลุได้" ใน JPEG เมื่อคุณลบพื้นหลังแล้วบันทึกเป็น JPEG พื้นที่ว่างจึงถูกเติมด้วยสีทึบ ส่วนใหญ่เป็นขาวหรือดำ ถ้าต้องการให้ภาพไดคัทวางทับเนื้อหาอื่นได้ ต้องใช้ PNG, WebP หรือ AVIF

PNG เก็บ alpha channel เต็มรูปแบบ: แต่ละพิกเซลมีค่าได้ตั้งแต่ทึบทั้งหมดไปจนถึงโปร่งใสทั้งหมด ซึ่งทำให้ขอบนุ่มอย่างผม ขนสัตว์ และเงาดูเป็นธรรมชาติ PNG ยังมีโหมดที่ง่ายกว่า คือกำหนดสีหนึ่งในพาเลตต์ให้โปร่งใส ซึ่งใช้ได้กับกราฟิกสีเรียบ แต่ให้ขอบหยักบนรูปถ่าย ถ้าอยากรู้รายละเอียด อ่าน alpha channel คืออะไร

WebP รองรับความโปร่งใสทั้งในโหมด lossless และ lossy เอกสาร WebP ของ Google ระบุว่า WebP แบบ lossless เพิ่มความโปร่งใสโดยใช้ไบต์มากขึ้นราว 22% และ WebP แบบ lossy ที่มีความโปร่งใสมักเล็กกว่า PNG ที่เทียบเท่ากันราว 3 เท่า WebP แบบ lossy จึงเป็นวิธีที่มีประสิทธิภาพที่สุดในการใช้รูปสินค้าพื้นหลังโปร่งใสบนเว็บไซต์ของคุณเอง

ขนาดไฟล์

สำหรับรูปเดียวกัน ลำดับคร่าวๆ จากใหญ่ไปเล็กคือ PNG, JPEG, WebP, AVIF แต่มีข้อแม้สำคัญ: PNG "ใหญ่" เฉพาะกับรูปถ่าย สำหรับกราฟิกสีเรียบที่มีสีน้อย PNG มักเล็กกว่า JPEG และคมกว่าเสมอ

ตัวเลขที่ Google เผยแพร่สำหรับ WebP เป็นเกณฑ์อ้างอิงที่มีประโยชน์:

• ไฟล์ WebP แบบ lossless เล็กกว่า PNG 26%
• ไฟล์ WebP แบบ lossy เล็กกว่า JPEG ที่เทียบกันได้ 25 ถึง 34% ที่คะแนนคุณภาพ SSIM เท่ากัน

MDN แนะนำว่าสำหรับภาพแรสเตอร์บนเว็บ ให้เลือก WebP หรือ AVIF ซึ่งโดยทั่วไปบีบอัดได้ดีกว่า PNG, JPEG และ GIF นอกจากนี้ AVIF ยังรองรับสี 10 และ 12 บิต ซึ่งช่วยเรื่องการไล่สีที่นุ่มนวล จุดอ่อนของมันคือการรองรับนอกเบราว์เซอร์: แอปและฟอร์มอัปโหลดจำนวนมากยังไม่รับ

ขนาดไฟล์สำคัญที่สุดเมื่อคุณแสดงรูปจำนวนมากให้ผู้เข้าชมจำนวนมาก สำหรับการอัปโหลดครั้งเดียวไปยังมาร์เก็ตเพลสที่บีบอัดทุกอย่างใหม่อยู่แล้ว รูปแบบไฟล์ที่มาร์เก็ตเพลสรับสำคัญกว่าจำนวนไบต์ที่ประหยัดได้

แต่ละรูปแบบใช้ได้ที่ไหนบ้าง

เบราว์เซอร์เป็นส่วนที่ง่าย มาร์เก็ตเพลสและแอปคือที่ที่รูปแบบไฟล์ถูกปฏิเสธ ต่อไปนี้คือรูปแบบที่รับตามเอกสารของแต่ละแพลตฟอร์ม ตรวจสอบเมื่อตุลาคม 2026:

มีสองเรื่องที่เห็นชัด อย่างแรก Amazon, Walmart และแคตตาล็อกของ Meta ไม่รับ WebP และ AVIF จึงควรใช้ JPEG หรือ PNG สำหรับอัปโหลดไปมาร์เก็ตเพลส อย่างที่สอง Etsy ระบุว่าไม่รองรับ PNG พื้นหลังโปร่งใส และส่วนที่โปร่งใสอาจแสดงเป็นสีดำ จึงควรวางภาพไดคัทบนพื้นสีก่อนอัปโหลดที่นั่น ดูขนาดพิกเซลที่แน่นอนของแต่ละแพลตฟอร์มได้ที่ ข้อมูลอ้างอิงขนาดรูปสินค้า

ควรใช้รูปแบบไหนกับงานที่พบบ่อย

โลโก้

ใช้ SVG ถ้ามีต้นฉบับแบบเวกเตอร์ MDN แนะนำ SVG สำหรับโลโก้และไอคอน ถ้าต้องการไฟล์แรสเตอร์ ใช้ PNG พื้นหลังโปร่งใส หรือ WebP แบบ lossless บนเว็บไซต์ของคุณเอง อย่าใช้ JPEG เด็ดขาด เพราะจะมีขอบฟุ้งและทำพื้นหลังโปร่งใสไม่ได้

รูปสินค้า

สำหรับรูปหลักบนมาร์เก็ตเพลส ใช้ JPEG บนพื้นหลังขาวล้วน บล็อกสำหรับผู้ขายของ Amazon เรียก JPEG ว่าเป็นรูปแบบที่แนะนำ และทุกมาร์เก็ตเพลสในตารางข้างบนรับ JPEG ส่งออกที่คุณภาพสูง (ราว 85 ถึง 92 ในโปรแกรมส่วนใหญ่) จากต้นฉบับแบบ lossless

ในร้านของคุณเอง อัปโหลด JPEG หรือ PNG คุณภาพสูง แล้วให้แพลตฟอร์มแปลงไฟล์เอง เช่น Shopify ระบุว่าบริการรูปภาพของตนส่งรูปแบบไฟล์ที่ดีที่สุดที่เบราว์เซอร์ของผู้เข้าชมแต่ละคนรองรับให้อัตโนมัติ

รูปถ่ายทั่วไป

JPEG เป็นค่าเริ่มต้นที่ปลอดภัยสำหรับการแชร์และอัปโหลด บนเว็บไซต์ที่คุณดูแลเอง WebP หรือ AVIF พร้อม JPEG สำรองให้ภาพที่ดูเหมือนกันโดยใช้ไบต์น้อยกว่า ถ้าโทรศัพท์ของคุณบันทึกเป็นไฟล์ HEIC ให้แปลงเป็น JPEG ก่อนอัปโหลดไปที่ที่ไม่ได้ระบุว่ารับ HEIC

ภาพไดคัทและรูปพื้นหลังโปร่งใส

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

ภาพหน้าจอและแผนภาพ

PNG หรือ WebP แบบ lossless รูปแบบ lossy ทำให้ข้อความเบลอ

ใช้รูปแบบใหม่พร้อมไฟล์สำรอง

ถ้าคุณมีเว็บไซต์ของตัวเอง ไม่จำเป็นต้องเลือกรูปแบบเดียว อีลิเมนต์ HTML picture ให้เบราว์เซอร์เลือกรูปแบบแรกที่มันเข้าใจ:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

เบราว์เซอร์ที่รองรับ AVIF จะใช้แหล่งแรก เบราว์เซอร์อื่นจะถอยไปใช้ WebP และเบราว์เซอร์รุ่นเก่ากว่านั้นใช้ PNG แพลตฟอร์มโฮสติ้งและ CDN สำหรับรูปภาพหลายเจ้าแปลงไฟล์ให้อัตโนมัติตามเฮดเดอร์ Accept ของเบราว์เซอร์ ซึ่งมักง่ายกว่าการสร้างทุกรูปแบบเอง

แปลงรูปแบบไฟล์โดยไม่มีเรื่องไม่คาดคิด

• PNG หรือ WebP เป็น JPEG: ส่วนที่โปร่งใสจะถูกเติมสีทับ เลือกสีที่จะเติมเอง (ส่วนใหญ่เป็นสีขาว) แทนการปล่อยให้โปรแกรมเลือก เพราะบางโปรแกรมตั้งค่าเริ่มต้นเป็นสีดำ
• JPEG เป็น PNG: ไฟล์ใหญ่ขึ้นแต่ไม่ได้ดีขึ้น คุณภาพที่เสียไปใน JPEG จะไม่กลับมา
• รูปแบบใดก็ได้เป็น WebP หรือ AVIF: ตรวจว่าความโปร่งใสยังอยู่และสีดูถูกต้อง ถ้ารูปจะแสดงบนเว็บ ให้แปลงเป็นโปรไฟล์สี sRGB ก่อน
• บันทึก JPEG ซ้ำ: การบันทึกที่คุณภาพต่ำลงแต่ละครั้งทำให้คุณภาพเสียสะสม ส่งออกครั้งเดียวจากต้นฉบับ

ทางเลือกที่เร็วกว่าสำหรับภาพไดคัท

ถ้าคุณลบพื้นหลังรูปทีละมากๆ removebackground.dev ส่งออกภาพไดคัทเป็น PNG หรือ WebP พื้นหลังโปร่งใส หรือเป็น JPG บนสีทึบสีใดก็ได้ คุณจึงได้ทั้ง JPEG พื้นขาวสำหรับมาร์เก็ตเพลสและ PNG พื้นหลังโปร่งใสสำหรับเว็บไซต์จากการอัปโหลดครั้งเดียว