JPG, PNG, WebP และ AVIF ต่างกันอย่างไร

เปรียบเทียบทั้งสี่รูปแบบ

จุดเด่นของแต่ละรูปแบบ

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

PNG เป็นแบบไม่สูญเสียข้อมูล และบีบอัดโดยค้นหารูปแบบที่ซ้ำกันและคาดเดาได้ ภาพหน้าจอ แผนภูมิ และโลโก้จึงมีขนาดเล็ก แต่ภาพถ่ายไม่เป็นเช่นนั้น ภาพถ่ายขนาด 12 ล้านพิกเซลมีค่าสีรวม 36 ล้านไบต์ (4,000 × 3,000 พิกเซล × 3 ไบต์) และสัญญาณรบกวนจากกล้องแทบไม่ซ้ำกันเลย ไฟล์ PNG ของภาพถ่ายจึงมักใหญ่กว่า JPG คุณภาพดีหลายเท่า

WebP มีทั้งโหมดแบบสูญเสียข้อมูลและแบบไม่สูญเสียข้อมูล และทั้งสองโหมดรองรับความโปร่งใส WebP แบบสูญเสียข้อมูลเก็บข้อมูลสีที่ครึ่งหนึ่งของความกว้างและครึ่งหนึ่งของความสูง เส้นสีบาง ๆ และตัวหนังสือสีแดงจึงอาจดูไม่คม ความกว้างและความสูงของภาพ WebP ต้องไม่เกิน 16,383 พิกเซล ภาพหน้าจอที่ยาวมากจึงบันทึกเป็น WebP ไม่ได้ ขณะที่รูปแบบ JPG รองรับได้ถึง 65,535 พิกเซล

AVIF พัฒนามาจากโคเดกวิดีโอ AV1 สำหรับภาพถ่าย AVIF มักมีประสิทธิภาพสูงที่สุดในสี่รูปแบบนี้ โดยเฉพาะที่คุณภาพต่ำ และเก็บสีแบบ 10 หรือ 12 บิตรวมถึง HDR ได้ แต่การเข้ารหัสมักช้ากว่า และการรองรับนอกเบราว์เซอร์ยังตามหลัง WebP อยู่

ตัวอย่างจากการวัดจริง: ภาพหน้าจอหนึ่งภาพ หกไฟล์

เราวาดภาพหน้าจอแดชบอร์ดขนาด 1280 × 800 (สีพื้นเรียบ ตัวหนังสือ และแผนภูมิแท่ง) แล้วบันทึกด้วย Python Pillow 12.3 (libjpeg-turbo 3.1, libwebp 1.6, libavif 1.4) ที่คุณภาพ 92 สำหรับรูปแบบที่มีการตั้งค่าคุณภาพ ซึ่งตรงกับค่าคงที่ 0.92 ที่ตัวแปลงของ LeedyBox ส่งให้เบราว์เซอร์ ส่วน WebP แบบไม่สูญเสียข้อมูลใช้การตั้งค่าที่ช้าที่สุดแต่บีบอัดได้มากที่สุด นี่เป็นเพียงภาพสังเคราะห์ภาพเดียว ตัวเข้ารหัสของเบราว์เซอร์ใช้การตั้งค่าอื่นและให้ตัวเลขที่ต่างออกไป และภาพถ่ายก็ให้ผลต่างกัน 1 KB = 1,024 ไบต์

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

เมื่อทดสอบกับโลโก้ขนาด 512 × 512 บนพื้นหลังโปร่งใส ได้ผลดังนี้ PNG 31.6 KB, WebP แบบสูญเสียข้อมูล 18.4 KB โดยยังคงความโปร่งใสไว้, AVIF 16.6 KB, WebP แบบไม่สูญเสียข้อมูล 12.7 KB และ JPG 25.2 KB ซึ่งส่วนที่โปร่งใสกลายเป็นสี่เหลี่ยมสีขาว ครั้งนี้ WebP แบบไม่สูญเสียข้อมูลก็ได้ไฟล์เล็กที่สุดอีกเช่นกัน และยังเก็บทุกพิกเซลไว้ตามเดิม

การแปลงไฟล์ทำอะไรได้และทำอะไรไม่ได้

