ข้อมูลอัปเดตเกี่ยวกับวิธีนำ AVIF ไปใช้ในระบบนิเวศ
AVIF เป็นรูปแบบรูปภาพใหม่ที่ได้รับความนิยมอย่างรวดเร็วบนเว็บเนื่องจากมีอัตราการบีบอัดสูง ประสิทธิภาพที่มีประสิทธิภาพ และการนำไปใช้อย่างแพร่หลาย AVIF เป็นรูปแบบรูปภาพแบบเปิดที่ไม่มีค่าสิทธิ ซึ่งอิงตามตัวแปลงรหัสวิดีโอ AV1 ที่ได้มาตรฐานโดย Alliance for Open Media บล็อกโพสต์นี้จะแสดงภาพรวมของการนำ AVIF ไปใช้ในระบบนิเวศ รวมถึงประสิทธิภาพและคุณภาพที่นักพัฒนาแอปจะได้รับจาก AVIF สำหรับภาพนิ่งและภาพเคลื่อนไหว
มีอะไรใหม่ในระบบนิเวศ AVIF
นับตั้งแต่มีการเปิดตัว AVIF ใน Chrome, Firefox และ Safari การใช้งาน AVIF บนเว็บก็เพิ่มขึ้นอย่างต่อเนื่อง โดยปัจจุบันเบราว์เซอร์เกือบทั้งหมดรองรับ AVIF แล้ว
ใน Chrome เพียงอย่างเดียว การใช้งาน AVIF เพิ่มขึ้นเป็นประมาณ 1% ในเวลาเพียงปีกว่าๆ หลังจากที่ Chrome เพิ่มการรองรับ AVIF ในเวอร์ชันเสถียร
ปัจจุบัน CDN รูปภาพจำนวนมาก เช่น Akamai, Cloudflare, Cloudinary และ Imgix ต่างก็แสดงรูปภาพ AVIF ในบล็อกโพสต์ที่ประกาศการรองรับ AVIF นั้น Imgix รายงานว่าประหยัดขนาดไฟล์ได้ 60% เมื่อเทียบกับ JPEG และประหยัดได้ 35% เมื่อเทียบกับ WebP การประหยัดขนาดไฟล์เหล่านี้ช่วยประหยัดพื้นที่เก็บข้อมูลได้มาก และยังช่วยให้หน้าเว็บโหลดเร็วขึ้นด้วย ส่งผลให้เวลา Largest Contentful Paint (LCP) เร็วขึ้น LCP เป็นหนึ่งใน Core Web Vitals และแสดงความเร็วในการโหลดบล็อกเนื้อหาที่ใหญ่ที่สุดในหน้าเว็บ การใช้ตัวแปลงรหัสสมัยใหม่เพื่อบีบอัดรูปภาพเป็นหนึ่งในเทคนิคสำคัญในการลด LCP Lighthouse เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ที่ยอดเยี่ยมสำหรับการทดสอบเว็บไซต์และดูว่า AVIF จะช่วยประหยัดได้มากเพียงใด
WordPress เป็นแพลตฟอร์มเว็บไซต์ที่ได้รับความนิยมมากที่สุดในโลก และมีปลั๊กอินมากมายที่นักพัฒนาแอปสามารถใช้เพื่อแปลงรูปภาพเป็น AVIF เช่น
สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการลงมือทำเอง เครื่องมืออย่าง ImageMagick และ FFmpeg เป็นจุดเริ่มต้นที่ดี
ความเร็วในการเข้ารหัส AVIF
ความเร็วในการเข้ารหัสที่รวดเร็วและคุณภาพของภาพที่สูงเป็นสิ่งสำคัญสำหรับการปรับใช้การบีบอัดรูปภาพในวงกว้าง ความเร็วในการเข้ารหัสซอฟต์แวร์ AVIF เพิ่มขึ้นอย่างมากในช่วง 2 ปีที่ผ่านมา เมื่อเทียบกับรูปแบบภาพนิ่งสมัยใหม่อื่นๆ AVIF จะสร้างไฟล์ขนาดเล็กกว่าซึ่งมีคุณภาพของภาพใกล้เคียงกัน (ดูกราฟต่อไปนี้ ยิ่งต่ำยิ่งดี) แต่ก็เข้ารหัสได้เร็วกว่าด้วย
แผนภูมิด้านล่าง (ยิ่งสูงยิ่งดี) แสดงให้เห็นว่าความเร็วในการเข้ารหัส AVIF เทียบกับรูปแบบรูปภาพอื่นๆ เป็นอย่างไร ตัวแปลงรหัสรุ่นก่อนหน้าอย่าง WebP ได้รับประโยชน์จากอัลกอริทึมการบีบอัดที่ซับซ้อนน้อยกว่า (แต่ก็มีประสิทธิภาพน้อยกว่าด้วย) ด้วยรูปแบบการเข้ารหัสแบบหลายเธรด AVIF จึงมีประสิทธิภาพใกล้เคียงกันสำหรับกรณีการใช้งานทั่วไป ขณะเดียวกันก็ให้ประโยชน์ด้านการบีบอัดที่สำคัญ
สำหรับนักพัฒนาแอปที่สนใจรายละเอียดเพิ่มเติมเกี่ยวกับความเร็วในการเข้ารหัสและการเปรียบเทียบคุณภาพของภาพ เว็บไซต์การเปรียบเทียบการเข้ารหัสรูปภาพมีผลการเปรียบเทียบที่ทำซ้ำได้
แม้ว่าการติดตั้งใช้งานซอฟต์แวร์สำหรับตัวแปลงรหัสรูปภาพสมัยใหม่อย่าง AVIF และ WebP จะได้รับการเพิ่มประสิทธิภาพสำหรับสถาปัตยกรรมโปรเซสเซอร์ x86 และ ARM แต่การบีบอัดรูปภาพจำนวนมากในวงกว้างอาจต้องใช้ทรัพยากรในการประมวลผลสูง ทางเลือกหนึ่งในการลดต้นทุนการบีบอัดคือการสำรวจการเร่งฮาร์ดแวร์ Bluedot ได้พัฒนาโปรแกรมเปลี่ยนไฟล์ Pulsar-AVIF ที่เร่งฮาร์ดแวร์ซึ่งทำงานบน FPGA ที่ตั้งโปรแกรมได้ เช่น Alveo U250 ของ AMD เมื่อเทียบกับ avifenc ที่ใช้ซอฟต์แวร์ Pulsar-AVIF จะมีความเร็วเพิ่มขึ้น 7-23 เท่า โดยมีประสิทธิภาพการบีบอัดที่ใกล้เคียงกัน
- ชุดทดสอบ: Kodak (รูปภาพขนาด 768x512 จำนวน 24 รูป)
- การเข้ารหัสรูปภาพ 24 รูปพร้อมกัน (24 กระบวนการ)
- กระบวนการเข้ารหัสซอฟต์แวร์แต่ละกระบวนการจะดำเนินการด้วย 4 เทรด (-j 4)
นักพัฒนาแอปสามารถติดตั้งใช้งานโปรแกรมเปลี่ยนไฟล์ Pulsar-AVIF ด้วยเครื่องเสมือนในระบบคลาวด์ เช่น Azure NP-Series
ฟีเจอร์ AVIF สำหรับหน้าเว็บที่ปรับเปลี่ยนตามอุปกรณ์
AVIF มีฟีเจอร์ที่น่าสนใจบางอย่างที่จะช่วยแสดงหน้าเว็บที่ปรับเปลี่ยนตามอุปกรณ์ได้มากขึ้น ครั้งนี้เราจะเจาะลึกเกี่ยวกับ AVIF แบบเคลื่อนไหว ซึ่งเป็นวิธีที่มีประสิทธิภาพมากที่สุดในการแสดงภาพเคลื่อนไหวเจ๋งๆ บนเว็บ
AVIF แบบเคลื่อนไหว
GIF แบบเคลื่อนไหวยังคงเป็นรูปแบบยอดนิยมสำหรับภาพเคลื่อนไหว แม้ว่าจะมีอายุถึง 35 ปีแล้วก็ตาม ข้อเสียที่ใหญ่ที่สุดของ GIF ภาพเคลื่อนไหวคือรองรับสีเพียง 256 สีและการบีบอัดที่ไม่ดีซึ่งทำให้ไฟล์มีขนาดใหญ่มาก ทั้งยังจำกัดความละเอียดหรืออัตราเฟรมสำหรับกรณีการใช้งานจริงด้วย ในทางตรงกันข้าม การเข้ารหัส AVIF แบบเคลื่อนไหวจะเหมือนกับรูปแบบการเข้ารหัสวิดีโอ AV1 ซึ่งช่วยประหยัดขนาดไฟล์ได้อย่างมากเมื่อเทียบกับ GIF ภาพเคลื่อนไหว
เราได้ทำการเปรียบเทียบง่ายๆ โดยเข้ารหัสชุด GIF ภาพเคลื่อนไหวเป็นทั้ง AVIF และ JPEG XL ในชุดทดสอบ เปอร์เซ็นต์การประหยัดขนาดไฟล์ค่ามัธยฐานอยู่ที่ประมาณ 86% เมื่อเทียบกับไฟล์ GIF ต้นฉบับ และประมาณ 73% เมื่อเทียบกับไฟล์ JPEG XL แบบเคลื่อนไหว*
Chrome, Firefox และ Safari ต่างก็รองรับการเล่น AVIF แบบเคลื่อนไหว
FFmpeg เป็นเครื่องมือหนึ่งที่ใช้สร้างไฟล์ AVIF แบบเคลื่อนไหวได้ ตัวอย่างพื้นฐานของการแปลง GIF เป็น AVIF โดยใช้ FFmpeg มีดังนี้
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF คือคุณภาพเอาต์พุตที่ต้องการในระดับ 0 ถึง 63 ค่าที่ต่ำกว่าหมายถึงคุณภาพที่ดีขึ้นและขนาดไฟล์ที่ใหญ่ขึ้น 0 ใช้การบีบอัดแบบไม่สูญเสียรายละเอียด เริ่มต้นด้วยค่า 23 สำหรับไฟล์ AVIF แบบเคลื่อนไหวขนาดเล็ก
FFmpeg ใช้ libaom โดยค่าเริ่มต้นสำหรับการเข้ารหัสรูปภาพ AVIF แต่ก็สามารถใช้ rav1e หรือ SVT-AV1 ได้ด้วย หากมี ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกโปรแกรมเปลี่ยนไฟล์ การปรับพารามิเตอร์การเข้ารหัสเพื่อแลกเปลี่ยนความเร็ว/คุณภาพได้ในคู่มือการเข้ารหัส AV1 ของ FFmpeg
กรณีการใช้งานอีกอย่างหนึ่งคือการจัดแพ็กเกจวิดีโอ AV1 ใหม่เป็น AVIF โดยไม่ต้องเข้ารหัสไฟล์ต้นฉบับอีกครั้ง ซึ่งมีค่าใช้จ่ายน้อยกว่าการถอดรหัส/เข้ารหัสไฟล์ AV1 ต้นฉบับอย่างมาก และทำให้วิดีโอ AV1 พร้อมใช้งานกับองค์ประกอบ <img> การส่ง -c:v copy ไปยัง FFmpeg จะช่วยแก้ปัญหานี้ได้
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
บทสรุป
การใช้ AVIF บนเว็บเพิ่มขึ้นอย่างต่อเนื่องนับตั้งแต่เปิดตัว และได้รับการรองรับอย่างกว้างขวางจากเบราว์เซอร์, CDN รูปภาพ, ปลั๊กอิน WordPress และเครื่องมือเข้ารหัส สรุปแล้ว AVIF เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการแสดงรูปภาพบนเว็บ โดย AVIF จะเข้ารหัสและถอดรหัสได้อย่างรวดเร็ว พร้อมทั้งให้คุณภาพที่ดีที่สุดหรือขนาดไฟล์ที่เล็กที่สุด แล้วแต่ว่าคุณต้องการแบบใดสำหรับเว็บไซต์ AVIF เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการแสดงภาพเคลื่อนไหวบนเว็บ หากมีคำถาม ความคิดเห็น หรือคำขอฟีเจอร์ โปรดติดต่อเราผ่านรายชื่ออีเมล av1-discuss, ชุมชน AOM Github และ AVIF wiki