เราเขียนข้อมูลเกี่ยวกับการขยายตัวของเว็บไซต์จากรูปภาพอยู่บ่อยครั้ง และเครื่องมืออย่าง 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 เป็น Muxer และโปรแกรมแยกวิเคราะห์ 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 เราจะแสดงบทแนะนำโดยใช้รูปภาพต้นฉบับเดียวกันที่ใช้ในตัวอย่างข้างต้น ในการเริ่มใช้งาน คุณต้องมีสิ่งต่อไปนี้
นอกจากนี้ คุณจะต้องติดตั้งแพ็กเกจการพัฒนาสำหรับ 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 ที่ใช้ในบทแนะนำนี้มีดังนี้
| Avifnc | |
|---|---|
| --ต่ำสุด 0 | ตั้งค่าควอนเซอร์ขั้นต่ำสำหรับสีเป็น 0 |
| --สูงสุด 63 อักขระ | ตั้งค่าควอนเซอร์สูงสุดสำหรับสีเป็น 63 |
| --ขั้นต่ำ 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 |
| -a tune=ssim | ปรับสำหรับ SSIM (ค่าเริ่มต้นคือ ปรับสำหรับ PSNR) |
| --งาน จ | ใช้ชุดข้อความของผู้ปฏิบัติงาน J (ค่าเริ่มต้น: 1) |
| --ความเร็ว S | ตั้งความเร็วโปรแกรมเปลี่ยนไฟล์จาก 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 ของตัวเองแล้ว
กำลังเร่งโปรแกรมเปลี่ยนไฟล์
พารามิเตอร์หนึ่งที่อาจเปลี่ยนแปลงได้ดีโดยขึ้นอยู่กับจำนวนแกนที่คุณมีในเครื่องคือพารามิเตอร์ --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 คือให้ตรวจสอบว่ารูปภาพได้รับการเพิ่มประสิทธิภาพ การลดขนาดการโอนทรัพยากรจะเป็นการปรับปรุงเวลาที่ใช้ในการโหลดทรัพยากร ซึ่งเป็น1 ใน 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