• การแปลงไม่ได้กู้รายละเอียดคืนมา JPG ที่บันทึกเป็น PNG ยังมีร่องรอยการบีบอัดอยู่เหมือนเดิม
• แปลงจากแบบสูญเสียข้อมูลไปเป็นแบบสูญเสียข้อมูลจะยิ่งเสียคุณภาพเพิ่ม การแปลง JPG เป็น WebP หรือ AVIF จะเข้ารหัสร่องรอยการบีบอัดเดิมซ้ำอีกรอบ จึงควรเริ่มจากต้นฉบับที่ดีที่สุดที่คุณมี
• ความโปร่งใสต้องใช้รูปแบบที่เก็บความโปร่งใสได้ JPG ไม่มีช่องอัลฟา ตัวแปลงของ LeedyBox จึงเติมสีขาวในพื้นที่โปร่งใสเมื่อบันทึกเป็น JPG หรือ BMP และขอบที่นุ่มจะถูกผสมกับสีขาวนั้น สำหรับโลโก้และภาพที่ตัดพื้นหลัง ให้คงไว้เป็น PNG หรือ WebP
• ขนาดพิกเซลมักสำคัญกว่า ภาพถ่ายขนาด 4,000 × 3,000 ที่แสดงที่ 1,200 × 900 มีพิกเซล 12 ล้านพิกเซล ทั้งที่ต้องการเพียง 1.08 ล้านพิกเซล หรือมากกว่าประมาณ 11 เท่า แม้แต่หน้าจอที่มีความหนาแน่นพิกเซลเป็นสองเท่าก็ใช้เพียง 2,400 × 1,800 หรือ 4.32 ล้านพิกเซล ดูการปรับขนาดภาพ

การแปลงด้วยตัวแปลงไฟล์ภาพของ LeedyBox

1. เปิดตัวแปลงไฟล์ภาพ แล้วคลิก "เลือกไฟล์หรือลากและวางที่นี่" หรือลากภาพมาวางในกรอบ รองรับไฟล์ PNG, JPG, WebP, BMP, GIF และ AVIF หากเบราว์เซอร์ของคุณเปิดไฟล์นั้นได้
2. แต่ละไฟล์จะแสดงในรายการพร้อมขนาดพิกเซลและเมนูรูปแบบ ซึ่งตั้งต้นไว้ที่ JPG และมีตัวเลือก PNG, WebP, BMP, AVIF และ ICO ด้วย คุณเปลี่ยนรูปแบบได้ทีละไฟล์ หรือใช้เมนู "ตั้งค่ารูปแบบทั้งหมดเป็น..." ข้าง "ตัวเลือกการแปลงหลายไฟล์:" เพื่อเปลี่ยนทุกไฟล์พร้อมกัน สำหรับภาพที่มีความโปร่งใส ให้เลือก PNG, WebP หรือ AVIF
3. คลิก "แปลงและดาวน์โหลด" หากมีภาพเดียว ไฟล์จะดาวน์โหลดโดยใช้ชื่อเดิมต่อท้ายด้วย "_converted" เช่น holiday_converted.webp หากมีหลายภาพ คุณจะได้รับเป็นไฟล์ leedybox_converted_images.zip

ตัวแปลงจะคงขนาดพิกเซลเดิมไว้ ยกเว้น ICO ซึ่งจะถูกย่อให้อยู่ภายใน 256 × 256 พิกเซล สำหรับ JPG, WebP และ AVIF ตัวแปลงจะขอคุณภาพ 0.92 (ในสเกล 0 ถึง 1) จากเบราว์เซอร์ และไม่มีการตั้งค่าคุณภาพให้ปรับ Chrome และ Edge สร้าง WebP แบบสูญเสียข้อมูลที่ค่านี้ ส่วนตัวเข้ารหัสของเบราว์เซอร์อื่นอาจทำงานต่างออกไป JPG และ BMP จะถูกเติมพื้นหลังสีขาว และ BMP จะถูกบันทึกแบบไม่บีบอัดที่ 24 บิตต่อพิกเซล ภาพถ่ายขนาด 6,000 × 4,000 จึงกลายเป็นไฟล์ขนาด 72,000,054 ไบต์ เบราว์เซอร์จำนวนมากสร้าง AVIF ไม่ได้ ตัวแปลงจึงทดสอบเรื่องนี้เมื่อเปิดหน้า และหากเบราว์เซอร์สร้างไม่ได้ ก็จะปิดตัวเลือกนี้และแสดงเป็น "AVIF (เบราว์เซอร์นี้ไม่รองรับ)"

