JPG กับ PNG กับ WebP กับ AVIF — คุณควรใช้รูปแบบภาพใด

JPG (JPEG) คือรูปแบบที่พ่อแม่ของคุณใช้โดยไม่รู้ชื่อ สร้างขึ้นในปี 1992 และเป็นรูปแบบภาพถ่ายเริ่มต้นมาเป็นเวลาสามทศวรรษแล้ว ทุกอุปกรณ์ ทุกเบราว์เซอร์ ทุกแอปบนโลกเปิด JPG มันใช้การบีบอัดข้อมูลแบบสูญเสีย — หมายความว่ามันจะทิ้งข้อมูลภาพบางส่วนออกไปเพื่อลดขนาดไฟล์ ที่การตั้งค่าคุณภาพสูง (85-95%) ความแตกต่างจะมองไม่เห็นสำหรับคนส่วนใหญ่ เมื่อใช้คุณภาพต่ำ คุณจะได้สิ่งที่มีลักษณะ "บล็อก" อยู่รอบๆ ขอบ

PNG คือรูปแบบที่นักออกแบบชื่นชอบ มันใช้การบีบอัดแบบไม่สูญเสียข้อมูล — ไม่มีข้อมูลสูญหายเลย เรื่องนี้สำคัญด้วยเหตุผลสองประการ: การรองรับความโปร่งใส (JPG ไม่สามารถทำพื้นหลังแบบโปร่งใสได้) และความคมชัดของข้อความ ภาพหน้าจอ โลโก้ กราฟิกพร้อมข้อความ อะไรก็ได้ที่มีเส้นคมชัด PNG จัดการสิ่งเหล่านี้ได้อย่างสมบูรณ์แบบ ข้อเสียคือขนาดไฟล์: PNG สามารถมีขนาดใหญ่กว่า JPG ของรูปภาพเดียวกันได้ 5-10 เท่า

เว็บพี คำตอบของ Google สำหรับ "จะเกิดอะไรขึ้นถ้า JPG และ PNG มีลูก" รองรับการบีบอัดทั้งแบบสูญเสียและไม่สูญเสียข้อมูล จัดการความโปร่งใส และโดยทั่วไปจะสร้างไฟล์ที่เล็กกว่า JPG ที่เทียบเท่ากัน 25-35% การรองรับเบราว์เซอร์เพิ่มขึ้นถึง 95%+ ในปี 2023 ดังนั้นข้อแก้ตัวความเข้ากันได้แบบเก่าจึงหมดไป หากคุณกำลังแสดงรูปภาพบนเว็บ WebP คือตัวเลือกที่ใช้งานได้จริงในตอนนี้

AVIF เป็นคู่แข่งรายใหม่ล่าสุดที่ใช้ตัวแปลงสัญญาณวิดีโอ AV1 ด้วยประสิทธิภาพการบีบอัดที่แท้จริง มันเหนือกว่าทุกอย่าง — เล็กกว่า JPG ประมาณ 50% ที่คุณภาพภาพเท่าเดิม รองรับความโปร่งใส, HDR และขอบเขตสีที่กว้าง ข้อเสีย? การเข้ารหัสช้า (ช้ากว่า WebP อย่างเห็นได้ชัด) และการรองรับเบราว์เซอร์แม้จะดี แต่ก็ยังไม่เป็นสากล Safari เพิ่งเพิ่มการสนับสนุนเต็มรูปแบบเมื่อเร็ว ๆ นี้

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

ตัวอย่างจากโลกแห่งความเป็นจริง: ภาพถ่ายแนวนอนขนาด 1920x1080 อาจมีขนาด 450 KB ในรูปแบบ JPG คุณภาพ 90, 320 KB ในรูปแบบ WebP และ 200 KB ในรูปแบบ AVIF คุณภาพของภาพที่เหมือนกันทั้งสามแบบ — ความแตกต่างอยู่ที่ขนาดไฟล์ล้วนๆ สำหรับเว็บไซต์ที่โหลดรูปภาพ 20 รูป นั่นคือความแตกต่างระหว่างข้อมูลรูปภาพ 9 MB และ 4 MB ผู้ใช้ของคุณบนการเชื่อมต่อ 4G จะสังเกตเห็น

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

ห้ามใช้ JPG สำหรับภาพหน้าจอที่มีข้อความ โลโก้ หรือการจำลอง UI การบีบอัด JPG แบบ Lossy จะสร้างสิ่งที่มองเห็นได้รอบๆ การเปลี่ยนสีที่คมชัด ข้อความจะดูพร่ามัว เส้นตรงจะเป็นคลื่น นั่นไม่ใช่ปัญหาการตั้งค่าคุณภาพ มันเป็นข้อจำกัดพื้นฐานของวิธีการทำงานของการบีบอัด JPG

