การใช้ AVIF เพื่อบีบอัดรูปภาพบนเว็บไซต์ของคุณ

Jai Krishnan

Wan-Teh Chang

Jeremy Wagner

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

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

นอกจากนี้ AVIF ยังเพิ่มการรองรับโค้ดและคอนเทนเนอร์สำหรับฟีเจอร์รูปภาพใหม่ๆ เช่น High Dynamic Range และ Wide Color Gamut, การสังเคราะห์เม็ดเกรนของฟิล์ม และการถอดรหัสแบบเป็นขั้นๆ

มีอะไรใหม่

นับตั้งแต่เปิดตัวการรองรับ AVIF ใน Chrome M85 เราได้ปรับปรุงการรองรับ AVIF ในระบบนิเวศแบบโอเพนซอร์สในหลายๆ ด้าน

Libaom

Libaom เป็นโปรแกรมเข้ารหัสและโปรแกรมถอดรหัส AV1 แบบโอเพนซอร์สที่ดูแลโดยบริษัทใน Alliance for Open Media และใช้ในบริการต่างๆ ของ Google และบริษัทสมาชิกอื่นๆ ระหว่างรุ่น libaom 2.0.0 และในช่วงเวลาเดียวกับที่ Chrome เพิ่มการรองรับ AVIF และรุ่นล่าสุด 3.1.0 ก็ได้มีการเพิ่มประสิทธิภาพการเข้ารหัสภาพนิ่งที่สำคัญในฐานของโค้ด ซึ่งได้แก่

• การเพิ่มประสิทธิภาพสำหรับการแยกหลายเธรดและการเข้ารหัสแบบแบ่งส่วน
• การใช้งานหน่วยความจําลดลง 5 เท่า
• การใช้งาน CPU ลดลง 6.5 เท่าตามที่แสดงในแผนภูมิด้านล่าง

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

Libavif

Libavif ซึ่งเป็นการใช้งานอ้างอิงของ AVIF เป็นโปรแกรมรวมและแยกวิเคราะห์ AVIF แบบโอเพนซอร์สที่ใช้ใน Chrome สำหรับการถอดรหัสรูปภาพ AVIF นอกจากนี้ยังใช้กับ libaom เพื่อสร้างรูปภาพ AVIF จากรูปภาพที่ไม่มีการจัดเก็บที่มีอยู่ หรือเปลี่ยนรูปแบบจากรูปภาพบนเว็บที่มีอยู่ (JPEG, PNG ฯลฯ) ได้ด้วย

เมื่อเร็วๆ นี้ Libavif ได้เพิ่มการรองรับการตั้งค่าโปรแกรมเปลี่ยนไฟล์ที่หลากหลายมากขึ้น รวมถึงการผสานรวมกับการตั้งค่าโปรแกรมเปลี่ยนไฟล์ libaom ขั้นสูงขึ้นด้วย การเพิ่มประสิทธิภาพในไปป์ไลน์การประมวลผล เช่น การแปลง YUV เป็น RGB ที่รวดเร็วโดยใช้ libyuv และการรองรับค่าอัลฟ่าแบบคูณล่วงหน้าจะช่วยเร่งกระบวนการถอดรหัสให้เร็วขึ้น และสุดท้าย การรองรับโหมดการเข้ารหัสแบบอินทราทั้งหมดที่เพิ่มเข้ามาใหม่ใน libaom 3.1.0 จะนําการปรับปรุงทั้งหมดของ libaom ที่กล่าวถึงข้างต้นมาใช้

การเข้ารหัสรูปภาพ AVIF ด้วย avifenc

วิธีที่รวดเร็วในการทดลองกับ AVIF คือ Squoosh.app โดยSquoosh เรียกใช้ libavif เวอร์ชัน WebAssembly และจะแสดงฟีเจอร์เดียวกันหลายอย่างเป็นเครื่องมือบรรทัดคำสั่ง ซึ่งช่วยให้เปรียบเทียบ AVIF กับรูปแบบอื่นๆ ทั้งเก่าและใหม่ได้ง่ายๆ นอกจากนี้ยังมี Squoosh เวอร์ชัน CLI สำหรับแอป Node ด้วย

อย่างไรก็ตาม WebAssembly ยังไม่มีสิทธิ์เข้าถึงข้อมูลพื้นฐานด้านประสิทธิภาพทั้งหมดของ CPU ดังนั้นหากต้องการเรียกใช้ libavif ที่เร็วที่สุด เราขอแนะนำให้ใช้โปรแกรมเข้ารหัสบรรทัดคำสั่งอย่าง avifenc

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

• Chrome เวอร์ชัน 85 ขึ้นไป
• cmake
• git
• นินจา

นอกจากนี้ คุณจะต้องติดตั้งแพ็กเกจการพัฒนาสำหรับ zlib, libpng และ libjpeg ด้วย คำสั่งสำหรับระบบปฏิบัติการ Linux ของ Debian และ Ubuntu มีดังนี้

sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev

การสร้างโปรแกรมเปลี่ยนไฟล์ avifenc ในบรรทัดคำสั่ง

1. รับโค้ด

ดูแท็กรุ่นของ libavif

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. เปลี่ยนไดเรกทอรีเป็น libavif

cd libavif

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

3. ดาวน์โหลดและสร้าง libaom

เปลี่ยนเป็นไดเรกทอรีทรัพยากร Dependency ภายนอกของ libavif

cd ext

คำสั่งถัดไปจะดึงซอร์สโค้ดของ libaom และสร้าง libaom แบบคงที่

./aom.cmd

เปลี่ยนไดเรกทอรีเป็น libavif

