เรามักเขียนเกี่ยวกับการขยายตัวของเว็บไซต์จากรูปภาพ และเครื่องมือต่างๆ เช่น 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 เป็นโปรแกรมเปลี่ยนไฟล์และตัวถอดรหัส AV1 โอเพนซอร์สที่ดูแลโดยบริษัทต่างๆ ใน Alliance for Open Media และใช้ในบริการการผลิตจำนวนมากที่ Google และบริษัทสมาชิกอื่นๆ ระหว่างรุ่น libaom 2.0.0 ในช่วงเวลาเดียวกับที่ Chrome เพิ่มการรองรับ AVIF และรุ่น 3.1.0 ล่าสุด ได้มีการเพิ่มการเพิ่มประสิทธิภาพการเข้ารหัสภาพนิ่งที่สำคัญในฐานของโค้ด ซึ่งรวมถึงการใช้งานดังต่อไปนี้
- การเพิ่มประสิทธิภาพสำหรับเทรดหลายรายการและการเข้ารหัสแบบไทล์
- ลดการใช้งานหน่วยความจำลง 5 เท่า
- การใช้งาน CPU ลดลง 6.5 เท่า ดังที่แสดงในแผนภูมิด้านล่าง
การเปลี่ยนแปลงเหล่านี้ช่วยลดค่าใช้จ่ายในการเข้ารหัส AVIF ได้อย่างมาก โดยเฉพาะไฟล์ที่โหลดบ่อยที่สุดหรือรูปภาพที่มีลำดับความสำคัญสูงสุดในเว็บไซต์ เนื่องจากการเข้ารหัสแบบเร่งฮาร์ดแวร์ของ AV1 ใช้งานในเซิร์ฟเวอร์และบริการระบบคลาวด์ได้มากขึ้น ต้นทุนในการสร้างรูปภาพ AVIF จึงลดลงต่อไป
ลิบาวีฟ
Libavif ซึ่งเป็นการใช้ข้อมูลอ้างอิงของ AVIF คือ AVIF Muxer และโปรแกรมแยกวิเคราะห์แบบโอเพนซอร์สที่ใช้ใน 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 ที่มุ่งเป้าไปที่แอปโหนดด้วย
อย่างไรก็ตาม WebAssembly ยังไม่ได้เข้าถึงประสิทธิภาพพื้นฐานของ CPU ทั้งหมด ดังนั้นหากต้องการเรียกใช้ libavif อย่างเร็วที่สุด ขอแนะนำให้ใช้โปรแกรมเปลี่ยนไฟล์บรรทัดคำสั่ง Avifenc
เพื่อทำความเข้าใจวิธีเข้ารหัสรูปภาพ AVIF เราจะนำเสนอบทแนะนำโดยใช้ รูปภาพต้นฉบับเดียวกัน ที่ใช้ในตัวอย่างด้านบน ในการเริ่มใช้งาน คุณต้องมีสิ่งต่อไปนี้
คุณยังจะต้องติดตั้งแพ็กเกจการพัฒนาสำหรับ zlib, libpng และ libjpeg ด้วย คำสั่งสำหรับ Linux ชุด Debian และ Ubuntu มีดังนี้
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
การสร้างไฟล์โปรแกรมเปลี่ยนไฟล์สำหรับบรรทัดคำสั่ง
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 ที่ใช้ในบทแนะนำนี้ ได้แก่
| Avifenc | |
|---|---|
| --นาที 0 | ตั้งค่าตัวควอนไทเซอร์ขั้นต่ำสำหรับสีเป็น 0 |
| --สูงสุด 63 | ตั้งค่าตัวควอนไทเซอร์สูงสุดสำหรับสีเป็น 63 |
| --minalpha 0 | ตั้งค่าตัวควอนไทเซอร์ขั้นต่ำสำหรับอัลฟ่าเป็น 0 |
| --maxalpha 63 | ตั้งค่าตัวควอนไทเซอร์สูงสุดสำหรับอัลฟ่าเป็น 63 |
| -a end-usage=q | ตั้งค่าโหมดควบคุมอัตราเป็นโหมดคุณภาพคงที่ (Q) |
| -a cq-level=Q | ตั้งค่าระดับปริมาณสำหรับทั้งสีและอัลฟ่าเป็น Q |
| -a color:cq-level=Q | กำหนดระดับสีสำหรับสีเป็น Q |
| -a alpha:cq-level=Q | ตั้งค่าระดับปริมาณสำหรับอัลฟ่าเป็น Q |
| -เพลง=ssim | ปรับแต่งเพื่อรับ SSIM (ค่าเริ่มต้นคือจูนสำหรับ PSNR) |
| --งาน เจ | ใช้ชุดข้อความของ J Worker (ค่าเริ่มต้น: 1) |
| --ความเร็ว วิดีโอสี่เหลี่ยมจัตุรัส | ตั้งค่าความเร็วของโปรแกรมเปลี่ยนไฟล์ตั้งแต่ 0-10 (ช้าที่สุด ค่าเริ่มต้นคือ 6) |
ตัวเลือกระดับ CQ จะกำหนดระดับปริมาณ (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 ของตัวเองแล้ว
กำลังเพิ่มความเร็วของโปรแกรมเปลี่ยนไฟล์
พารามิเตอร์ 1 ตัวที่ควรเปลี่ยนได้ขึ้นอยู่กับจำนวนแกนที่มีอยู่ในเครื่องคือพารามิเตอร์ --jobs
พารามิเตอร์นี้จะกำหนดจำนวนชุดข้อความที่จะใช้ในการสร้างอิมเมจ 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 เท่า
ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (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, ชุมชน AOM GitHub และ AVIF wiki