เปรียบเทียบรูปแบบไฟล์รูปภาพ: WebP vs AVIF

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

รูปแบบ WebP

93.2%

การลดลงเฉลี่ย

รูปแบบ AVIF

95.4%

การลดลงเฉลี่ย

การรองรับ Browser

100%

Modern browsers

เปรียบเทียบขนาดไฟล์

รูปแบบ WebP

iOS 14+

ชนะ

รูปแบบ AVIF

Chrome 85+

ชนะ

ข้อมูลสำคัญจาก Chrome Performance

รูปแบบรูปภาพสมัยใหม่

AVIF และ WebP เป็นรูปแบบรูปภาพสมัยใหม่ที่มีการบีบอัดที่ดีกว่ารูปแบบ JPEG และ PNG แบบดั้งเดิม

AVIF

AVIF ให้การบีบอัดที่ดีเยี่ยมพร้อมขนาดไฟล์ที่เล็กที่สุด รองรับใน browser สมัยใหม่ทั้งหมด (Chrome 85+, Firefox 93+, Safari 16+)

WebP

WebP ให้การบีบอัดที่ดีพร้อมการรองรับ browser ที่กว้างขวาง รวมถึง browser รุ่นเก่าและ iOS เวอร์ชันเก่า (iOS 14+)

กลยุทธ์การเพิ่มประสิทธิภาพ

1.เพิ่มระดับการบีบอัด (คุณภาพช่วง 30-70)
2.ใช้รูปแบบสมัยใหม่ (AVIF/WebP แทน JPEG/PNG)
3.ใช้ขนาดแบบ responsive ด้วย srcset และ picture elements
4.พิจารณาใช้ image CDN สำหรับการเพิ่มประสิทธิภาพอัตโนมัติ

เมื่อไหร่ควรใช้แต่ละรูปแบบ

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

✓ต้องการขนาดไฟล์ที่เล็กที่สุด
✓กำหนดเป้าหมายเฉพาะ browser สมัยใหม่
✓สำหรับรูป hero และเนื้อหาส่วนบน

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

✓ต้องการการรองรับ browser ที่กว้างขึ้น
✓สมดุลระหว่างขนาดไฟล์กับความเข้ากันได้
✓รองรับอุปกรณ์ iOS รุ่นเก่า

แนวทางปฏิบัติที่ดีที่สุด

ใช้ HTML picture element เพื่อให้บริการ AVIF พร้อม WebP สำรองสำหรับความเข้ากันได้สูงสุด:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

เรียนรู้เพิ่มเติมจาก Chrome Performance Insights