cd ..

4. สร้างเครื่องมือการเข้ารหัสบรรทัดคำสั่ง, avifenc

คุณควรสร้างไดเรกทอรีบิลด์สำหรับ avifenc

mkdir build

เปลี่ยนเป็นไดเรกทอรีบิลด์

cd build

สร้างไฟล์บิลด์สำหรับ avifenc

cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..

สร้าง avifenc

make

คุณสร้าง avifenc สำเร็จแล้ว!

ทำความเข้าใจพารามิเตอร์บรรทัดคำสั่ง avifenc

avifenc ใช้โครงสร้างบรรทัดคำสั่งดังนี้

./avifenc [options] input.file output.avif

พารามิเตอร์พื้นฐานสำหรับ avifenc ที่ใช้ในบทแนะนำนี้มีดังนี้

ตัวเลือก cq-level จะตั้งค่าการแปลงค่าเป็นจำนวนเต็ม (0-63) เพื่อควบคุมคุณภาพของสีหรืออัลฟ่า

สร้างรูปภาพ AVIF ด้วยการตั้งค่าเริ่มต้น

พารามิเตอร์พื้นฐานที่สุดที่ avifenc ทำงานคือการตั้งค่าไฟล์อินพุตและเอาต์พุต

./avifenc happy_dog.jpg happy_dog.avif

เราขอแนะนำให้ใช้บรรทัดคำสั่งต่อไปนี้เพื่อเข้ารหัสรูปภาพ เช่น ที่ระดับการแปลง 18

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif

Avifenc มีตัวเลือกมากมายที่จะส่งผลต่อทั้งคุณภาพและความเร็ว หากต้องการดูตัวเลือกและดูข้อมูลเพิ่มเติม ให้เรียกใช้ ./avifenc

ตอนนี้คุณก็มีรูปภาพ AVIF ของคุณเองแล้ว

เร่งความเร็วของโปรแกรมเปลี่ยนไฟล์

พารามิเตอร์หนึ่งที่ควรเปลี่ยน (ขึ้นอยู่กับจำนวนแกนประมวลผลในเครื่อง) คือพารามิเตอร์ --jobs พารามิเตอร์นี้กำหนดจำนวนเทรด avifenc ที่จะใช้ในการสร้างรูปภาพ AVIF ลองเรียกใช้คำสั่งนี้ในบรรทัดคำสั่ง

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif

วิธีนี้จะทำให้ avifenc ใช้เทรด 8 แบบเมื่อสร้างอิมเมจ AVIF ซึ่งช่วยเพิ่มความเร็วการเข้ารหัส AVIF ได้ประมาณ 5 เท่า

ผลต่อ Largest Contentful Paint (LCP)

รูปภาพเป็นองค์ประกอบที่มักเป็นตัวเลือกสำหรับเมตริก Largest Contentful Paint (LCP) คําแนะนําทั่วไปอย่างหนึ่งในการปรับปรุงความเร็วในการโหลดรูปภาพ LCP คือการตรวจสอบว่ารูปภาพได้รับการเพิ่มประสิทธิภาพแล้ว การลดขนาดการโอนของทรัพยากรเป็นการปรับปรุงเวลาในการโหลดทรัพยากร ซึ่งเป็นหนึ่งใน 4 ระยะสําคัญในการกำหนดเป้าหมายเมื่อจัดการกับ LCP ที่เป็นไปได้ซึ่งเป็นรูปภาพ

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

• ทำความคุ้นเคยกับตัวเลือกที่โปรแกรมเปลี่ยนไฟล์มีให้ คุณอาจประหยัดพื้นที่เก็บข้อมูลได้มากขึ้นโดยยังคงรักษาคุณภาพรูปภาพให้เพียงพอด้วยการทดสอบฟีเจอร์การเข้ารหัสที่มีของ AVIF
• AVIF มีการเข้ารหัสแบบสูญเสียคุณภาพและแบบไม่สูญเสียคุณภาพ การเข้ารหัสประเภทหนึ่งอาจทำงานได้ดีกว่าอีกประเภทหนึ่ง โดยขึ้นอยู่กับเนื้อหาของรูปภาพ ตัวอย่างเช่น รูปภาพที่ปกติจะแสดงเป็น JPEG น่าจะเหมาะกับการเข้ารหัสแบบสูญเสียคุณภาพมากที่สุด ส่วนการเข้ารหัสแบบไม่สูญเสียคุณภาพน่าจะเหมาะกับรูปภาพที่มีรายละเอียดง่ายๆ หรือภาพวาดเส้นซึ่งปกติจะแสดงเป็น PNG
• หากใช้เครื่องมือรวมที่มีชุมชนสนับสนุนสำหรับ imagemin ให้ลองใช้แพ็กเกจ imagemin-avif เพื่อเปิดใช้เครื่องมือรวมให้แสดงผลตัวแปรรูปภาพ AVIF

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

บทสรุป

การใช้ libaom, libavif และเครื่องมือโอเพนซอร์สอื่นๆ จะช่วยให้เว็บไซต์ของคุณมีคุณภาพและประสิทธิภาพของรูปภาพที่ดีที่สุดเมื่อใช้ AVIF รูปแบบนี้ยังค่อนข้างใหม่ และเรากําลังพัฒนาการเพิ่มประสิทธิภาพและการผสานรวมเครื่องมืออยู่อย่างต่อเนื่อง หากมีข้อสงสัย ความคิดเห็น หรือคำขอฟีเจอร์ โปรดติดต่อรายชื่ออีเมล av1-discuss, ชุมชน AOM GitHub และ AVIF wiki