การแปลงทำงานในเบราว์เซอร์ของคุณ และภาพไม่ได้ถูกส่งไปยัง LeedyBox เพื่อแปลง ภาพแต่ละภาพจะถูกวาดใหม่ ข้อมูล EXIF ตำแหน่ง GPS และเมทาดาทาอื่น ๆ จึงไม่ถูกคัดลอกไปด้วย หากต้องการกำหนดคุณภาพเองและดูภาพก่อนและหลังเทียบกัน ให้ใช้เครื่องมือบีบอัดภาพ (รองรับ JPG, WebP หรือ PNG มีแถบเลื่อนคุณภาพที่เริ่มต้นที่ 75 หรือกำหนดขนาดไฟล์เป้าหมายได้) และหากต้องการลดขนาดกว้างยาวของภาพ ให้ใช้เครื่องมือปรับขนาดภาพ

รูปแบบใดเหมาะกับงานใด

สำหรับภาพบนหน้าเว็บ ดูเพิ่มเติมที่การเลือกรูปแบบรูปภาพที่เหมาะกับเว็บ

ปัญหาที่พบบ่อยและวิธีแก้

• พื้นหลังโปร่งใสกลายเป็นสีขาว ไฟล์ผลลัพธ์เป็น JPG ซึ่งเป็นตัวเลือกตั้งต้น หรือเป็น BMP ให้แปลงใหม่เป็น PNG, WebP หรือ AVIF
• ไฟล์ใหญ่ขึ้น เป็นเรื่องปกติสำหรับภาพถ่ายหรือ JPG ที่บันทึกเป็น PNG และสำหรับ BMP ซึ่งไม่มีการบีบอัด ใช้ JPG หรือ WebP สำหรับภาพถ่าย หรือเก็บไฟล์ต้นฉบับไว้ใช้
• เลือก AVIF ไม่ได้ เบราว์เซอร์ของคุณสร้าง AVIF ไม่ได้ ให้เลือก WebP หรือลองใช้เบราว์เซอร์อื่น
• ไฟล์ ZIP มีจำนวนไฟล์น้อยกว่าที่เพิ่มเข้าไป เมื่อแปลงเป็น WebP ทั้ง logo.png และ logo.jpg จะกลายเป็น logo_converted.webp และไฟล์ที่ตามมาทีหลังจะแทนที่ไฟล์ก่อนหน้า ให้เปลี่ยนชื่อไฟล์ใดไฟล์หนึ่งก่อน
• ไม่มีไฟล์ใดถูกดาวน์โหลด ไฟล์จะแปลงไม่สำเร็จเมื่อเบราว์เซอร์สร้างรูปแบบที่เลือกไม่ได้ เช่น เบราว์เซอร์บางตัวสร้าง WebP ไม่ได้ และรูปแบบ WebP ไม่รองรับภาพที่กว้างหรือสูงเกิน 16,383 พิกเซล ภาพที่ใหญ่มากยังอาจเกินขนาดแคนวาสที่เบราว์เซอร์รองรับได้ด้วย เมื่อแปลงหลายไฟล์พร้อมกัน หากมีไฟล์ใดไฟล์หนึ่งแปลงไม่สำเร็จ ตัวแปลงจะหยุดก่อนสร้างไฟล์ ZIP ให้เปลี่ยนรูปแบบของไฟล์นั้นหรือนำไฟล์นั้นออก
• ภาพเคลื่อนไหวกลายเป็นภาพนิ่ง ระบบเก็บไว้เพียงเฟรมเดียว ซึ่งโดยปกติคือเฟรมแรก

สิ่งที่ควรตรวจสอบหลังแปลง

• ดูผลลัพธ์ที่ขนาดจริง โดยเฉพาะตัวหนังสือ ขอบ ใบหน้า และสีไล่ระดับ
• เปรียบเทียบขนาดไฟล์ หากไฟล์ใหม่ไม่เล็กกว่า ให้ใช้ไฟล์ต้นฉบับต่อไป
• ตรวจดูภาพโปร่งใสบนพื้นหลังทั้งสีอ่อนและสีเข้ม
• ทดสอบไฟล์ในที่ที่จะใช้งานจริง เพราะโปรแกรมอีเมลและแบบฟอร์มอัปโหลดบางแห่งไม่รับ WebP หรือ AVIF

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