WebP กับ AVIF: วิธีเลือกและทดสอบรูปแบบภาพที่เหมาะสม

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

ภาพรวมสองฟอร์แมต

ทั้ง WebP และ AVIF ถือกำเนิดจาก Video Codec Google เปิดตัว WebP ในปี 2010 โดยอิงจาก VP8 เทคโนโลยีเดียวกับฟอร์แมตวิดีโอ WebM Alliance for Open Media เปิดตัว AVIF ในปี 2019 โดยอิงจาก AV1 ซึ่งเป็น Video Codec รุ่นใหม่ที่มีประสิทธิภาพกว่า พัฒนาร่วมกันโดย Google, Mozilla, Apple, Netflix และอื่นๆ

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

การบีบอัด: ไฟล์เล็กลงเท่าไหร่?

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

• AVIF — อาจให้ผลดีสำหรับภาพถ่าย ไล่สี HDR และกระบวนการความลึกบิตสูง แต่การเข้ารหัสอาจมีต้นทุนสูง
• WebP — อาจให้ผลแบบสูญเสียหรือไม่สูญเสียที่มีประสิทธิภาพด้วยเครื่องมือที่พัฒนาเต็มที่และความซับซ้อนด้านปฏิบัติการต่ำกว่า

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

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

การรองรับของเบราว์เซอร์และซอฟต์แวร์

ตารางการรองรับเปลี่ยนได้ และส่วนแบ่งทั่วโลกไม่ใช่กลุ่มผู้ใช้ของคุณ ตรวจเบราว์เซอร์เป้าหมายและระบบรับข้อมูลอื่น องค์ประกอบ <picture> สามารถเสนอ AVIF ก่อน ตามด้วย WebP และใช้ JPEG เป็น <img> สำรองสุดท้าย:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="คำอธิบาย" />
</picture>

ความเร็ว Encoding และเครื่องมือ

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

ประสิทธิภาพตัวเข้ารหัสเปลี่ยนตามไลบรารีและรุ่น ต้นทุนถอดรหัสยังขึ้นกับมิติ ความลึกบิต อุปกรณ์ เบราว์เซอร์ และการทำงาน ควรทดสอบอุปกรณ์เป้าหมายระดับล่างแทนการคิดว่าความต่างมองไม่เห็น

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

เปรียบเทียบฟีเจอร์

AVIF แสดงความลึกบิตสูงขึ้น ขอบเขตสีกว้าง และสัญญาณ HDR เกินการเข้ารหัส WebP แบบ 8 บิตได้ แต่ความสามารถนี้ไม่รับประกันสีแม่นยำ การทำต้นฉบับ โปรไฟล์ ข้อมูลกำกับ พฤติกรรมเบราว์เซอร์ ความสามารถจอ และการทดสอบยังสำคัญ

เมื่อไหร่ควรใช้ฟอร์แมตไหน

เลือก AVIF เมื่อ:

• คุณควบคุม Image Pipeline และส่ง Fallback ได้
• ผล AVIF ตัวแทนช่วยแก้คอขวดด้านการส่งหรือคุณภาพที่เกี่ยวข้อง
• ต้องใช้ความสามารถ AVIF เช่น ความลึกบิตสูงขึ้นหรือ HDR และทดสอบเส้นทางสีทั้งหมดแล้ว
• CDN หรือกระบวนการ build สร้าง แคช และเลือกไฟล์ที่ตรวจแล้วได้ถูกต้อง

เลือก WebP เมื่อ:

• ปริมาณงานตัวเข้ารหัสที่วัดได้หรือความเรียบง่ายด้านปฏิบัติการสนับสนุน WebP
• ไคลเอนต์ที่รองรับรับ WebP และไฟล์ AVIF เพิ่มเติมไม่คุ้มค่า
• กราฟิกตัวแทนบรรลุเป้าหมายไบต์และคุณภาพใน WebP
• ส่ง WebP อยู่แล้วและความพยายามย้ายไม่คุ้ม

ใช้ทั้งสองเมื่อประโยชน์ที่วัดได้คุ้มค่า:

ชุด <picture> เพิ่มงานสร้าง จัดเก็บ แคช มาร์กอัป และตรวจคุณภาพ แต่อาจช่วยการส่งได้ CDN บางรายเลือกให้อัตโนมัติ แต่ต้องตรวจพฤติกรรมแผน คีย์แคช การจัดการ Vary การตั้งค่าคุณภาพ และผลสำรอง แทนการเหมาว่า “ดีที่สุด”

วิธีแปลงรูปของคุณ

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

• บีบอัด WebP ลดขนาดไฟล์ WebP ที่มีอยู่
• แปลงเป็น AVIF — สร้าง AVIF จากภาพต้นทางที่รองรับ
• JPG เป็น WebP แปลงรูปถ่าย JPEG เป็น WebP
• PNG เป็น WebP แปลงกราฟิก PNG เป็น WebP

หากทำงานกับต้นทาง JPEG คู่มือบีบอัดภาพโดยไม่เสียคุณภาพอธิบายวิธีเลือกค่าเริ่มต้นและเปรียบเทียบผลจริง

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