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

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

ทำไมรูปแบบไฟล์จึงสำคัญ

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

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

JPEG คืออะไร

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

ผลในการใช้งานจริงมีดังนี้

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

จุดแข็งที่สุดของ JPEG คือความเข้ากันได้ แทบทุกอุปกรณ์ แอป อีเมล และเว็บไซต์เปิดไฟล์นี้ได้

PNG คืออะไร

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

PNG จึงเหมาะกับงานต่อไปนี้

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

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

WebP คืออะไร

WebP พัฒนาโดย Google เพื่อใช้บนเว็บ และทำงานได้ ทั้งสองแบบ คือแบบสูญเสียข้อมูลเหมือน JPEG และแบบไม่สูญเสียข้อมูลเหมือน PNG เอกสาร WebP ของ Google ระบุว่า WebP รองรับพื้นหลังโปร่งใสได้ในทั้งสองแบบ และรองรับภาพเคลื่อนไหวด้วย ปัจจุบัน IETF ได้จัดทำเอกสารอธิบายรูปแบบนี้เป็น RFC 9649 โดยใช้ชนิดสื่อ image/webp

Google รายงานว่า WebP แบบไม่สูญเสียข้อมูลมีขนาดเล็กกว่า PNG ราว 26% และ WebP แบบสูญเสียข้อมูลเล็กกว่า JPEG ที่คุณภาพเทียบเท่ากันราว 25–34% ส่วน MDN ก็ให้ตัวเลขเฉลี่ยใกล้เคียงกันสำหรับการเทียบกับ JPEG ตัวเลขเหล่านี้เป็นค่าเฉลี่ยจากผู้พัฒนารูปแบบ ไม่ได้รับประกันว่าทุกภาพจะได้ผลเท่านั้น จึงควรลองวัดกับภาพของเราเองด้วย

เรื่องความเข้ากันได้ไม่ใช่ปัญหาใหญ่เหมือนในอดีตแล้ว MDN ระบุว่า Chrome, Edge, Firefox, Opera และ Safari รองรับ WebP แต่จุดที่ยังติดขัดมักอยู่นอกเบราว์เซอร์ เช่น โปรแกรมบนคอมพิวเตอร์รุ่นเก่า ร้านพิมพ์ภาพ หรือแบบฟอร์มอัปโหลดบางแห่งที่รับเฉพาะ JPEG หรือ PNG

ตารางเปรียบเทียบสำหรับใช้งานจริง

ตารางเปรียบเทียบ JPEG, PNG และ WebP ด้านวิธีบีบอัด พื้นหลังโปร่งใส ภาพเคลื่อนไหว และงานที่เหมาะสม

สรุปความต่างของ JPEG, PNG และ WebP ในภาพเดียว

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

การบีบอัดแบบสูญเสียข้อมูลกับแบบไม่สูญเสียข้อมูล

สองคำนี้อธิบายความต่างของทั้งสามรูปแบบได้เกือบทั้งหมด

แบบไม่สูญเสียข้อมูล (lossless) เปรียบเหมือนการจัดกระเป๋าเดินทางให้เป็นระเบียบ ของทุกชิ้นที่ใส่เข้าไปจะออกมาครบเหมือนเดิม วิธีนี้ทำงานโดยหารูปแบบที่ซ้ำกัน เช่น แถวยาวของพิกเซลสีเดียวกัน แล้วบันทึกอย่างกระชับ จึงเหมาะกับงานที่พิกเซลต้องตรงเป๊ะ

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

หลักง่าย ๆ คือ ใช้แบบไม่สูญเสียข้อมูลกับไฟล์ที่ยังต้องแก้ต่อ หรือมีตัวหนังสือและขอบคม และใช้แบบสูญเสียข้อมูลกับภาพถ่ายฉบับสุดท้ายที่มีไว้ให้คนดูอย่างเดียว

พื้นหลังโปร่งใสและการรองรับ

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

อีกด้านหนึ่งของการตัดสินใจคือปลายทางรองรับอะไร

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

แนวทางเรื่องรูปภาพใน Google Search ระบุว่า JPEG, PNG และ WebP อยู่ในรูปแบบที่ Google รองรับ และแนะนำให้ตั้งชื่อไฟล์ที่สื่อความหมายและเขียนข้อความแทนภาพ (alt text) ให้ดี รูปแบบไฟล์ไม่ใช่ทางลัดในการจัดอันดับ หน้าเว็บที่โหลดเร็วและรูปที่อธิบายไว้ชัดเจนสำคัญกว่า

ทำไมขนาดไฟล์จึงแตกต่างกัน: ตัวอย่างใช้งานจริง

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

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

