ข้อมูลอัปเดตเกี่ยวกับวิธีนำ AVIF มาใช้ในระบบนิเวศ
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 การลดขนาดไฟล์เหล่านี้ช่วยให้ประหยัดพื้นที่เก็บข้อมูลได้อย่างมาก แต่ก็ช่วยให้หน้าเว็บโหลดได้เร็วขึ้นโดยให้เวลาสำหรับ Largest Contentful Paint (LCP) เร็วขึ้น LCP เป็นหนึ่งใน Core Web Vitals และแสดงถึงความเร็วที่บล็อกเนื้อหาขนาดใหญ่ที่สุดในหน้าโหลด การใช้ตัวแปลงรหัสที่ทันสมัยเพื่อบีบอัดรูปภาพเป็นหนึ่งในเทคนิคหลักในการลด LCP Lighthouse เป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักพัฒนาซอฟต์แวร์ Chrome สำหรับการทดสอบเว็บไซต์ของคุณ และดูว่าAVIF จะประหยัดได้เท่าใด
WordPress เป็นแพลตฟอร์มเว็บไซต์ที่ได้รับความนิยมมากที่สุดในโลก และมีปลั๊กอินจำนวนมากให้นักพัฒนาซอฟต์แวร์แปลงรูปภาพเป็น AVIF เช่น
- AutoOptimize
- แปลงเป็นสื่อ
- เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW
- เพิ่มประสิทธิภาพ
- เครื่องมือเพิ่มประสิทธิภาพรูปภาพ ShortPixel
สำหรับนักพัฒนาซอฟต์แวร์ที่ลงมือปฏิบัติจริง เครื่องมือต่างๆ เช่น 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 (24 ภาพขนาด 768x512)
- เข้ารหัสรูปภาพ 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