การทำให้ AVIF ใช้งานได้สำหรับเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์

ข้อมูลอัปเดตเกี่ยวกับการนำ AVIF มาใช้ในระบบนิเวศ

Jani Huoponen

Vignesh Venkatasubramanian

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

มีอะไรใหม่ในระบบนิเวศ AVIF

นับตั้งแต่เปิดตัว AVIF ใน Chrome, Firefox และ Safari การใช้งาน AVIF บนเว็บก็เพิ่มขึ้นอย่างต่อเนื่อง ปัจจุบันเบราว์เซอร์เกือบทั้งหมดรองรับ AVIF

เฉพาะใน Chrome เพียงอย่างเดียว การใช้งาน AVIF ก็เพิ่มขึ้นเป็นประมาณ 1 เปอร์เซ็นต์ในระยะเวลาเพียง 1 ปีหลังจากที่ Chrome เพิ่มการรองรับ AVIF ในเวอร์ชันเสถียร

CDN รูปภาพหลายแห่ง เช่น Akamai, Cloudflare, Cloudinary และ Imgix แสดงรูปภาพ AVIF อยู่แล้วในปัจจุบัน ในบล็อกโพสต์ที่ประกาศการรองรับ AVIF ทาง Imgix รายงานว่าไฟล์ลดขนาดลงได้ 60% เมื่อเทียบกับ JPEG และประหยัดได้ 35% เมื่อเทียบกับ WebP การลดขนาดไฟล์เหล่านี้ช่วยประหยัดพื้นที่เก็บข้อมูลได้อย่างมาก แต่ยังช่วยให้หน้าเว็บโหลดได้เร็วขึ้น ซึ่งทำให้การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) เร็วขึ้นด้วย LCP เป็นหนึ่งใน Core Web Vitals และแสดงความเร็วในการโหลดบล็อกเนื้อหาที่ใหญ่ที่สุดในหน้าเว็บ การใช้ตัวแปลงรหัสสมัยใหม่เพื่อบีบอัดรูปภาพเป็นหนึ่งในเทคนิคหลักในการลด LCP Lighthouse เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ที่ยอดเยี่ยมสำหรับการทดสอบเว็บไซต์และดูว่าช่วยประหยัดค่าใช้จ่ายได้มากเพียงใด AVIF

WordPress เป็นแพลตฟอร์มเว็บไซต์ที่ได้รับความนิยมมากที่สุดในโลก และมีปลั๊กอินจํานวนมากที่นักพัฒนาแอปสามารถใช้แปลงรูปภาพเป็น AVIF ได้ เช่น

• เพิ่มประสิทธิภาพอัตโนมัติ
• แปลงสำหรับสื่อ
• EWWW Image Optimizer
• Optimole
• ShortPixel Image Optimizer

สําหรับนักพัฒนาซอฟต์แวร์ที่เชี่ยวชาญด้านนี้มากขึ้น เครื่องมืออย่าง 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 เท่าโดยมีประสิทธิภาพการบีบอัดที่คล้ายกัน

นักพัฒนาซอฟต์แวร์สามารถติดตั้งใช้งานโปรแกรมเข้ารหัส Pulsar-AVIF กับเครื่องเสมือนในระบบคลาวด์ เช่น Azure NP-Series

ฟีเจอร์ AVIF สำหรับหน้าเว็บที่ปรับเปลี่ยนตามอุปกรณ์

AVIF มีฟีเจอร์ที่น่าสนใจ 2-3 รายการที่จะช่วยให้แสดงหน้าเว็บที่ตอบสนองได้ดียิ่งขึ้น ครั้งนี้เราจะเจาะลึกเกี่ยวกับ 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

Use Case อีกอย่างหนึ่งคือการจัดแพ็กเกจวิดีโอ 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

รูปภาพหลักจาก Unsplash โดย Amal S