PNG vs JPG vs WebP — ควรใช้ฟอร์แมตภาพไหนดี
ภาพเกือบทั้งหมดบนเว็บเป็นหนึ่งในสามฟอร์แมตนี้ และแต่ละแบบต้องแลกกับบางสิ่งที่ต่างกันเพื่อให้ได้มา JPG บีบอัดภาพถ่ายอย่างหนักด้วยการทิ้งรายละเอียดที่ตาคนไม่น่าจะสังเกตเห็น PNG เก็บทุกพิกเซลไว้ตรงตามเดิมทุกประการและเพิ่มความโปร่งใสเข้ามา ส่วน WebP เป็นฟอร์แมตใหม่กว่าของ Google ที่พยายามทำทั้งสองหน้าที่ ทั้งแบบสูญเสียคุณภาพและไม่สูญเสียคุณภาพ พร้อมความโปร่งใส ในไฟล์ที่เล็กกว่าฟอร์แมตเก่าทั้งสองแบบมักจะทำได้ การเลือกผิดฟอร์แมตไม่ค่อยร้ายแรงถึงขั้นเสียหาย แต่ก็หมายถึงหน้าเว็บโหลดช้าเกินจำเป็น หรือภาพเบลอเป็นบล็อกที่มองเห็นได้ชัด คู่มือนี้จะอธิบายว่าแต่ละฟอร์แมตทำงานอย่างไรจริงๆ เบื้องหลัง HEIC (ฟอร์แมตที่ iPhone ใช้บันทึกภาพถ่าย) เข้ามาเกี่ยวข้องตรงไหน และวิธีแปลงหรือบีบอัดไฟล์เหล่านี้โดยไม่ต้องอัปโหลดไฟล์ไปที่ไหนเลย
JPG คืออะไร และควรใช้เมื่อไหร่
JPG (เขียนว่า JPEG ก็ได้) ใช้การบีบอัดแบบสูญเสียคุณภาพ (lossy) คือวิเคราะห์ภาพเป็นบล็อกๆ ทิ้งรายละเอียดปลีกย่อยและความแปรผันของสีที่ตาคนไม่ค่อยสังเกตเห็น แล้วประกอบภาพโดยประมาณกลับคืนตอนถอดรหัส ข้อแลกเปลี่ยนนี้คือสาเหตุที่ทำให้ JPG มีขนาดเล็ก ภาพถ่ายที่ถ้าไม่บีบอัดจะมีขนาดหลายเมกะไบต์ มักบีบอัดเหลือเพียงไม่กี่ร้อยกิโลไบต์ที่ระดับคุณภาพซึ่งคนส่วนใหญ่แยกไม่ออกจากต้นฉบับ JPG ไม่มีช่องความโปร่งใส จึงแสดงผลบนพื้นหลังทึบเสมอ และไม่เหมาะกับภาพหน้าจอ ภาพลายเส้น หรือข้อความ ซึ่งจะเห็นความเบลอรอบขอบคมชัดได้ชัดเจน ใช้ JPG สำหรับภาพถ่ายและภาพที่คล้ายภาพถ่าย เช่น ภาพสินค้า ภาพบุคคล ภาพทิวทัศน์ ที่ขนาดไฟล์สำคัญและคาดว่าจะมีพื้นหลังอยู่แล้ว
PNG คืออะไร และควรใช้เมื่อไหร่
PNG ใช้การบีบอัดแบบไม่สูญเสียคุณภาพ (lossless) คือทุกพิกเซลที่คุณบันทึกไว้จะได้กลับคืนมาตรงเดิมทุกประการ ไม่มีการประมาณค่าใดๆ นี่ทำให้ PNG เป็นตัวเลือกที่เหมาะสมสำหรับภาพหน้าจอ แบบร่าง UI โลโก้ แผนภาพ และภาพใดๆ ที่มีข้อความคมชัดหรือขอบแข็ง ซึ่งความผิดเพี้ยนจากการบีบอัดแบบสูญเสียคุณภาพจะเห็นได้ทันทีเป็นความเบลอหรือสัญญาณรบกวนเป็นบล็อกรอบขอบภาพ PNG ยังรองรับช่องอัลฟา (ความโปร่งใส) เต็มรูปแบบ ทำให้โลโก้หรือไอคอนมีพื้นหลังที่โปร่งใสได้จริง แทนที่จะมีกล่องสีขาวหรือสีอื่นล้อมรอบ ต้นทุนที่ต้องแลกคือขนาดไฟล์ เพราะ PNG ทิ้งรายละเอียดไม่ได้ ภาพถ่ายที่บันทึกเป็น PNG มักมีขนาดใหญ่กว่าภาพเดียวกันที่บันทึกเป็น JPG หลายเท่า โดยไม่ได้คุณภาพที่มองเห็นได้เพิ่มขึ้นเลยสำหรับภาพถ่ายทั่วไป
WebP คืออะไร และแตกต่างจาก JPG กับ PNG อย่างไร
WebP เป็นฟอร์แมตใหม่กว่าที่สร้างขึ้นมาเพื่อแทนที่ฟอร์แมตเก่าทั้งสองแบบพร้อมกัน มันรองรับทั้งการบีบอัดแบบสูญเสียและไม่สูญเสียคุณภาพในไฟล์รูปแบบเดียวกัน บวกกับช่องความโปร่งใสเต็มรูปแบบเหมือน PNG ดังนั้นฟอร์แมตเดียวจึงจัดการได้ทั้งภาพถ่ายที่บีบอัด ภาพหน้าจอแบบไม่สูญเสียคุณภาพ และโลโก้แบบโปร่งใส ในทางปฏิบัติ ไฟล์ WebP มักมีขนาดเล็กกว่า JPG ที่คุณภาพเท่ากันประมาณ 25-35% และ WebP แบบ lossless ก็มักเล็กกว่าภาพเดียวกันที่บันทึกเป็น PNG ด้วยเช่นกัน การรองรับของเบราว์เซอร์แทบจะเป็นสากลมาตั้งแต่ต้นทศวรรษ 2020 (เบราว์เซอร์หลักทุกตัวแสดงผลได้เองโดยตรง) ซึ่งขจัดข้อคัดค้านหลักในอดีตต่อการใช้งานมันไปแล้ว สิ่งที่ยังเป็นปัญหาอยู่คือความเข้ากันได้นอกเบราว์เซอร์ โปรแกรมแก้ไขภาพรุ่นเก่า ปลั๊กอิน CMS แบบเก่า และเวิร์กโฟลว์งานพิมพ์หรืองานออกแบบบางแห่งยังเปิดไฟล์ WebP โดยตรงไม่ได้ จึงควรตรวจสอบเครื่องมือที่คุณใช้อยู่จริงก่อนจะเปลี่ยนมาใช้ WebP เป็นมาตรฐานทุกที่
HEIC เข้ามาเกี่ยวข้องตรงไหน และควรแปลงมันไหม
HEIC เป็นฟอร์แมตที่ iPhone ใช้เป็นค่าเริ่มต้นสำหรับภาพถ่ายมาตั้งแต่ iOS 11 มันบีบอัดได้มีประสิทธิภาพกว่า JPG ที่คุณภาพใกล้เคียงกัน จึงเป็นเหตุผลที่ใช้พื้นที่บนโทรศัพท์น้อยกว่า ปัญหาอยู่ที่ความเข้ากันได้ ไม่ใช่คุณภาพ ซอฟต์แวร์ Windows แอป Android รุ่นเก่า แบบฟอร์มบนเว็บ และโปรแกรมอีเมลจำนวนมากเปิดไฟล์ .heic ไม่ได้เลยหรือจัดการได้ไม่ราบรื่น ถ้าคุณกำลังจะแชร์ภาพไปยังที่ที่อาจไม่รองรับ HEIC เช่น อัปโหลดขึ้นเว็บไซต์ ส่งอีเมลให้คนที่ใช้อุปกรณ์ไม่ทราบรุ่น หรือโพสต์ลงซอฟต์แวร์รุ่นเก่า ให้แปลงเป็น JPG ก่อนเพื่อความเข้ากันได้ที่กว้างที่สุด หรือแปลงเป็น PNG เฉพาะเมื่อต้องการคุณภาพแบบไม่สูญเสียหรือความโปร่งใสโดยเฉพาะ (ซึ่งพบได้น้อยสำหรับภาพถ่ายจากกล้อง) เครื่องมือแปลง HEIC เป็น JPG ของ LocalMedia จัดการการแปลงนี้ทั้งหมดในเบราว์เซอร์ของคุณ ภาพจึงถูกอ่านจากอุปกรณ์ของคุณ แปลง แล้วบันทึกกลับโดยไม่ถูกอัปโหลดไปที่ไหนเลย
ควรเลือกฟอร์แมตไหนกันแน่ ตามลักษณะการใช้งาน
การตัดสินใจมักขึ้นอยู่กับว่าภาพนั้นมีเนื้อหาอะไรและจะนำไปใช้ที่ไหน สำหรับภาพถ่ายหรือภาพที่สมจริงคล้ายภาพถ่ายที่จะใช้บนเว็บ ให้ใช้ WebP หากแพลตฟอร์มของคุณรองรับ หรือใช้ JPG ถ้าไม่รองรับ สำหรับภาพหน้าจอ เอกสารสแกน แผนภาพ หรือสิ่งใดก็ตามที่มีข้อความ ให้ใช้ PNG (หรือ WebP แบบ lossless) เพื่อให้ขอบภาพยังคมชัด สำหรับโลโก้ ไอคอน หรือกราฟิกที่ต้องการพื้นหลังโปร่งใส ให้ใช้ PNG หรือ WebP ห้ามใช้ JPG เด็ดขาด เพราะมันแสดงความโปร่งใสไม่ได้เลย สำหรับความเข้ากันได้สูงสุดกับซอฟต์แวร์รุ่นเก่า โปรแกรมอีเมล หรือเวิร์กโฟลว์งานพิมพ์ JPG และ PNG ยังคงเป็นตัวเลือกสากลที่ปลอดภัยที่สุด เพราะการรองรับ WebP นอกเบราว์เซอร์รุ่นใหม่ยังไม่แน่นอน
ทำไมการบันทึก JPG ซ้ำๆ ถึงทำให้คุณภาพแย่ลง
เพราะการบีบอัดของ JPG เป็นแบบสูญเสียคุณภาพ ทุกครั้งที่คุณเปิด JPG แก้ไข แล้วบันทึกเป็น JPG อีกครั้ง ฟอร์แมตจะวิเคราะห์และทิ้งรายละเอียดซ้ำอีกครั้งทับกับที่ทิ้งไปแล้วในครั้งแรก แก้ไขและบันทึกซ้ำไปสักสองสามครั้ง ความเสียหายที่สะสมจะเริ่มเห็นได้ชัดเป็นความเบลอ สีเป็นแถบ หรือความผิดเพี้ยนแบบบล็อกรอบขอบภาพ ปัญหานี้มักถูกเรียกว่าgeneration loss เรื่องนี้ไม่เกิดขึ้นกับ PNG เพราะการบีบอัดแบบ lossless ไม่ทิ้งรายละเอียดเลยไม่ว่าจะบันทึกซ้ำกี่ครั้งก็ตาม ถ้าคุณต้องแก้ไขภาพหลายครั้ง ให้เก็บไฟล์ต้นฉบับเป็น PNG หรือฟอร์แมต lossless อื่นไว้ระหว่างแก้ไข แล้วส่งออกเป็น JPG เพียงครั้งเดียวตอนท้ายสุดสำหรับการส่งมอบขั้นสุดท้าย
จะแปลงหรือบีบอัดภาพโดยไม่ต้องอัปโหลดได้อย่างไร
การแปลงไฟล์ระหว่าง JPG, PNG, WebP และ HEIC หรือการลดขนาดไฟล์ที่ใหญ่เกินไป ไม่จำเป็นต้องส่งภาพไปยังเซิร์ฟเวอร์เลย เบราว์เซอร์สามารถถอดรหัสและเข้ารหัสฟอร์แมตภาพทั่วไปส่วนใหญ่ได้ด้วยตัวเอง เครื่องมือแปลงฟอร์แมตภาพ ของ LocalMedia สลับระหว่าง JPG, PNG และ WebP ได้โดยตรงในแท็บเบราว์เซอร์ของคุณ และเครื่องมือบีบอัดภาพลดขนาดไฟล์ด้วยการปรับคุณภาพหรือขนาดภาพ ทั้งสองอย่างนี้ไฟล์ไม่เคยออกจากอุปกรณ์ของคุณเลย คุณสามารถตรวจสอบได้เอง เปิด DevTools ของเบราว์เซอร์ (กด F12) ไปที่แท็บ Network แล้วสังเกตคำขออัปโหลดขณะที่คุณแปลงหรือบีบอัดไฟล์ เครื่องมือที่ทำงานในเครื่องจริงๆ จะไม่ส่งอะไรออกไปเลย
เครื่องมือที่เกี่ยวข้อง
คำถามที่พบบ่อย
- PNG หรือ JPG ดีกว่ากัน
- ไม่มีตัวไหนดีกว่ากันแบบสมบูรณ์ เพราะสร้างมาสำหรับเนื้อหาต่างกัน การบีบอัดแบบสูญเสียคุณภาพของ JPG ทำให้มันเล็กกว่ามากสำหรับภาพถ่าย ในขณะที่การบีบอัดแบบไม่สูญเสียคุณภาพของ PNG รักษาภาพหน้าจอ ข้อความ และกราฟิกให้ปราศจากความเบลอ และเพิ่มการรองรับความโปร่งใสที่ JPG ไม่มีเลย ใช้ JPG สำหรับภาพถ่าย ใช้ PNG สำหรับสิ่งที่มีขอบคมชัด ข้อความ หรือพื้นหลังโปร่งใส
- WebP ดีกว่า JPG หรือไม่
- ในแง่ขนาดไฟล์และคุณภาพ โดยทั่วไปแล้วดีกว่า WebP มักให้ไฟล์เล็กกว่า JPG ที่คุณภาพเท่ากันประมาณ 25-35% และยังรองรับความโปร่งใสและการบีบอัดแบบ lossless ซึ่ง JPG ทำไม่ได้เลย เหตุผลเดียวที่ยังควรเลือก JPG แทน WebP คือความเข้ากันได้กับซอฟต์แวร์รุ่นเก่าหรือเวิร์กโฟลว์ที่เปิดไฟล์ WebP ไม่ได้
- WebP รองรับความโปร่งใสไหม
- รองรับ WebP มีช่องอัลฟาความโปร่งใสเต็มรูปแบบทั้งในโหมด lossy และ lossless จึงสามารถใช้แทน PNG สำหรับโลโก้และไอคอนแบบโปร่งใสได้ และมักให้ไฟล์ที่เล็กกว่าด้วย
- ควรแปลง HEIC เป็น JPG หรือ PNG
- แปลงเป็น JPG ในเกือบทุกกรณี เพราะมีขนาดเล็กกว่าและเข้ากันได้เป็นสากล ซึ่งตรงกับสิ่งที่ภาพถ่ายจากกล้องต้องการ แปลงเป็น PNG เฉพาะเมื่อต้องการคุณภาพแบบ lossless หรือพื้นหลังโปร่งใสโดยเฉพาะ ซึ่งพบได้ไม่บ่อยสำหรับภาพถ่ายทั่วไป
- ฟอร์แมตไหนให้ไฟล์เล็กที่สุด
- สำหรับภาพถ่าย WebP แบบ lossy มักเล็กที่สุด ตามด้วย JPG ส่วน PNG มีขนาดใหญ่กว่ามาก สำหรับภาพหน้าจอ ข้อความ หรือภาพลายเส้น WebP แบบ lossless มักเล็กที่สุด ตามด้วย PNG เพราะการบีบอัดแบบสูญเสียคุณภาพของ JPG ไม่เหมาะกับขอบคมชัดไม่ว่าขนาดไฟล์จะเป็นอย่างไร
- แปลงระหว่าง PNG, JPG และ WebP โดยไม่เสียคุณภาพได้ไหม
- การแปลงจากฟอร์แมต lossless (PNG) ไปเป็นการตั้งค่า lossless อีกแบบจะรักษาคุณภาพไว้ตรงเดิมทุกประการ ส่วนการแปลงไปเป็นหรือระหว่างฟอร์แมตแบบ lossy (JPG, WebP แบบ lossy) จะบีบอัดภาพใหม่เสมอ ทำให้เสียคุณภาพไปบ้างในทุกครั้งที่แปลง ควรเก็บไฟล์ต้นฉบับแบบ lossless ไว้หากคาดว่าจะต้องแปลงหรือแก้ไขภาพมากกว่าหนึ่งครั้ง