เปรียบเทียบฟอร์แมต

AVIF กับ WebP ควรใช้ฟอร์แมตภาพยุคใหม่ตัวไหน

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

สิ่งที่ WebP ทำได้ดีที่สุด

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

สิ่งที่ AVIF ทำได้ดีที่สุด

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

วิธีเลือกและทดสอบทั้งสองในเบราว์เซอร์ของคุณ

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

เครื่องบีบอัดรูปภาพที่โหลดภาพถ่ายและเลือก AVIF เป็นฟอร์แมตผลลัพธ์

ผลลัพธ์ AVIF เทียบกับ WebP แสดงความแตกต่างของขนาดไฟล์ที่คุณภาพเท่ากัน

เครื่องมือที่ใช้ในคู่มือนี้

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

ฉันใช้ AVIF โดยไม่มีตัวสำรอง WebP ได้หรือไม่

สำหรับหน้าเว็บใหม่ที่มุ่งเป้าไปยังเบราว์เซอร์สมัยใหม่ ใช้ได้ AVIF ได้รับการรองรับใน Chrome, Firefox, Safari และ Edge ตั้งแต่ปลายปี 2023 ซึ่งครอบคลุมการเข้าชมเว็บส่วนใหญ่อย่างท่วมท้น หากผู้ชมของคุณรวมถึงเบราว์เซอร์รุ่นเก่าหรือเว็บวิวบนมือถือบางตัวที่คุณยืนยันไม่ได้ การจัดเตรียมตัวสำรอง WebP ในองค์ประกอบ picture คือแนวทางที่ปลอดภัย เบราว์เซอร์จะเลือกฟอร์แมตแรกที่รองรับและละเลยส่วนที่เหลือ

ควรใช้ฟอร์แมตใดสำหรับรูปภาพแบบโปร่งใส

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