เกี่ยวกับ Codelab นี้
1 บทนำ
รูปภาพคิดเป็นมากกว่า 60% ของจำนวนไบต์โดยเฉลี่ยที่จำเป็นต่อการโหลดหน้าเว็บ การใช้ AVIF จะช่วยให้รูปภาพมีขนาดเล็กลงและทำให้เว็บไซต์โหลดเร็วขึ้น
AVIF คืออะไร
AVIF คือรูปแบบรูปภาพที่มาจากบิตสตรีมวิดีโอ AV1 AVIF สร้างขึ้นเพื่อประสิทธิภาพการบีบอัด
เหตุผลที่ควรใช้ AVIF
รูปภาพ AVIF มีขนาดเล็กกว่ารูปภาพ JPEG, PNG, GIF หรือ WebP ที่มีคุณภาพเท่าหรือดีกว่ามาก
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างรูปภาพ AVIF จากรูปภาพ
- วิธีแสดงผลรูปภาพ AVIF ในหน้าเว็บ
สิ่งที่คุณต้องมี
2 การสร้างรูปภาพ AVIF ด้วย Squoosh
Squoosh เป็นเว็บแอปการบีบอัดรูปภาพ ซึ่งช่วยให้คุณบีบอัดรูปภาพเป็นรูปภาพ AVIF ได้อย่างง่ายดาย
- เปิด https://squoosh.app
- วางรูปภาพในเครื่องลงใน Squoosh
- เลือก AVIF จากช่องรายการแบบเลื่อนลง "บีบอัด"
จากนั้น Squoosh จะบีบอัดรูปภาพเป็นรูปภาพ AVIF เมื่อ Squoosh ดำเนินการเสร็จแล้ว ระบบจะแสดงปุ่มดาวน์โหลดพร้อมสถิติบางอย่างเกี่ยวกับรูปภาพ AVIF ที่มุมขวาล่าง
รูปภาพตัวอย่างต้นฉบับมีขนาด 3340 KB และรูปภาพที่บีบอัดมีขนาด 378 KB รูปภาพตัวอย่างถูกบีบอัดให้เล็กลงเกือบ 10 เท่าเมื่อเทียบกับรูปภาพต้นฉบับ
- ดาวน์โหลดรูปภาพ AVIF
คลิกปุ่มดาวน์โหลด แล้วระบบจะบันทึกรูปภาพ AVIF ลงในไดรฟ์ในเครื่อง
ตอนนี้คุณก็มีรูปภาพ AVIF ของตัวเองแล้ว
3 การสร้างโปรแกรมเปลี่ยนไฟล์ avifenc ในบรรทัดคำสั่ง
avifenc เป็นแอปพลิเคชันบรรทัดคำสั่งที่สามารถแปลงรูปภาพ PNG และ JPEG เป็นรูปภาพ AVIF โดย avifenc ใช้ libavif ซึ่งเป็นไลบรารีที่สามารถถอดรหัสและเข้ารหัสรูปภาพ AVIF หากมีรูปภาพจำนวนมากที่ต้องการแปลงเป็น AVIF คุณอาจต้องใช้โปรแกรมเปลี่ยนไฟล์ avifenc ในบรรทัดคำสั่ง
- รับรหัส
git clone https://github.com/AOMediaCodec/libavif.git
- เปลี่ยนไดเรกทอรีเป็น libavif
cd libavif/
คุณกำหนดค่า avifenc และ libavif เพื่อสร้างได้หลายวิธี ดูข้อมูลเพิ่มเติมได้ที่ libavif เราจะสร้าง avifenc เพื่อให้มีการลิงก์แบบคงที่กับโปรแกรมเข้ารหัส libaom, โปรแกรมถอดรหัส dav1d และไลบรารีการประมวลผล libyuv
- สร้างเครื่องมือการเข้ารหัสบรรทัดคำสั่ง avifenc
คุณควรสร้างไดเรกทอรีบิลด์สำหรับ avifenc
mkdir build
เปลี่ยนเป็นไดเรกทอรีบิลด์
cd build
สร้างไฟล์บิลด์สำหรับ avifenc
cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../
สร้าง avifenc
make
คุณสร้าง avifenc เรียบร้อยแล้ว
4 การสร้างรูปภาพ AVIF ด้วย avifenc
- สร้างรูปภาพ AVIF ด้วยการตั้งค่าเริ่มต้น
พารามิเตอร์พื้นฐานที่สุดสำหรับ avifenc ที่จะทำงานได้คือการตั้งค่าไฟล์อินพุตและเอาต์พุต
./avifenc happy_dog.jpg example.avif
ตอนนี้คุณมีรูปภาพ AVIF รูปที่ 2 เป็นของตัวเองแล้ว
- การเปลี่ยนคุณภาพของการเข้ารหัส AVIF
โดยปกติแล้ว พารามิเตอร์เดียวที่คุณอาจต้องการเปลี่ยนในการเข้ารหัส AVIF คือพารามิเตอร์ quality
quality
คือพารามิเตอร์ที่แลกเปลี่ยนคุณภาพของรูปภาพที่บีบอัดกับขนาดของไฟล์ เช่น ไฟล์คุณภาพสูง (-q 90
) จะมีขนาดใหญ่กว่าไฟล์คุณภาพต่ำ (-q 20
) มาก แต่ไฟล์คุณภาพสูงจะดูดีกว่ามาก
5 แสดงผลรูปภาพ AVIF ในหน้าเว็บ
มาแสดงให้โลกเห็นถึงผลงานที่คุณทุ่มเทกัน
- สร้างหน้าเว็บเพื่อแสดงรูปภาพ AVIF
สร้างไฟล์ชื่อ avif_example.html
เปิด avif_example.html
ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้
<html>
<head>
<title>AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="example.avif" />
<img src="happy_dog.jpg" />
</picture>
</body>
</html>
คัดลอกไฟล์ต้นฉบับ (ในกรณีของฉันคือ happy_dog.jpg
) และไฟล์ AVIF (eaxmple.avif
) ไปยังไดเรกทอรีเดียวกับ avif_example.html
เราใช้องค์ประกอบ picture
เพื่อแสดงผลรูปภาพ AVIF หากเบราว์เซอร์รองรับ AVIF และจะแสดงผลเป็น JPEG แทนหากเบราว์เซอร์ไม่รองรับ ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ picture
ได้ที่นี่
- เปิดหน้าเว็บใน Chrome
วิธีหนึ่งในการเปิดไฟล์ html คือลาก avif_example.html
ไปยัง Chrome อีกตัวเลือกในการเปิดไฟล์ html คือการแสดง avif_example.html
จากเซิร์ฟเวอร์ HTTP
ตอนนี้รูปภาพ AVIF ควรแสดงผลใน Chrome คุณสามารถทดสอบได้โดยคลิกขวาที่รูปภาพแล้วเลือก Save image as...
ซึ่งจะเปิดกล่องโต้ตอบที่มี example.avif
อีกทางเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และดูว่ามีการดาวน์โหลด example.avif
หรือไม่
6 การสร้างรูปภาพ AVIF แบบเคลื่อนไหวด้วย FFmpeg
- สร้างรูปภาพ AVIF แบบเคลื่อนไหว
เรียกใช้คำสั่งนี้เพื่อสร้างรูปภาพ AVIF แบบเคลื่อนไหวจากไฟล์ y4m
ffmpeg -i ice_qcif_15fps.y4m animated.avif
ตอนนี้คุณก็มีรูปภาพ AVIF แบบเคลื่อนไหวเป็นของตัวเองแล้ว
- แสดงผลภาพ AVIF แบบเคลื่อนไหวในหน้าเว็บ
สร้างไฟล์ชื่อ avif_animated_example.html
เปิด avif_animated_example.html
ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้
<html>
<head>
<title>Animated AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="animated.avif" />
<img src="ice_qcif_15fps.gif" />
</picture>
</body>
</html>
คัดลอกไฟล์ต้นฉบับ (ในกรณีข้างต้นคือ ice_qcif_15fps.gif
) และไฟล์ AVIF (animated.avif
) ไปยังไดเรกทอรีเดียวกับ avif_animated_example.html
- เปิดหน้าเว็บใน Chrome
วิธีหนึ่งในการเปิดไฟล์ html คือลาก avif_animated_example.html
ไปยัง Chrome อีกตัวเลือกในการเปิดไฟล์ html คือการแสดง avif_animated_example.html
จากเซิร์ฟเวอร์ HTTP
ตอนนี้รูปภาพ AVIF แบบเคลื่อนไหวควรแสดงผลใน Chrome
หากใช้สื่อตัวอย่างที่ให้มา สื่อควรมีลักษณะคร่าวๆ ดังนี้
คุณสามารถทดสอบว่ารูปภาพนี้เป็นรูปภาพ AVIF แบบเคลื่อนไหวได้โดยการคลิกขวาที่รูปภาพและเลือก Save image as...
ซึ่งจะเปิดกล่องโต้ตอบที่มี animated.avif
อีกทางเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และดูว่ามีการดาวน์โหลด animated.avif
หรือไม่
7 การสร้างรูปภาพ AVIF แบบเคลื่อนไหวด้วย avifenc
- แปลงสื่อต้นฉบับเป็นรูปแบบ y4m
avifenc
รองรับ y4m เป็นอินพุตในการสร้างรูปภาพ AVIF แบบเคลื่อนไหว ตัวเลือกที่ยอดเยี่ยมในการสร้างไฟล์ y4m คือการใช้ FFmpeg
ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
- สร้างรูปภาพ AVIF แบบเคลื่อนไหว
เรียกใช้คำสั่งนี้เพื่อสร้างรูปภาพ AVIF แบบเคลื่อนไหวจากไฟล์ y4m
./avifenc ice_qcif_15fps.y4m animated.avif
ตอนนี้คุณมีรูปภาพ AVIF แบบเคลื่อนไหวรูปที่ 2 ของคุณเองแล้ว
- แสดงผลภาพ AVIF แบบเคลื่อนไหวในหน้าเว็บ
สร้างไฟล์ชื่อ avif_animated_example.html
เปิด avif_animated_example.html
ในเครื่องมือแก้ไขข้อความ แล้วพิมพ์โค้ดนี้
<html>
<head>
<title>Animated AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="animated.avif" />
<img src="ice_qcif_15fps.gif" />
</picture>
</body>
</html>
คัดลอกไฟล์ต้นฉบับ (ในกรณีข้างต้นคือ ice_qcif_15fps.gif
) และไฟล์ AVIF (animated.avif
) ไปยังไดเรกทอรีเดียวกับ avif_animated_example.html
- เปิดหน้าเว็บใน Chrome
วิธีหนึ่งในการเปิดไฟล์ html คือลาก avif_animated_example.html
ไปยัง Chrome อีกตัวเลือกในการเปิดไฟล์ html คือการแสดง avif_animated_example.html
จากเซิร์ฟเวอร์ HTTP
ตอนนี้รูปภาพ AVIF แบบเคลื่อนไหวควรแสดงผลใน Chrome
หากใช้สื่อตัวอย่างที่มีให้ สื่อควรมีลักษณะดังนี้
คุณสามารถทดสอบว่ารูปภาพนี้เป็นรูปภาพ AVIF แบบเคลื่อนไหวได้โดยการคลิกขวาที่รูปภาพและเลือก Save image as...
ซึ่งจะเปิดกล่องโต้ตอบที่มี animated.avif
อีกทางเลือกหนึ่งคือเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และดูว่ามีการดาวน์โหลด animated.avif
หรือไม่
- การเปลี่ยนคุณภาพของการเข้ารหัส AVIF
ไฟล์ ice_qcif_15fps.gif มีขนาดใหญ่กว่าประมาณ 7 เท่าและมีคุณภาพแย่กว่ามาก คุณสามารถเปลี่ยนคุณภาพของ AVIF ให้ใกล้เคียงกับคุณภาพของ ice_qcif_15fps.gif ได้โดยเปลี่ยนพารามิเตอร์คุณภาพเป็น 20
./avifenc -q 20 ice_qcif_15fps.y4m animated.avif
ตอนนี้ไฟล์ AVIF แบบเคลื่อนไหวและ ice_qcif_15fps.gif มีคุณภาพใกล้เคียงกัน แต่ไฟล์ GIF มีขนาดใหญ่กว่าประมาณ 22 เท่า
8 ยินดีด้วย
คุณทำแล็บโค้ดการแสดงรูปภาพ AVIF เสร็จแล้ว
เราหวังว่าคุณจะเข้าใจแล้วว่า AVIF ช่วยให้รูปภาพมีขนาดเล็กลงและส่งผ่านบนเว็บได้อย่างมีประสิทธิภาพมากขึ้นได้อย่างไร ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ของ AVIF ได้ในโพสต์ที่ยอดเยี่ยมโดย Jake Archibald