หากคุณเป็นผู้ใช้ iPhone คุณอาจสงสัยว่า HEIC เหมาะกับที่ใด HEIC คือรูปแบบภาพถ่ายเริ่มต้นของ Apple และมีขนาดเล็กกว่า JPG ประมาณ 50% โดยมีคุณภาพใกล้เคียงกัน แต่นี่คือปัญหา: เว็บเบราว์เซอร์อื่นที่ไม่ใช่ Safari ส่วนใหญ่ไม่รองรับ Windows ต้องใช้ปลั๊กอินเพื่อดู แบบฟอร์มออนไลน์ส่วนใหญ่ปฏิเสธ HEIC เหมาะอย่างยิ่งสำหรับการจัดเก็บรูปภาพบน iPhone ของคุณ แต่เมื่อคุณต้องการแชร์หรืออัปโหลด คุณก็ทำได้ แปลงเป็น JPG หรือเว็บพี

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

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

ตัวเลขบอกเล่าเรื่องราวได้ดีกว่าคำพูด ถ่ายภาพทั่วไปขนาด 1920 × 1080 และบันทึกในแต่ละรูปแบบด้วยคุณภาพของภาพที่เทียบเคียงได้ JPG ที่คุณภาพ 85: ~250 KB PNG (ไม่สูญเสียข้อมูล): ~2.5 MB WebP ที่คุณภาพเทียบเท่า: ~180 KB AVIF ที่คุณภาพเทียบเท่า: ~130 KB นั่นหมายความว่า AVIF มีขนาดประมาณครึ่งหนึ่งของ JPG โดยมีผลลัพธ์ที่เหมือนกัน และเล็กกว่า WebP ประมาณ 30%

สำหรับกราฟิกหรือภาพหน้าจอที่มีข้อความและสีเรียบๆ ตัวเลขจะเปลี่ยนไป PNG: ~150 กิโลไบต์ JPG ที่คุณภาพ 90: ~200 KB (และมีส่วนที่มองเห็นได้รอบๆ ข้อความ) WebP แบบไม่สูญเสีย: ~100 KB AVIF แบบไม่สูญเสีย: ~90 KB นี่คือเหตุผลที่ว่าทำไม PNG ถึงนิยมใช้สำหรับกราฟิก เพราะจริงๆ แล้ว JPG จะสร้างไฟล์ที่ใหญ่กว่าและมีคุณภาพต่ำกว่าสำหรับเนื้อหาประเภทนี้

JPG และ PNG ทำงานได้ทุกที่ ทุกเบราว์เซอร์ ทุกแอป ทุกอุปกรณ์ ย้อนกลับไปหลายทศวรรษ ขณะนี้ WebP มีการรองรับเบราว์เซอร์ที่เกือบจะเป็นสากล: Chrome, Firefox, Safari (ตั้งแต่ปี 2022), Edge และเบราว์เซอร์มือถือทั้งหมดรองรับ สิ่งที่ค้างอยู่เพียงอย่างเดียวคือระบบองค์กรและไคลเอนต์อีเมลที่เก่ามาก

การรองรับ AVIF มีการเติบโตแต่ยังไม่เป็นสากล Chrome, Firefox และ Opera รองรับอย่างเต็มที่ Safari เพิ่มการรองรับ AVIF ในปี 2023 แต่อุปกรณ์ iOS รุ่นเก่าบางรุ่นยังคงไม่สามารถรองรับได้ หากคุณกำลังสร้างเว็บไซต์ แนวทางที่ปลอดภัยคือให้บริการ AVIF ด้วย WebP สำรองและ JPG เป็นเครือข่ายความปลอดภัยขั้นสุดท้ายโดยใช้ HTML <picture> องค์ประกอบ.

การแปลงจากแบบไม่สูญเสียเป็นสูญเสีย (PNG → JPG, PNG → WebP) นั้นปลอดภัยอย่างยิ่ง - คุณเพียงแค่เลือกระดับการบีบอัดเท่านั้น การแปลงการสูญเสียเป็นการสูญเสีย (JPG → WebP) ทำงานได้ดีสำหรับการแปลงครั้งเดียว แต่ทำให้เกิดการสูญเสียคุณภาพเล็กน้อย อย่าแปลงไปมาระหว่างรูปแบบที่สูญเสียไปซ้ำๆ กัน การแปลงแต่ละครั้งจะลดคุณภาพลงอีก เช่น การถ่ายเอกสาร

หากคุณต้องการแปลงรูปภาพระหว่างรูปแบบ แปลง PNG เป็น JPG, แปลง HEIC เป็น JPGหรือใช้อย่างอื่นของเรา เครื่องมือแปลง — ทั้งหมดนี้ฟรีและรวดเร็วในเบราว์เซอร์ของคุณ

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