การใช้ 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 และขอบเขตสีกว้าง, การสังเคราะห์เกรนฟิล์ม และการถอดรหัสแบบโปรเกรสซีฟ

มีอะไรใหม่

ตั้งแต่มีการรองรับ 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 และการรองรับอัลฟาแบบพรีมัลติพลายจะช่วยเร่งกระบวนการถอดรหัสให้เร็วขึ้น และสุดท้าย การรองรับโหมดการเข้ารหัส All-Intra ที่เพิ่มเข้ามาใหม่ใน 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
• ninja

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

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
• หากใช้ Bundler ที่มีการสนับสนุนจากชุมชนสำหรับ imagemin ให้พิจารณาใช้แพ็กเกจ imagemin-avif เพื่อเปิดใช้ Bundler เพื่อแสดงผลรูปภาพ AVIF ที่หลากหลาย

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

บทสรุป

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