หากต้องการวัดผลด้วยตัวเอง ให้เริ่มจาก ภาพต้นฉบับเดียวกัน ทำสำเนาแยก ตั้งขนาดพิกเซลของทุกผลลัพธ์ให้เท่ากัน แล้วจดขนาดไฟล์เป็นไบต์ เปิดภาพในขนาดแสดงผลเดียวกันก่อนตัดสินใจ ทั้งนี้ค่าคุณภาพ 0.8 ของ JPEG และ WebP มาจากระบบเข้ารหัสคนละแบบ จึงไม่ได้รับประกันว่าภาพทั้งสองจะมีคุณภาพที่ตารับรู้เท่ากัน หากย่อภาพไปพร้อมกับแปลงไฟล์ ต้องบันทึกผลของการย่อขนาดแยกจากผลของรูปแบบไฟล์ด้วย

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

เมื่อไหร่ควรย่อขนาด บีบอัด หรือแปลงไฟล์

สามขั้นตอนนี้แก้ปัญหาคนละแบบ และลำดับก็มีผล

ย่อขนาดเมื่อรูปใหญ่กว่าขนาดที่จะแสดงจริง

ภาพจากมือถือที่กว้าง 4,000 พิกเซล แต่แสดงบนหน้าเว็บแค่ 800 พิกเซล เปลืองข้อมูลไปเกือบทั้งหมด ให้ลดจำนวนพิกเซลก่อนด้วยเครื่องมือปรับขนาดรูปภาพของ ARAIJA ซึ่งล็อกสัดส่วนภาพไว้ให้ รูปจึงไม่ยืดหรือบีบผิดรูป

บีบอัดเมื่อขนาดพิกเซลพอดีแล้ว แต่ไฟล์ยังหนัก

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

แปลงไฟล์เมื่อรูปแบบไม่เหมาะกับงาน

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

เครื่องมือทั้งสามทำงานในเบราว์เซอร์ของคุณ ภาพไม่ได้ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของ ARAIJA

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

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

ขั้นตอนใช้งานจริง

เตรียมภาพถ่ายสำหรับเว็บไซต์

  1. เก็บภาพต้นฉบับไว้โดยไม่แก้ไข
  2. ทำสำเนา แล้วย่อให้กว้างเท่ากับขนาดใหญ่ที่สุดที่จะแสดงจริง
  3. บันทึกเป็น WebP หรือ JPEG ถ้าระบบที่ใช้ต้องการ โดยตั้งคุณภาพราว 75–85
  4. เปิดเทียบกับต้นฉบับที่ซูม 100% ถ้ายังมองไม่เห็นความต่าง ลองลดค่าคุณภาพลงอีก
  5. ตั้งชื่อไฟล์ให้สื่อความหมาย และเขียนข้อความแทนภาพที่บอกว่าภาพแสดงอะไร

ส่งภาพทางอีเมลหรือแชต

  1. ย่อภาพที่ใหญ่มากก่อน เพราะหน้าจอส่วนใหญ่ไม่ต้องใช้ความละเอียดเต็มของกล้อง
  2. ใช้ JPEG เพื่อให้เปิดได้กว้างที่สุด
  3. เก็บต้นฉบับความละเอียดเต็มไว้ เผื่อผู้รับต้องนำไปพิมพ์

เตรียมโลโก้หรือไอคอน

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

แชร์ภาพหน้าจอ

  1. ใช้ PNG เพื่อให้ตัวหนังสือคมชัด
  2. ครอปเฉพาะส่วนที่ต้องการก่อนส่ง
  3. ถ้าไฟล์ยังใหญ่และจะใช้บนเว็บไซต์ ลองบันทึกเป็น WebP แบบไม่สูญเสียข้อมูล

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

JPG กับ JPEG ต่างกันไหม

ไม่ต่างกัน JPG เป็นนามสกุลไฟล์แบบสั้นของรูปแบบเดียวกัน

แปลง JPEG เป็น PNG แล้วภาพจะชัดขึ้นไหม

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

ทุกเว็บไซต์และทุกแอปเปิด WebP ได้หรือยัง

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

ควรตั้งค่าคุณภาพเท่าไร

ไม่มีตัวเลขเดียวที่ถูกต้องเสมอ สำหรับภาพถ่าย ช่วง 75–85 เป็นจุดเริ่มต้นที่นิยมใช้ จากนั้นให้ดูผลด้วยตาแล้วปรับตาม

รูปที่ไฟล์เล็กลงช่วยเรื่องอันดับการค้นหาไหม

หน้าเว็บที่เร็วขึ้นให้ประสบการณ์ที่ดีกว่า และแนวทางของ Google ก็สนับสนุนการจัดการรูปภาพที่ดี แต่ไม่มีรูปแบบไฟล์ใดเป็นทางลัดในการจัดอันดับ

สรุปและขั้นตอนถัดไป

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

พร้อมลองแล้วหรือยัง ลองย่อขนาดภาพหนึ่งภาพ บีบอัด แล้วเทียบขนาดก่อนและหลังได้ทันทีในเบราว์เซอร์

แหล่งอ้างอิง